HTML Helpers in ASP.NET MVC

HTML Helper class generates HTML  elements using the model class object in razor view. HTML Helper is a method that returns a HTML string. The string can represent any type of text  like that  we can use HTML Helpersto render standard HTML tags  like  HTML <input>, <img> and <button> tags etc. Also Read our previous tutorial about Types of MVC Project Templates.

Types of HTML Helpers :

  • Inline HTML  Helpers
  • Built-In HTML  Helpers
    • Standard HTML  Helpers
    • Strongly Typed HTML Helpers
    • Templated HTML Helpers
  • Custom Html Helpers

Trending Now : ASP.NET MVC 5 New Features 

1. Inline HTML  Helpers :

Inline Html Helpers 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#”, “Asp”, “MVC” })

<h3>Book Lists:</h3>

@ListingItems(new string[] { “How to C#”, “how to Asp”, “how to MVC” })

2.Built-In HTML Helpers :

These Helpers are extension methods on the HTML Helper class. The Built-In HTML helpers can be divided into three Types .

Standard Html Helpers :

Standard HTML  helpers are used to render the most common types of HTML elements such as HTML text boxes, checkboxes etc. A list of few standard HTML  helpers is given below

1 Html Element Example
1 TextBox @Html.TextBox(“Textbox2”, “val”)Output: <input id=”Textbox2″ name=”Textbox2″ type=”text” value=”val” />
2 Password @Html.Password(“Password2”, “val”)Output: <input id=”Password2″ name=”Password2″ type=”password” value=”val” />

Strongly Typed HTML Helpers:Strongly Typed HTML helpers are used to render the most common types of HTML elements in strongly typed view like as HTML check boxes,  text boxes etc.

1 Html Element Example
1 TextBox @Html.TextBoxFor(m=>m.Name)Output: <input id=”Name” name=”Name” type=”text” value=”Name-val” />
2 Password @Html.PasswordFor(m=>m.Password)Output: <input id=”Password” name=”Password” type=”password”/>

 

Templated HTML Helpers:

Templated HTML helpers  are very Flexible approach .It defines what Html elements are required to render based on properties of  model class. A list of few Templated HTML  helpers is given below

1 Templated Helper Example
1 Display Html.Display(“Name”)
2 Editor  Html.EditorFor(m => m. Name)

 

3.Custom Html Helpers:

We can also create  own custom helper methods by creating an extension method on the HTML Helper class or by creating static methods with in a utility class.

For Example ,

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;

}

}