MVC Topics
  1. Home
  2. ASP.NET MVC
  3. HtmlHelpers

ASP.NET MVC Tutorials

HTML Helpers:

In this section, you will learn what are Html helpers and how to use them in the razor view.

HtmlHelper class generates html elements using the model class object in razor view. It binds the model object to html elements to display value of model properties into html elements and also assigns the value of the html elements to the model properties while submitting web form. So always use HtmlHelper class in razor view instead of writing html tags manually.

The following figure shows the use of HtmlHelper class in the razor view.

html helpers
HTML Helpers

As you can see in the above figure, @Html is an object of HtmlHelper class . (@ symbol is used to access server side object in razor syntax). Html is a property of type HtmlHelper included in base class of razor view WebViewPage. ActionLink() and DisplayNameFor() is extension methods included in HtmlHelper class.

HtmlHelper class generates html elements. For example, @Html.ActionLink("Create New", "Create") would generate anchor tag <a href="/Student/Create">Create New</a>.

There are many extension methods for HtmlHelper class, which creates different html controls.

The following table lists HtmlHelper methods and html control each method generates.

HtmlHelper Strogly Typed HtmlHelpers Html Control
Html.ActionLink Anchor link
Html.TextBox Html.TextBoxFor Textbox
Html.TextArea Html.TextAreaFor TextArea
Html.CheckBox Html.CheckBoxFor Checkbox
Html.RadioButton Html.RadioButtonFor Radio button
Html.DropDownList Html.DropDownListFor Dropdown, combobox
Html.ListBox Html.ListBoxFor multi-select list box
Html.Hidden Html.HiddenFor Hidden field
Password Html.PasswordFor Password textbox
Html.Display Html.DisplayFor Html text
Html.Label Html.LabelFor Label
Html.Editor Html.EditorFor Generates Html controls based on data type of specified model property e.g. textbox for string property, numeric field for int, double or other numeric type.

The difference between calling the HtmlHelper methods and using an html tags is that the HtmlHelper method is designed to make it easy to bind to view data or model data.

Points to Remember :

  1. HtmlHelper extension method generates html elements based on model properties.
  2. It is advisable to use "For" extension methods for compile time type checking e.g. TextBoxFor, EditorFor, CheckBoxFor etc.

Learn about various HtmlHelper methods in the next few sections.

;