MVC Bootstrap TextBoxFor EditorFor

2
votes

I have an MVC view that is using Bootstrap styles. I want to use "@Html.EditorFor" rather than "@HtmlTextBoxFor". Why doesn't EditorFor work out that it needs to be a textbox and then end up with the same result and TextBoxFor??

My reason for asking is that my next field will be a date and want to use EditorFor and with the DataType data annotation it will display a date picker.

Below is screenshot and view code and the Forename is EditorFor whilst the Surname is (the preferred format) TextBoxFor.

enter image description here

    <div class="form-group">
        @Html.LabelFor(m => m.Title, new { @class = "control-label" })
        @Html.DropDownListFor(m => m.Title, new SelectList((IEnumerable)@ViewData["Titles"]), new { @class = "form-control" })
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Forenames, new { @class = "control-label" })
        @Html.ValidationMessageFor(m => m.Forenames)
        @Html.EditorFor(m => m.Forenames, new { @class = "form-control" })
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Surname, new { @class = "control-label" })
        @Html.ValidationMessageFor(m => m.Surname)
        @Html.TextBoxFor(m => m.Surname, new { @class = "form-control" })
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.DateOfBirth, new { @class = "control-label" })
        @Html.ValidationMessageFor(m => m.DateOfBirth)
        @Html.EditorFor(m => m.DateOfBirth, new { @class = "form-control" })
    </div>
4
asp.net-mvctwitter-bootstrapasp.net-mvc-5
You need to show the view code. I assume your trying to set html attributes with EditorFor (which you cant do unless your using MVC5.2 or a custom EditorTemplate). You can always use the browsers datepicker implementation using @Html.TextBoxFor(...., new { type = "date" }) – user3559349
I think your EditorFor field doesn't get the class="form-control"? – Dawood Awan
@StephenMuecke edited to include view code...not sure why I didn't before – David Ward
As I noted above you need at least MVC5.1 (5.2 was a typo) to add html attributes using EditorFor so just use @TextBoxFor() (or you can create an EditorTemplate or custom html helper as explained in this answer) – user3559349

4 Answers

4
votes

I am posting this answer as it worked perfectly for me - all thanks to @StephenMuecke. Although tagged as MVC4 (I will remove the tag) I was actually using MVC5 and therefore could pass html attributes:

<div class="form-group">
    @Html.LabelFor(m => m.Forenames, new { @class = "control-label" })
    @Html.ValidationMessageFor(m => m.Forenames)
    @Html.EditorFor(m => m.Forenames, new { @class = "form-control" })
</div>

becomes:

<div class="form-group">
    @Html.LabelFor(m => m.Forenames, new { @class = "control-label" })
    @Html.ValidationMessageFor(m => m.Forenames)
    @Html.EditorFor(m => m.Forenames, new { htmlAttributes = new { @class = "form-control" } })
</div>
2
votes

TextBoxFor accepts an attributes parameter because it always creates <input> tags, and thus, it can add attributes to them.

However, EditorFor can render anything from a single <input> tag, to a fully fledged editor (created by declaring a custom editor, or by passing a complex type to the editor). So, it makes no sense to accept an attributes parameter for this case. If you look at the overloads list for this method in MSDN you'll see that, if you pass an object, that object is treated as "additional ViewData", but never as "attributes". If you look at TextBoxFor docs, you'll see that there are several overloads that accept an attributes parameter.

However, the latest versions of MVC (5.1+) do accept attributes in EditorFor helper. Please, see this SO Q&A: Does Html.EditorFor support more than class in MVC5.1?.

0
votes
Html.EditorFor(Function(m) m.Forenames, New With { 
     Key .htmlAttributes = New With { Key .[class] = "form-control" } 
})

FYI - according to the Telerik code converter, this is what the VB.NET razor version of the answer looks like (yuck). But, maybe useful for someone else out there.

(tested and works)

0
votes

I use the following workaround to solve the problem for the moment (until I upgrade to mvc5).

Add this to the end of your _layout.cshtml file:

<script type="text/javascript">
    var inputs = $('input, textarea, select')
            .not(':input[type=button], :input[type=submit], :input[type=reset]');
    inputs.addClass('form-control');
</script>