Html attributes for EditorFor in ASP NET MVC

Question

Why can t I pass in html attributes to EditorFor    eg     lt    Html EditorFor model   gt  model Control PeriodType       new   disabled    disabled   readonly    readonly       gt    I don t want to use metadata  Update  The solution was to call this from the view      lt   Html EditorFor  model   gt  model Control PeriodEndDate  new  Modifiable model Control PeriodEndDateModifiable    gt    and use ViewData  Modifiable   in my custom EditorTemplates String ascx where I have some view logic that determines whether to add readonly and or disabled attributes to the input The anonymous object passed into EditorFor   is a parameter called additionalViewData and its properties are passed to the editor template in the ViewData collection

User · Answer

In my case I was trying to create an HTML5 number input editor template that could receive additional attributes. A neater approach would be to write your own HTML Helper, but since I already had my .ascx template, I went with this approach:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<input id="<%= Regex.Replace(ViewData.TemplateInfo.GetFullHtmlFieldId(""), @"[\[\]]", "_") %>" name="<%= ViewData.TemplateInfo.HtmlFieldPrefix %>" type="number" value="<%= ViewData.TemplateInfo.FormattedModelValue %>"
<% if (ViewData["attributes"] != null)
   {
       Dictionary<string, string> attributes = (Dictionary<string, string>)ViewData["attributes"];
       foreach (string attributeName in attributes.Keys){%>
        <%= String.Format(" {0}=\"{1}\"", attributeName, attributes[attributeName])%>
       <% }
   } %> />

This ugly bit creates a number type input and looks for a ViewData Dictionary with the key "attributes". It will iterate through the dictionary adding its key/value pairs as attributes. The Regex in the ID attribute is unrelated and is there because when used in a collection, GetFullHtmlFieldId() returns an id containing square brackets [] which it would normally escape as underscores.

This template is then called like this:

Html.EditorFor(m => m.Quantity, "NumberField", new { attributes = new Dictionary<string, string>() { { "class", "txtQuantity" } } }

Verbose, but it works. You could probably use reflection in the template to use property names as attribute names instead of using a dictionary.

User · Answer

Just create your own template for the type in Views Shared EditorTemplates MyTypeEditor vbhtml   ModelType MyType   ModelType MyType  Code     Dim name As String   ViewData  ControlId       If String IsNullOrEmpty name  Then         name    MyTypeEditor      End If End Code    Mark-up for MyType Editor  Html TextBox name  Model  New With   style    width 65px background-color yellow      Invoke editor from your view with the model property    Html EditorFor Function m  m MyTypeProperty   MyTypeEditor   New   ControlId    uniqueId      Pardon the VB syntax   That s just how we roll

User · Answer

MVC 5 1 and higher solution  will merge local HtmlAttributes and defined in the EditorTemplates    Shared EditorTemplates String cshtml    Html TextBoxFor model   gt  model  new    class    form-control   placeholder   ViewData ModelMetadata Watermark   ToExpando   MergeHtmlAttributes ViewData  htmlAttributes   ToExpando       Extensions   public static IDictionary lt string  object gt  MergeHtmlAttributes this ExpandoObject source1  dynamic source2        Condition Requires source1   source1   IsNotNull   IsLongerThan 0        IDictionary lt string  object gt  result   source2    null           new Dictionary lt string  object gt               IDictionary lt string  object gt   source2       var dictionary1    IDictionary lt string  object gt   source1       string   commonKeys   result Keys Where dictionary1 ContainsKey  ToArray        foreach  var key in commonKeys                result key    string Format   0   1    dictionary1 key   result key               foreach  var item in dictionary1 Where pair   gt   result ContainsKey pair Key                  result Add item              return result     public static ExpandoObject ToExpando this object anonymousObject        IDictionary lt string  object gt  anonymousDictionary   new RouteValueDictionary anonymousObject       IDictionary lt string  object gt  expando   new ExpandoObject        foreach  var item in anonymousDictionary          expando Add item       return  ExpandoObject expando     public static bool HasProperty this ExpandoObject expando  string key        return   IDictionary lt string  object gt  expando  ContainsKey key       Usage    Html EditorFor m   gt  m PromotionalCode  new   htmlAttributes   new   ng model    roomCtrl searchRoomModel   promoCode

User · Answer

I ve been wrestling with the same issue today for a checkbox that binds to a nullable bool  and since I can t change my model  not my code  I had to come up with a better way of handling this   It s a bit brute force  but it should work for 99  of cases I might encounter   You d obviously have to do some manual population of valid attributes for each input type  but I think I ve gotten all of them for checkbox   In my Boolean cshtml editor template    model bool          var attribs   new Dictionary lt string  object gt         var validAttribs   new string     style    class    checked     class            classname   id    required    value    disabled    readonly             accesskey    lang    tabindex    title    onblur    onfocus             onclick    onchange    ondblclick    onmousedown    onmousemove             onmouseout    onmouseover    onmouseup    onselect        foreach  var item in ViewData                 if  item Key ToLower   IndexOf  data       0    item Key ToLower   IndexOf  aria       0                         attribs Add item Key Replace       -    item Value                      else                        if  validAttribs Contains item Key ToLower                                   attribs Add item Key  item Value                                     Html CheckBox     Model GetValueOrDefault    attribs

User · Answer

You can still use EditorFor  Just pass the style whichever html attribute as ViewData    Html EditorFor model   gt  model YourProperty  new   style    Width 50px       Because EditorFor uses templates to render  you could override the default template for your property and simply pass the style attribute as ViewData   So your EditorTemplate would like the following    inherits System Web Mvc WebViewPage lt object gt    Html TextBoxFor m   gt  m  new    class    text ui-widget-content   style ViewData  style

User · Answer

As of MVC 5 1  you can now do the following    Html EditorFor model   gt  model  new   htmlAttributes   new    class    form-control          http   www asp net mvc overview releases mvc51-release-notes new-features

User · Answer

Set the condition using ViewData in the controller  ViewData  Modifiable     model recProcessed    Then use this viewdata in editor template to set the html attribute of the control   Html RadioButton prefix  li Value  li Selected   ViewData  Modifiable   ToString   ToLower       true     object new     id   li Value   disabled    disabled      new    id   li Value

User · Answer

Here is the VB Net code syntax for html attributes in MVC 5 1 EditorFor   Html EditorFor Function x  x myStringProp  New With   htmlAttributes   New With   class    myCssClass    maxlength  30

User · Answer

Now ASP Net MVC 5 1 got a built in support for it   From Release Notes     We now allow passing in HTML attributes in EditorFor as an anonymous   object    For example    Html EditorFor model   gt  model                 new   htmlAttributes   new    class    form-control

User · Answer

If you don t want to use Metadata you can use a  UIHint  PeriodType    attribute to decorate the property or if its a complex type you don t have to decorate anything   EditorFor will then look for a PeriodType aspx or ascx file in the EditorTemplates folder and use that instead

User · Answer

Update MVC 5 1 now supports the below approach directly  so it works for built in editor too  http   www asp net mvc overview releases mvc51-release-notes new-features  It s either a case of Great mind thinking alike or they read my answer     End Update  If your using your own editor template or with MVC 5 1 which now supports the below approach directly for built in editors    Html EditorFor modelItem   gt  item YourProperty     new   htmlAttributes   new    class  verificationStatusSelect   style    Width 50px          then in your template  not required for simple types in MVC 5 1    Html TextBoxFor m   gt  m  ViewData  htmlAttributes

User · Answer

EditorFor works with metadata  so if you want to add html attributes you could always do it  Another option is to simply write a custom template and use TextBoxFor    lt    Html TextBoxFor model   gt  model Control PeriodType       new   disabled    disabled    readonly    readonly       gt

User · Answer

Why not just use   Html DisplayFor model   gt  model Control PeriodType

User · Answer

Html TextBoxFor model   gt  model Control PeriodType       new    class  text-box single-line      you can use like this   same output with Html EditorFor  and you can add your html attributes

[html] Html attributes for EditorFor() in ASP.NET MVC

Examples related to html

Examples related to asp.net-mvc

Examples related to editorfor