Please enable Javascript to correctly display the contents on Dot Net Tricks!

Understanding HTML Helpers in ASP.NET MVC

  Author : Shailendra Chauhan
Updated On : 05 Mar 2014
Total Views : 184,241   
Support : MVC5, MVC4 & MVC3
 

An HTML Helper is just a method that returns a HTML string. The string can represent any type of content that you want. For example, you can use HTML Helpers to render standard HTML tags like HTML <input>, <button> and <img> tags etc.

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

Different types of HTML Helpers

There are three types of HTML helpers as given below:

  1. Inline Html Helpers

    These are create in the same view by using the Razor @helper tag. These helpers can be reused only on the same view.

    @helper ListingItems(string[] items)
     {
     <ol>
     @foreach (string item in items)
     {
     <li>@item</li>
     }
     </ol>
     }
    
     <h3>Programming Languages:</h3>
    
     @ListingItems(new string[] { "C", "C++", "C#" })
    
     <h3>Book List:</h3>
    
     @ListingItems(new string[] { "How to C", "how to C++", "how to C#" })
    
  2. Built-In Html Helpers

    Built-In Html Helpers are extension methods on the HtmlHelper class. The Built-In Html helpers can be divided into three categories-

    1. Standard Html Helpers

      These helpers are used to render the most common types of HTML elements like as HTML text boxes, checkboxes etc. A list of most common standard html helpers is given below:

      HTML Element
      Example
      TextBox
      @Html.TextBox("Textbox1", "val")
      Output: <input id="Textbox1" name="Textbox1" type="text" value="val" />
      TextArea
      @Html.TextArea("Textarea1", "val", 5, 15, null)
      Output: <textarea cols="15" id="Textarea1" name="Textarea1" rows="5">val</textarea>
      Password
      @Html.Password("Password1", "val")
      Output: <input id="Password1" name="Password1" type="password" value="val" />
      Hidden Field
      @Html.Hidden("Hidden1", "val")
      Output: <input id="Hidden1" name="Hidden1" type="hidden" value="val" />
      CheckBox
      @Html.CheckBox("Checkbox1", false)
      Output: <input id="Checkbox1" name="Checkbox1" type="checkbox" value="true" /> <input name="myCheckbox" type="hidden" value="false" />
      RadioButton
      @Html.RadioButton("Radiobutton1", "val", true)
      Output: <input checked="checked" id="Radiobutton1" name="Radiobutton1" type="radio" value="val" />
      Drop-down list
      @Html.DropDownList (“DropDownList1”, new SelectList(new [] {"Male", "Female"}))
      Output: <select id="DropDownList1" name="DropDownList1"> <option>M</option> <option>F</option> </select>
      Multiple-select
      Html.ListBox(“ListBox1”, new MultiSelectList(new [] {"Cricket", "Chess"}))
      Output: <select id="ListBox1" multiple="multiple" name="ListBox1"> <option>Cricket</option> <option>Chess</option> </select>
    2. Strongly Typed HTML Helpers

      These helpers are used to render the most common types of 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 on lambda expression. The model object is passed as a value to lambda expression, and you can select the field or property from model object to be used to set the id, name and value attributes of the HTML helper. A list of most common strongly-typed html helpers is given below:

      HTML Element
      Example
      TextBox
      @Html.TextBoxFor(m=>m.Name)
      Output: <input id="Name" name="Name" type="text" value="Name-val" />
      TextArea
      @Html.TextArea(m=>m.Address , 5, 15, new{}))
      Output: <textarea cols="15" id="Address" name=" Address " rows="5">Addressvalue</textarea>
      Password
      @Html.PasswordFor(m=>m.Password)
      Output: <input id="Password" name="Password" type="password"/>
      Hidden Field
      @Html.HiddenFor(m=>m.UserId)
      Output: <input id=" UserId" name=" UserId" type="hidden" value="UserId-val" />
      CheckBox
      @Html.CheckBoxFor(m=>m.IsApproved)
      Output: <input id="Checkbox1" name="Checkbox1" type="checkbox" value="true" /> <input name="myCheckbox" type="hidden" value="false" />
      RadioButton
      @Html.RadioButtonFor(m=>m.IsApproved, "val")
      Output: <input checked="checked" id="Radiobutton1" name="Radiobutton1" type="radio" value="val" />
      Drop-down list
      @Html.DropDownListFor(m => m.Gender, new SelectList(new [] {"Male", "Female"}))
      Output: <select id="Gender" name="Gender"> <option>Male</option> <option>Female</option> </select>
      Multiple-select
      Html.ListBoxFor(m => m.Hobbies, new MultiSelectList(new [] {"Cricket", "Chess"}))
      Output: <select id="Hobbies" multiple="multiple" name="Hobbies"> <option>Cricket</option> <option>Chess</option> </select>
    3. Templated HTML Helpers

      These helpers figure out what HTML elements are required to render based on properties of your model class. This is a very flexible approach for displaying data to the user, although it requires some initial care and attention to set up. To setup proper HTML element with Templated HTML Helper, make use of DataType attribute of DataAnnitation class.

      For example, when you use DataType as Password, A templated helper automatically render Password type HTML input element.

      Templated Helper
      Example
      Display
      Renders a read-only view of the specified model property and selects an appropriate HTML element based on property’s data type and metadata.
      Html.Display("Name")
      DisplayFor
      Strongly typed version of the previous helper
      Html.DisplayFor(m => m. Name)
      Editor
      Renders an editor for the specified model property and selects an appropriate HTML element based on property’s data type and metadata.
      Html.Editor("Name")
      EditorFor
      Strongly typed version of the previous helper
      Html.EditorFor(m => m. Name)
  3. Custom Html Helpers

    You can 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.

    public static class CustomHelpers
    {
     //Submit Button Helper
     public static MvcHtmlString SubmitButton(this HtmlHelper helper, string 
     buttonText)
     {
     string str = "<input type=\"submit\" value=\"" + buttonText + "\" />";
     return new MvcHtmlString(str);
     }
     //Readonly Strongly-Typed TextBox Helper
     public static MvcHtmlString TextBoxFor<TModel, TValue>(this 
     HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>>
     expression, bool isReadonly)
     {
     MvcHtmlString html = default(MvcHtmlString);
    
     if (isReadonly)
     {
     html = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper,
     expression, new { @class = "readOnly",
     @readonly = "read-only" });
     }
     else
     {
     html = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper,
     expression);
     }
     return html;
     }
    }
    
What do you think?

I hope you will enjoy the HTML Helpers while programming with ASP.NET MVC. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

YOU MIGHT LIKE
Free Interview Books
 
COMMENTS (0)
14 DEC
ASP.NET MVC with AngularJS Development (online)

MON-FRI 07:30 AM- 09:00 AM IST

Know More
11 DEC
ASP.NET MVC with AngularJS Development (offline)

Sat-Sun 09:30 AM-11:00 AM IST

Know More
5 DEC
AngularJS Development (online)

Mon - Fri     6:30 AM-7:30 AM IST

3 DEC
AngularJS Development (offline)

SAT,SUN     11:00 AM-12:30 PM IST

3 DEC
MEAN Stack Development (offline)

Sat, Sun     (11:00 AM-12:30 PM IST)

26 NOV
ASP.NET MVC with AngularJS Development (offline)

(SAT,SUN)     03:30 PM-05:00 PM IST

24 NOV
ASP.NET MVC with AngularJS Development (online)

MON-FRI     09:30 PM-11:00 PM IST

12 NOV
ASP.NET MVC with AngularJS Development (offline)

SAT,SUN     08:00 AM-09:30 AM

3 NOV
ASP.NET MVC with AngularJS Development (online)

MON-FRI     07:30 AM-09:00 AM IST

25 OCT
.NET Development (offline)

Mon-Fri     9:00 AM-11:00 AM IST

BROWSE BY CATEGORY
 
RECENT ARTICLES
SUBSCRIBE TO LATEST NEWS
 
LIKE US ON FACEBOOK
 

Professional Speaks

+