ASP.NET MVC - HTML Helpers

HTML helpers are used to modify HTML output.

HTML Helpers

With MVC, HTML helpers are similar to traditional ASP.NET Web Form controls.

Just like Web Form controls in ASP.NET, HTML helpers are used to modify HTML. However, HTML helpers are more lightweight. Unlike Web Form controls, HTML helpers do not have an event model and view state.

In most cases, an HTML helper is simply a method that returns a string.

With MVC, you can create your own helpers, or directly use built-in HTML helpers.

Standard HTML Helpers

MVC includes standard helpers for most commonly used HTML element types, such as HTML links and HTML form elements.

HTML Links

The simplest way to render an HTML link is to use the Html.ActionLink() helper.

With MVC, Html.ActionLink() does not link to a view. It creates a link to a controller action.

Razor syntax:

@Html.ActionLink("About this Website", "About")

ASP syntax:

<%=Html.ActionLink("About this Website", "About")%>

The first parameter is the link text, and the second parameter is the name of the controller action.

The Html.ActionLink() helper above outputs the following HTML:

<a href="../Home/About.html">About this Website</a>

Some attributes of the Html.ActionLink() helper:

Attribute Description
.linkText URL text (label), the inner text of the anchor element.
.actionName The name of the action.
.routeValues The value passed to the action, an object containing route parameters.
.controllerName The name of the controller.
.htmlAttributes URL attribute settings, an object containing HTML attributes to be set for the element.
.protocol URL protocol, such as "http" or "https".
.hostname The host name of the URL.
.fragment URL fragment name (anchor name).

Note:You can pass values to a controller action. For example, you can pass the id of a database record to the database Edit action:

Razor syntax C#:

@Html.ActionLink("Edit Record", "Edit", new {Id=3})

Razor syntax VB:

@Html.ActionLink("Edit Record", "Edit", New With{.Id=3})

The Html.ActionLink() helper above outputs the following HTML:

<a href="../Home/Edit/3.html">Edit Record</a>

HTML Form Elements

The following HTML helpers can be used to render (modify and output) HTML form elements:

  • BeginForm()
  • EndForm()
  • TextArea()
  • TextBox()
  • CheckBox()
  • RadioButton()
  • ListBox()
  • DropDownList()
  • Hidden()
  • Password()

ASP.NET syntax C#:

<%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>
<% using (Html.BeginForm()){%>
<p>
<label for="FirstName">First Name:</label>
<%= Html.TextBox("FirstName") %>
<%= Html.ValidationMessage("FirstName", "*") %>
</p>
<p>
<label for="LastName">Last Name:</label>
<%= Html.TextBox("LastName") %>
<%= Html.ValidationMessage("LastName", "*") %>
</p>
<p>
<label for="Password">Password:</label>
<%= Html.Password("Password") %>
<%= Html.ValidationMessage("Password", "*") %>
</p>
<p>
<label for="Password">Confirm Password:</label>
<%= Html.Password("ConfirmPassword") %>
<%= Html.ValidationMessage("ConfirmPassword", "*") %>
</p>
<p>
<label for="Profile">Profile:</label>
<%= Html.TextArea("Profile", new {cols=60, rows=10})%>
</p>
<p>
<%= Html.CheckBox("ReceiveNewsletter") %>
<label for="ReceiveNewsletter" style="display:inline">Receive Newsletter?</label>
</p>
<p>
<input type="submit" value="Register" />
</p>
<%}%>


Other extensions