none
ビューヘルパーの属性の共通化 RRS feed

  • 質問

  • お世話になります。
    ASP.NET MVCのビューヘルパーについて質問です。

    現在入力フォームを作成中です。
    その中でTextboxのビューヘルパーを多数使用していますが、Textboxのwidthやclassを共通化したいと考えています。
    現状では以下のように、追加属性を同じように書き連ねていますが、

    <dt>名前</dt>
    <dd>@Html.TextBoxFor(model => model.Name, new{ @class="tb01, width="50%" }) </dd>
    <dt>電話番号</dt>
    <dd>@Html.TextBoxFor(model => model.Post, new{ @class="tb01, width="50%" }) </dd>
    <dt>Email</dt>
    <dd>@Html.TextBoxFor(model => model.Email, new{ @class="tb01, width="50%" }) </dd>
    

    管理性を高めるために、共通化する方法などはありますでしょうか?
    maxlength等の属性は入力欄によって(名前、住所、電話番号など)変わるので個々に設定すればよいですが、(CSSの)class等揃える事が多いため、後々の変更を考えた作りにしたいと考えています。

    もしおわかりになれば、ご教授いただければと思います。

    2016年1月8日 2:06

回答

  • > TextBoxForに対して何かするのではなく、あくまでCSS側で定義すれば良い…という解釈で良いでしょうか?

    TextBoxFor に new{ @class="tb01, width="50%" } を書きたくないのですよね?

    書かないのであれば、残された手段は当該 TextBoxFor から生成される input 要素を何らかの手段で特定して、それに CSS なり jQuery なりを使って望むスタイルを適用するほかないと思うのですが?

    • 回答としてマーク fskkoba 2016年1月12日 4:58
    2016年1月8日 7:52

すべての返信

  • ご自分の環境(OS, IIS, Visual Studio, MVC のバージョンなど)を書いていただけませんか?

    > 管理性を高めるために、共通化する方法などはありますでしょうか?

    「共通化」というのは具体的にどういうことでしょうか?

    複数の TextBoxFor に同じ new{ @class="tb01, width="50%" } を書くのではなく、どこか別の場所 1 ヶ所で済ませたいというようなことなのでしょうか? であれば、 TextBoxFor が html にレンダリングされた時にどういう形になるかを調べて、それに CSS を適用するという方向で考えてはいかがですか?

    > maxlength等の属性は入力欄によって(名前、住所、電話番号など)変わるので個々に設定すればよいですが、

    文字数の制限は maxlength を使うのではなく、データアノテーション検証を利用することをお勧めします。

    [C#] #21. データ アノテーション検証コントロールでの検証
    https://social.msdn.microsoft.com/Forums/ja-JP/user/threads?user=fskkoba

    • 回答の候補に設定 星 睦美 2016年1月8日 6:09
    2016年1月8日 3:15
  • ご回答ありがとうございます。
    環境は以下のとおりです。
    OS:Windows 10 Home(IIS Express)
    Visual Studio:VS Community 2015
    MVC: ASP.NET MVC 5

    > 「共通化」というのは具体的にどういうことでしょうか?
    >
    > 複数の TextBoxFor に同じ new{ @class="tb01, width="50%" } を書くのではなく、
    > どこか別の場所 1 ヶ所で済ませたいというようなことなのでしょうか?
    >
    おっしゃるとおりです。
    class名やwidthが共通するケースが多いので、1箇所だけ書き換えれば変更できるようにしたいのです。

    > であれば、 TextBoxFor が html にレンダリングされた時にどういう形になるかを調べて、
    > それに CSS を適用するという方向で考えてはいかがですか?
    >
    TextBoxForに対して何かするのではなく、あくまでCSS側で定義すれば良い…という解釈で良いでしょうか?

    現行のスタイルに手を加える必要がありますが、確かにそれなら記述は1箇所で済みそうです。
    ちょっとやってみたいと思います。

    どうもありがとうございました。

    • 回答としてマーク fskkoba 2016年1月12日 4:58
    • 回答としてマークされていない fskkoba 2016年1月12日 4:58
    2016年1月8日 5:59
  • > TextBoxForに対して何かするのではなく、あくまでCSS側で定義すれば良い…という解釈で良いでしょうか?

    TextBoxFor に new{ @class="tb01, width="50%" } を書きたくないのですよね?

    書かないのであれば、残された手段は当該 TextBoxFor から生成される input 要素を何らかの手段で特定して、それに CSS なり jQuery なりを使って望むスタイルを適用するほかないと思うのですが?

    • 回答としてマーク fskkoba 2016年1月12日 4:58
    2016年1月8日 7:52