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.

score 12 · Accepted Answer · edited May 02 '13 at 15:57

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:

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
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\"")) %>

after reading all parts of Brad's examples, I ended up using `<%: Html.TextBox("ConfirmationHeadline", null, new { @class = "span-11 last" })%>` Thank you for the links. — balexandre, Nov 02 '10 at 18:59

Adam W · Answer 2 · 2014-05-23T20:55:27.920

6

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" } })

edited May 23 '14 at 20:55

answered May 23 '14 at 16:25

Adam W

263
1
4
12

score 2 · Answer 3 · answered Dec 01 '10 at 06:15

2

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.

answered Dec 01 '10 at 06:15

wozza

255
2
7

1

I always ditch the site.css! – Nikos Dec 15 '12 at 19:45

score 1 · Answer 4 · answered Jan 23 '13 at 15:01

1

You can use TextBoxFor instead

answered Jan 23 '13 at 15:01

Gelásio

1,899
1
19
18

2

just to make sure, do you know the different between `EditorFor` and `TextboxFor`? You can [check it here](http://stackoverflow.com/questions/4826173) for a quick answer. – balexandre Jan 23 '13 at 22:49

score 0 · Answer 5 · edited May 23 '17 at 12:06

0

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

edited May 23 '17 at 12:06

Community

1
1

answered Feb 21 '13 at 22:41

CIA

302
1
5
16

score -2 · Answer 6 · edited Jun 05 '14 at 12:57

-2

try this code

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

edited Jun 05 '14 at 12:57

lpratlong

1,421
9
17

answered Jun 05 '14 at 12:35

user2268720

11
2

4

You'd better add some explanation. – lpratlong Jun 05 '14 at 12:56
REVIEW of low quality post: Follow @Ipratlong advice. This answer in the current form is likely to be deleted for moderation reasons. – ElmoVanKielmo Jun 05 '14 at 13:16

Overwriting the class on a `Html.EditorFor`

6 Answers6