Markup Rendered by ASP.NET MVC HTML Helpers

ASP.NET MVC providers a number of HtmlHelper methods for rendering markup based on the view model.
The general strategy used by the helpers is:
  • A helper that directly correlates to the input type renders without any additional decoration of the markup.
  • The Editor(For) and Display(For) helpers may render addition CSS classes or specialized markup.
  • When a complex type is passed to the Editor(For) and Display(For) helpers, then container markup surround each simple type within the complex type.

The following table describes the markup rendered for variation combinations of helper and model datatype.

Html Helper Markup
Html.LabelFor
<label … >…</label>
Html.HiddenFor
<input type="hidden" … />
Html.PasswordFor
<input type="password" … />
Html.EditorFor
(DataType.Password)
<input class="text-box single-line password" type="password" … />
Html.CheckBoxFor
<input type="check" … />
Html.RadioButtonFor
<input type="radio" … />
Html.TextBoxFor
<input type="text" … />
Html.EditorFor

(default)

<input class="text-box single-line" type="text" … />
Html.TextAreaFor
<textarea … />
Html.EditorFor

(DataType.MultiLineText)

<textarea class="text-box multi-line" … />
Html.DropDownListFor
<select …>…</select>
Html.ListBoxFor
<select multiple="multiple">…</select>
Html.EditorFor

(bool)

<input type="checkbox" class="check-box" … />
Html.EditorFor

(bool?)

<select class="list-box tri-state" …>
  <option value="" … />
  <option value="true" … />
  <option value="false" … />
</select>
Html.ValidationMessageFor
<span class="field-validation-valid">…</span>
or
<span class="field-validation-error">…</span>
The classes “input-validation-valid” or “input-validation-error” are included in form input elements with associated validations.
Html.ValidationSummaryFor
<div class="validation-summary-error">
  <span>message</span>
  <ul>…</ul>
</div>
Html.EditorFor

(complex type)

<div class="editor-label">
  <%: Html.LabelFor(…) %>
</div>
<div class="editor-field">
  <%: Html.EditorFor(…) %>
  <%: Html.ValidatorFor(…) %>
</div>
Html.EditorforModel Same as EditorFor using the implicit view model.
Html.DisplayFor

(default)

Value
Html.DisplayFor

(bool)

<input type="checkbox" class="check-box" disabled="disabled" … />
Html.DisplayFor

(bool?)

Same as EditorFor when rendering a bool? type, with addition of disabled=”disabled” attribute.
Html.DisplayFor

(complex type)

<div class="display-label">
  <%: Html.LabelFor(…) %>
</div>
<div class="display-field">
  <%: Html.DisplayFor(…) %>
</div>

 Customizing the Markup

A common need is to customize the markup rendered by Display(For) or Editor(For) for complex types. For example, the following may be preferred since it provides greater styling flexibility:

<p>
    <span class="editor-label">…</span>
    <span class="editor-field">…</span>
</p>

This can be implemented by creating a custom Object.ascx as described by Brad Wilson.
The other parts of Brad’s series describe more options for customize the rendered markup using templates.

Rendering Dropdown Lists

Another common need is to have Editor and Display helpers automatically render a drop-down list. The best implementation I’ve seen for this is by Kazi Manzur.

1 thought on “Markup Rendered by ASP.NET MVC HTML Helpers”

  1. Pretty nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon!

Leave a Reply

Your email address will not be published. Required fields are marked *