unable to apply Bootstrap classes to my EditorFor

john Gu picture john Gu · Jan 16, 2015 · Viewed 8.5k times · Source

I am working on an asp.net mvc-5 web application , and i wrote the following :-

@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
&
@Html.EditorFor(model => model.Name, new { @class = "form-control"  })

but this will not have any effect on the generated html, but if i changed the EditorFor to be TextboxFor i will get the effect for the form-control class ? can anyone advice on this please ? i read that this is supported only inside asp.net mvc 5.1 ? so what are the available approaches i can follow to get this working other than upgrading my asp.net mvc-5 to asp.net mvc 5.1 , to eliminate the risk of upgrading? Can anyone adivce ?

Answer

user3559349 picture user3559349 · Jan 17, 2015

Yes, to pass html attributes to a standard EditorFor() you need MVC-5.1+. If you want to replicate this with MVC-5, you can create a custom editor template and pass the attributes using the overload that accepts additionViewData. For example, create a new EditorTemplate named "String.cshtml" to apply the template for all properties that are typeof string

/Views/Shared/EditorTemplates/String.cshtml

@Html.TextBoxFor(m => m, ViewData["attributes"])

and in the view

@Html.EditorFor(m => m.Name, new { attributes = new { @class = "form-control" } })

or create a specificEditorTemplate

/Views/Shared/EditorTemplates/MyCustomTemplate.cshtml

@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, ViewData["htmlAttributes"])

and in the view

@Html.EditorFor(m => m.Name, "MyCustomTemplate", new { attributes = new { @class = "form-control" } })

The second example shows how to respect the DisplayFormat attribute as mentioned in your comments above, for example

[DisplayFormat(DataFormatString="{0:C}", ApplyFormatInEditMode = true)]
public decimal Amount { get; set; }

will format the value as a currency string.

This answer also gives some other options including creating a custom html helper for rendering bootstrap controls