VisualStudio2017 / ASP.NET MVC 5 / Framework4.6.2 / C#
EditorForでclass属性を指定するには、htmlAttributes を使って下記のように書きます
@Html.EditorFor(mdl => mdl.ID, new { htmlAttributes = new { @class = "form-control" } })少しの事なんだけどメンドクサイ…
EditorForを拡張したEditForExを作成し、htmlAttributesを指定せずにclass属性を設定できるようにしたいと思います。 こんな感じで設定できるようにします。
@Html.EditorForEx(mdl => mdl.ID, new { @class = "form-control" } )
カスタムヘルパーの作成
カスタムヘルパーEitorForExを作成します。 htmlAttributes属性はヘルパーの中でつけてあげます。 EitorForExヘルパーを使用したとき何か固定で付けたい属性があれば、指定しておきます。 Bootstrapを使用しているのであれば「form-control」を付けておいてもいいかもしれません。 また、通常のEditorForヘルパーはclass属性に「text-box single-line」を吐き出すので、これを出力しないようにします。using System; using System.Linq.Expressions; using System.Web; using System.Web.Mvc; using System.Web.Mvc.Html; using System.Web.Routing; using MyApp.Addon.Attributes; namespace MyApp.Addon.Extentions { ///よく使用するヘルパーであれば、Views/Web.configのnamespace要素に追加すると、各ビューにインポートを書かなくて済みます。/// HTMLヘルパーに対する拡張クラス /// public static class HtmlHelperEx { ////// EditorForヘルパーを拡張したヘルパー /// 機能 /// htmlAttributesの指定なしにclass属性を指定する /// class属性にハードコーディングされる「text-box single-line」を削除する /// ////// /// /// /// public static IHtmlString EditorForEx<TModel, TValue>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>> expression, object viewData) { //属性をディクショナリに変換 var dicAttr = new RouteValueDictionary(viewData); //何か固定で足したい属性があればここで足す //属性を追加 dicAttr.Add("maxlength", 10); /* * EditorForヘルパーでHTML属性を指定するには * @Html.EditorFor(mdl => mdl.ID, new { htmlAttributes = new { @class = "form-control", @readonly="readonly" } } ) * と指定しなければならない。 * * これをEditorForExヘルパーでは * @Html.EditorFor(mdl => mdl.ID, new { @class = "form-control", @readonly="readonly" } ) * と指定できるようにする。 */ dynamic htmlAttr = new { htmlAttributes = dicAttr }; MvcHtmlString hstr = htmlHelper.EditorFor(expression, (object)htmlAttr); /* * 吐き出されるHtmlより class=属性の「text-box single-line」を外す */ hstr = MvcHtmlString.Create(hstr.ToString().Replace(" text-box single-line", "")); return hstr; } } }
web.configに追加した場合、私の環境ではVisualStudioを再起動しないと、ビューで使用する際にコンパイルエラーになりました。
web.configに追加しない場合は、各ビューの先頭でインポートしてください。・・・省略
@using MyApp.Addon.Extentions;
通常のEditorFor と 今回作成したEditorForExの出力をみてみます。
EditorFor
@Html.EditorFor(mdl => mdl.ID, new { htmlAttributes = new { @class = "form-control" } }) 出力結果:EditorForEx
@Html.EditorForEx(mdl => mdl.ID, new { @class = "form-control" }) 出力結果
1 件のコメント:
あなたの投稿が大好き 私の投稿をご覧ください
コメントを投稿