MVC5 and Bootstrap3: Html.EditorFor wrong class? How to change?

Question

I just noticed that MVC 5 is using a different class for input fields when using EditorFor. I think its from a lower version of bootstrap, so the current class doesn't really add up.

I'm talking about this:

<div class="form-group">
    @Html.LabelFor(model => model.Contact.CellphoneNo, new { @class = "control-label col-md-4"})
       <div class="col-md-8">
           @Html.EditorFor(model => model.Contact.CellphoneNo)
           @Html.ValidationMessageFor(model => model.Contact.CellphoneNo)
       </div>
</div>

Which results to this:

<div class="form-group">
    <label class="control-label col-md-4" for="Contact_CellphoneNo">CellphoneNo</label>
    <div class="col-md-8">
        <input class="text-box single-line" id="Contact_CellphoneNo" name="Contact.CellphoneNo" type="text" value="">
        <span class="field-validation-valid" data-valmsg-for="Contact.CellphoneNo" data-valmsg-replace="true"></span>
    </div>
</div>

When you look at the tag, it has a "text-box" class instead of Bootstrap3's "form-control"

I think I read around somewhere that this was due to the fact of MVC5 switching to Bootstrap 3 at the last minute or something.

Question is: How do I change that class manually? I want to be able to change text-box to form-control. I can't really find the code though.

I've also tried this already

@Html.EditorFor(model => model.CivilStatus, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.CivilStatus)

Which doesn't seem to work. I'm stumped. Any ideas?

Thanks in advance!

LostInComputer · Accepted Answer · 2014-03-23T10:16:07.727

57

EditorFor doesn't accept HTML attributes as a parameter. The parameter you are using is actually additionalViewData

Use TextBoxFor instead

@Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })

Edit

As of MVC 5.1, HTML attributes can be passed to the EditorTemplate using this syntax

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

edited Mar 23 '14 at 10:16

answered Feb 01 '14 at 13:24

LostInComputer

15,188
4
41
49

Hi @LostInComputer! Thank you for your input. Would TextBoxFor have the same functionality as EditFor? – Dominic Feb 03 '14 at 01:40
See this http://stackoverflow.com/questions/4826173/differences-between-html-textboxfor-and-html-editorfor-in-mvc-and-razor. Everyone's answer is correct. – LostInComputer Feb 03 '14 at 01:58

score 0 · Answer 2 · edited Jan 07 '16 at 21:37

If you are using the MVC 5 or prior version use @Html.TextBoxFor instead of @Html.EditorFor as given in the following code:

@Html.TextBoxFor(model => model.CivilStatus,new { @class = "form-control" }

and if you also have to bind it knockout.js modelview attribute then:

@Html.TextBoxFor(model => model.CivilStatus, new { data_bind="value: author.civilStatus", @class = "form-control" })

I have used this with MVC4, it's working for me:

@Html.TextBoxFor(model => model.FirstName, new { data_bind="value: author.firstName", @class = "form-control" })

MVC5 and Bootstrap3: Html.EditorFor wrong class? How to change?

2 Answers2

Linked