Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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!

like image 330
Dominic Avatar asked Jan 31 '14 14:01

Dominic


People also ask

What does HTML EditorFor do?

The Html. Editor() or Html. EditorFor() extension methods generate HTML elements based on the data type of the model object's property.

How do I add an EditorFor style?

EditorFor does not allow for styling as there are no parameters for additional attributes. The reason for this is because the EditorFor doesn't always generate a single element as it can be overridden. To style a specific type of element you need to use the specific editor you want to use.


1 Answers

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" } })
like image 84
LostInComputer Avatar answered Oct 14 '22 17:10

LostInComputer