EditorFor and html properties

Question

Asp Net MVC 2 0 preview builds provide helpers like   Html EditorFor c   gt  c propertyname    If the property name is string  the above code renders a texbox   What if I want to pass in MaxLength and Size properties to the text box or my own css class property   Do I need to create one template for each size and length combinations in my application  If so  that doesn t make the default templates that usable

User · Answer

In my practice I found that it is best to use EditorTemplates with only one HtmlHelper in it - TextBox that is in most cases. If I want a template for more complex html structure, I'll write a separate HtmlHelper.

Given that we can stick the whole ViewData object in place of htmlAttributes of the TextBox. In addition we can write some customization code for some of the properties of the ViewData if they need special treatment:

@model DateTime?

@*
    1) applies class datepicker to the input;
    2) applies additionalViewData object to the attributes of the input
    3) applies property "format" to the format of the input date.
*@

@{
    if (ViewData["class"] != null) { ViewData["class"] += " datepicker"; }
    else { ViewData["class"] = " datepicker"; }
    string format = "MM/dd/yyyy";
    if (ViewData["format"] != null)
    {
        format = ViewData["format"].ToString();
        ViewData.Remove("format");
    }
}

@Html.TextBox("", (Model.HasValue ? Model.Value.ToString(format) : string.Empty), ViewData)

Below are the examples of the syntax in the view and the outputted html:

@Html.EditorFor(m => m.Date)

<input class="datepicker" data-val="true" data-val-required="&amp;#39;Date&amp;#39; must not be empty." id="Date" name="Date" type="text" value="01/08/2012">

@Html.EditorFor(m => m.Date, new { @class = "myClass", @format = "M/dd" })

<input class="myClass datepicker" data-val="true" data-val-required="&amp;#39;Date&amp;#39; must not be empty." id="Date" name="Date" type="text" value="1/08">

User · Answer

May want to look at Kiran Chand s Blog post  he uses custom metadata on the view model such as    HtmlProperties Size   5  MaxLength   10   public string Title   get  set      This is combined with custom templates that make use of the metadata  A clean and simple approach in my opinion but I would like to see this common use case built-in to mvc

User · Answer

I solved this by creating an EditorTemplate named String ascx in my  Views Shared EditorTemplates folder    lt    Control Language  C   Inherits  System Web Mvc ViewUserControl lt string gt     gt   lt   int size   10     int maxLength   100     if  ViewData  size      null              size    int ViewData  size            if  ViewData  maxLength      null              maxLength    int ViewData  maxLength           gt   lt    Html TextBox     Model  new   Size size  MaxLength maxLength      gt    In my view  I use   lt    Html EditorFor model   gt  model SomeStringToBeEdited  new   size   15  maxLength   10      gt    Works like a charm for me

User · Answer

The problem is  your template can contain several HTML elements  so MVC won t know to which one to apply your size class  You ll have to define it yourself   Make your template derive from your own class called TextBoxViewModel   public class TextBoxViewModel     public string Value   get  set      IDictionary lt string  object gt  moreAttributes    public TextBoxViewModel string value  IDictionary lt string  object gt  moreAttributes             set class properties here       public string GetAttributesString            return string Join      moreAttributes Select x   gt  x Key          x Value        ToArray        don t forget to encode          In the template you can do this    lt input value   lt    Model Value   gt    lt    Model GetAttributesString     gt    gt    In your view you do    lt    Html EditorFor x   gt  x StringValue    gt  or  lt    Html EditorFor x   gt  new TextBoxViewModel x StringValue  new IDictionary lt string  object gt      class    myclass      size   15      gt    The first form will render default template for string  The second form will render the custom template   Alternative syntax use fluent interface   public class TextBoxViewModel     public string Value   get  set      IDictionary lt string  object gt  moreAttributes    public TextBoxViewModel string value  IDictionary lt string  object gt  moreAttributes             set class properties here     moreAttributes   new Dictionary lt string  object gt            public TextBoxViewModel Attr string name  object value           moreAttributes name    value       return this                 and in the view     lt    Html EditorFor x   gt  new TextBoxViewModel x StringValue  Attr  class    myclass   Attr  size   15    gt    Notice that instead of doing this in the view  you may also do this in controller  or much better in the ViewModel   public ActionResult Action          now you can Html EditorFor x   gt  x StringValue  and it will pick attributes   return View new   StringValue   new TextBoxViewModel x StringValue  Attr  class    myclass   Attr  size   15          Also notice that you can make base TemplateViewModel class - a common ground for all your view templates - which will contain basic support for attributes etc   But in general I think MVC v2 needs a better solution  It s still Beta - go ask for it  -

User · Answer

I don t know why it does not work for Html EditorFor but I tried TextBoxFor and it worked for me    Html TextBoxFor m   gt  m Name  new   Class    className   Size    40         and also validation works

User · Answer

None of the answers in this or any other thread on setting HTML attributes for  Html EditorFor were much help to me   However  I did find a great answer at   Styling an  Html EditorFor helper  I used the same approach and it worked beautifully without writing a lot of extra code    Note that the id attribute of the html output of Html EditorFor is set   The view code   lt style type  text css  gt   dob      width 6em     lt  style gt    using  Html BeginForm         Enter date       Html EditorFor m   gt  m DateOfBirth  null   dob   null      The model property with data annotation and date formatting as  dd MMM yyyy    Required ErrorMessage   Date of birth is required     DisplayFormat ApplyFormatInEditMode   true  DataFormatString     0 dd MMM yyyy     public DateTime DateOfBirth   get  set      Worked like a charm without writing a whole lot of extra code   This answer uses ASP NET MVC 3 Razor C

User · Answer

Because the question is for EditorFor not TextBoxFor WEFX s suggestion doesn t work    For changing individual input boxes  you can process the output of the EditorFor method    lt    new HtmlString Html EditorFor m  gt m propertyname  ToString   Replace  class   text-box single-line      class   text-box single-line my500pxWideClass        gt    It is also possible to change ALL your EditorFors as it turns out MVC sets the class of EditorFor text boxes with  text-box  therefore you can just override this style  in your stylesheet or on the page     text-box       width  80em      Additionally  you could set the style for  input type  text         width  200px       this overrides  text-box and will change all input text boxes  EditorFor or otherwise

User · Answer

I m surprised no one mentioned passing it in  additionalViewData  and reading it on the other side   View  with line breaks  for clarity     lt    Html EditorFor c   gt  c propertyname  new               htmlAttributes   new                        class    myClass                     gt    Editor template    lt    Control Language  C   Inherits  System Web Mvc ViewUserControl lt string gt     gt    lt    Html TextBox     Model  ViewData  htmlAttributes       gt

User · Answer

I think using CSS is the way to go   I wish I could do more with  NET coding  like in XAML  but in the browser CSS is king   Site css    account-note-input      width 1000px     height 100px         cshtml   lt div class  editor-label  gt      Html LabelFor model   gt  model Note    lt  div gt    lt div class  editor-field  gt      Html EditorFor model   gt  model Note  null   account-note-input   null      Html ValidationMessageFor model   gt  model Note    lt  div gt    Joe

User · Answer

In MVC3  you can set width as follows    Html TextBoxFor c   gt  c PropertyName  new   style    width  500px

User · Answer

UPDATE  hm  obviously this won t work because model is passed by value so attributes are not preserved  but I leave this answer as an idea   Another solution  I think  would be to add your own TextBox etc helpers  that will check for your own attributes on model   public class ViewModel      MyAddAttribute  class    myclass      public string StringValue   get  set       public class MyExtensions     public static IDictionary lt string  object gt  GetMyAttributes object model              kind of prototype code         return model GetType   GetCustomAttributes typeof MyAddAttribute   OfType lt MyAddAttribute gt    ToDictionary            x   gt  x Name  x   gt  x Value           lt  -- in the template -- gt   lt    Html TextBox  Name   Model  MyExtensions GetMyAttributes Model     gt    This one is easier but not as convinient flexible

User · Answer

I solved it   For Razor the syntax is   Html TextAreaFor m  gt m Address  new   style  Width 174px     this adjusts the text area width to the width that i defined in the style parameter   For ASPx the syntax is   lt   Html TextAreaFor m   gt  m Description  new   cols    20   rows    15   style  Width 174px      gt   this will do the trick

User · Answer

You can define attributes for your properties    StringLength 100   public string Body   get  set      This is known as System ComponentModel DataAnnotations  If you can t find the ValidationAttribute that you need you can allways define custom attributes   Best Regards  Carlos

User · Answer

One way you could get round it is by having delegates on the view model to handle printing out special rendering like this   I ve done this for a paging class  I expose a public property on the model Func lt int  string gt  RenderUrl to deal with it   So define how the custom bit will be written   Model Paging RenderUrl    page    gt    return string Concat    foo    page        Output the view for the Paging class    Html DisplayFor m   gt  m Paging       and for the actual Paging view    model Paging  if  Model Pages  gt  1         lt ul class  paging  gt       for  int page   1  page  lt   Model Pages  page                   lt li gt  lt a href   Model RenderUrl page   gt  page lt  a gt  lt  li gt             lt  ul gt      It could be seen as over-complicating matters but I use these pagers everywhere and couldn t stand seeing the same boilerplate code to get them rendered

User · Answer

I also had issue with setting the width of TextBox in MVC3  while setting the Clsss attribute worked for TextArea control but not for TextBoxFor control or EditorFor control   I tried following  amp  that worked for me      Html TextBoxFor model    model Title  new   Class    textBox   style    width 90         also in this case Validations are working perfectly

User · Answer

As at MVC 5  if you wish to add any attributes you can simply do    Html EditorFor m   gt  m Name  new   htmlAttributes   new    required    true    anotherAttribute    whatever         Information found from this blog

User · Answer

This is the cleanest and most elegant simple way to get a solution here   Brilliant blog post and no messy overkill in writing custom extension helper methods like a mad professor   http   geekswithblogs net michelotti archive 2010 02 05 mvc-2-editor-template-with-datetime aspx

User · Answer

I wrote a blog entry to answer my own question  Adding html attributes support for Templates - ASP Net MVC 2 0 Beta

User · Answer

I really liked  tjeerdans answer which utilizes the EditorTemplate named String ascx in the  Views Shared EditorTemplates folder  It seems to be the most straight-forward answer to this question  However  I wanted a template using Razor syntax  In addition  it seems that MVC3 uses the String template as a default  see the StackOverflow question  mvc display template for strings is used for integers   so you need to set the model to object rather than string  My template seems to be working so far    model object       int size   10  int maxLength   100      if  ViewData  size      null        Int32 TryParse  string ViewData  size    out size         if  ViewData  maxLength      null        Int32 TryParse  string ViewData  maxLength    out maxLength        Html TextBox     Model  new   Size   size  MaxLength   maxLength

User · Answer

This may not be the slickest solution  but it is straightforward  You can write an extension to the HtmlHelper EditorFor class  In that extension  you can supply an options parameter that will write the options to the ViewData for the helper  Here s some code   First  the extension method   public static MvcHtmlString EditorFor lt TModel  TProperty gt  this HtmlHelper lt TModel gt  helper  Expression lt Func lt TModel  TProperty gt  gt  expression  TemplateOptions options        return helper EditorFor expression  options TemplateName  new               cssClass   options CssClass             Next  the options object   public class TemplateOptions       public string TemplateName   get  set        public string CssClass   get  set           other properties for info you d like to pass to your templates         and by using an options object  you avoid method overload bloat      And finally  here s the line from the String ascx template    lt    Html TextBox     ViewData TemplateInfo FormattedModelValue  new    class   ViewData  cssClass              gt    Frankly  I think this is straightforward and clear to the poor soul who has to maintain your code down the road  And it is easy to extend for various other bits of info you d like to pass to your templates  It s working well so far for me in a project where I m trying to wrap as much as I can in a set of template to help standardize the surrounding html  a la http   bradwilson typepad com blog 2009 10 aspnet-mvc-2-templates-part-5-master-page-templates html

[c#] EditorFor() and html properties

Examples related to c#

Examples related to asp.net-mvc

Examples related to asp.net-mvc-2