Introduction

HTML Helpers in ASP.NET MVC is just a method that is used to render HTML in view(.cshtml).HTML Helper uses view engine in MVC. It posses many methods, using these methods we can create html controls like Text box, Check box, Radio button and so on.

You can also create your own HTML Helpers as per your need to render more complex HTML content such as a menu strip or an HTML table for displaying dynamic data coming from the database.

Different types of HTML Helpers

HTML Helpers in ASP.NET MVC are of three types as below

1. Inline Html Helpers

Inline Html Helpers are created in the same view by using the Razor @helper tag. The scope of this helpers is within the same view.



<div>
  @helper ListingItems(string[] items)
  {
  

<ol>
  @foreach (string item in items)
  {
  

<li>@item</li>


  }
  </ol>


  }

  

<h3>Colours:</h3>



  @ListingItems(new string[] { "Red", "Green", "Blue" })

  

<h3>Countries:</h3>



  @ListingItems(new string[] { "US", "UK", "Koria" })

  

<h3>Sports:</h3>



  @ListingItems(new string[] { "Cricker", "Tennis", "Golf" })
  </div>


2. Built-In Html Helpers

This type of Html Helpers are extension methods on the HtmlHelper class. Further these are divided into below categories.

i – Standard Html Helpers

Standard Html Helpers are used to render frequently used HTML tags like text boxes,text area,radiobuttons, checkboxes etc. A list of most common standard html helpers is listed below:

  • HTML Element : TextBox
    Example : @Html.TextBox(“txtName”, “val”)
    OutPut : <input id=”txtName” name=”txtName” type=”text” value=”val” />
  • HTML Element : TextArea
    Example : @Html.TextArea(“txtAddress”, “val”, 5, 15, null)
    OutPut : <textarea cols=”15″ id=”txtAddress” name=”txtAddress” rows=”5″>val</textarea>

In the same way you can use other control like below

  • @Html.Password(“txtPassword”, “val”)
  • @Html.Hidden(“hfStudentId”, “val”)
  • @Html.CheckBox(“chkTerms”, false)
  • @Html.RadioButton(“rbGender”, “val”, true)
  • @Html.DropDownList (“ddlGender”, new SelectList(new [] {“Male”, “Female”}))
  • @Html.ListBox(“lbSports”, new MultiSelectList(new [] {“Cricket”, “Chess”}))

ii – Strongly Typed HTML Helpers

These helpers can be use to render the frequntly used HTML elements in strongly typed view like as HTML text boxes, checkboxes etc. The HTML elements are created based on model properties.
The strongly typed HTML helpers work with a lambda expression.The view model object is passed as a value to a lambda expression, and any field or property from view model object to be used to set the id, name and value attributes of the HTML helper.

  • HTML Element : TextBox
    Example : @Html.TextBoxFor(m=>m.Name)
    OutPut : <input id=”Name” name=”Name” type=”text” value=”Name-val” />
  • HTML Element : TextArea
    Example : @Html.TextArea(m=>m.Address , 5, 15, new{}))
    OutPut : <textarea cols=”15″ id=”Address ” name=”Address ” rows=”5″>val</textarea>

In the same way you can use other control like below

  • @Html.PasswordFor(m=>m.Password)
  • @Html.HiddenFor(m=>m.ClientId)
  • @Html.CheckBoxFor(m=>m.IsActive)
  • @Html.RadioButtonFor(m=>m.IsApproved, “val”)
  • @Html.DropDownListFor(m => m.Gender, new SelectList(new [] {“Male”, “Female”}))
  • Html.ListBoxFor(m => m.Hobbies, new MultiSelectList(new [] {“Cricket”, “Music”}))

3. Custom Html Helpers

As per your need you may also create your own custom helper methods by creating an extension method on the HtmlHelper class or by creating static methods with in a utility class.

One thought on “HTML Helpers in ASP.NET MVC with Example

  1. jon says:

    very nice post, i like it

Leave a Reply

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

Name *
Email *
Website