CODEWITHSUNDEEP
asp.net-mvctwitter-bootstrapasp.net-mvc-5
David Ward
David Ward

Reputation: 3829

MVC Bootstrap TextBoxFor EditorFor

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>

Upvotes: 2

Views: 18999

Answers (4)

jkokorian
jkokorian

Reputation: 3095

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>

Upvotes: 0

bkwdesign
bkwdesign

Reputation: 2097

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)

Upvotes: 0

David Ward
David Ward

Reputation: 3829

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>

Upvotes: 5

JotaBe
JotaBe

Reputation: 39025

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?.

Upvotes: 2

Related Questions