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!

Quart

Answer 1

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

Ephemerid

Hi @LostInComputer! Thank you for your input. Would TextBoxFor have the same functionality as EditFor? – Quart

See this #4826673. Everyone's answer is correct. – Ephemerid

Answer 2

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

Liederkranz