ASP.NET MVC - HTML Helper

HTML helpers are used to modify HTML output.

HTML Helper

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

Similar to web form controls in ASP.NET, HTML helpers are used to modify HTML. However, HTML helpers are lighter. Unlike web form controls, HTML helpers do not have an event model and view state.

In most cases, HTML helpers are simply methods that return strings.

Through MVC, you can create your own helpers or 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 Link

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

Through MVC, Html.ActionLink() does not link to the view. It creates a connection to the 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 above Html.ActionLink() helper outputs the following HTML:

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

Several parameters of the Html.ActionLink() helper:

Parameter Description
linkText The internal text of the anchor element.
actionName The name of the action.
controllerName The name of the controller.
protocol The protocol of the URL, such as "http" or "https".
hostname The hostname of the URL.
fragment URL fragment name (anchor name).
routeValues An object that contains route parameters.
htmlAttributes An object that contains the HTML attributes to be set for the element.

Note:You can pass values to controller actions. For example, you can pass the id of a database record to a database editing operation.

Razor Syntax C#:

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

Razor Syntax VB:

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

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

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

HTML Form Elements

The following HTML helpers can be used to display (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>
<%}%>