Overwriting the class on a `Html.EditorFor`

Question

by the default with

<%: Html.EditorFor(m => m.ConfirmationHeadline) %>

the output is:

 <input type="text" value="" 
        name="ConfirmationHeadline" id="ConfirmationHeadline" 
        class="text-box single-line">

As you can see, the input appends already a class attribute. Well, this should not be a problem, just use

<%: Html.EditorFor(m => m.ConfirmationHeadline, new { @class="span-11 last"}) %>

and should work... err... nope!

this will output the exact same code!

though, works fine with Html.TextAreaFor()

How can I remove the class text-box single-line from ever appear so my own classes could be appended? any T4 template I should edited?

Thank you for all the help.

Answer 1

There is no way to customize the value of the emitted class attribute when using built-in editor templates via the EditorFor method. It hard-codes the class value (more info available here: http://bradwilson.typepad.com/blog/2009/10/aspnet-mvc-2-templates-part-3-default-templates.html)

You have two options:

1. Write your own custom template that supports the extra functionality. Have a look here for more details: http://bradwilson.typepad.com/blog/2009/10/aspnet-mvc-2-templates-part-4-custom-object-templates.html

2. Process the output of the EditorFor method:

 <%: new HtmlString(Html.EditorFor(m=>m.ConfirmationHeadline).ToString()
        .Replace("class=\"text-box single-line\"", 
                 "class=\"text-box single-line span-11 last\"")) %>

Answer 2

In MCV 5.1 you can take advantage of htmlAttributes. Works like a charm...

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

Answer 3

asp.net mvc creates a file called site.css in the content folder. There you can see that the text-box class is set to a width of 30em by default. Reset it to something saner like 15em. The single-line class doesn't appear to be defined anywhere.

Answer 4

You can use TextBoxFor instead

Answer 5

I had this same problem and didn't like any of the solutions above. I also found a similar post here, but I didn't like those solutions either. After some tooling around, I found something I liked, which let me continue to use the Editor Templates (which is something you should try to take advantage of whenever you can). I posted the solution here

Answer 6

try this code

@Html.Raw(
    Html.EditorFor(m => m.DataInicial).ToString()
    .Replace(
        "\"text-box single-line\"",
        "\"form-control text-box single-line\""))