Understanding HTML Helpers in ASP.NET MVC

HTML Helpers: An Overview

An HTML Helper is just a method that returns an 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. In this MVC Tutorial, we will explore more about HTML Helpers which will include What is HTML helpers, types of HTML helpers, standard HTML helpers, strongly typed HTML helpers, templated HTML helpers, custom HTML helpers, and inline HTML helpers. Consider our ASP.NET MVC Course for a better understanding of all MVC core concepts.

What is HTML Helper?

Advantages

Syntax:

 @helper HelperName(Parameters list..)
{
  //Write your Program
}    

Example:

@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-

• Standard Html Helpers
• Strongly Typed HTML Helpers
• Templated HTML Helpers

Let's see one by one,

Standard Html Helpers

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

Strongly Typed HTML Helpers

These helpers are used to render the most common types of HTML elements in strongly typed views 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 the lambda expression, and you can select the field or property from the 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:

Templated HTML Helpers

These helpers figure out what HTML elements are required to render based on the 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 set up a proper HTML element with Templated HTML Helper, make use of the DataType attribute of the DataAnnitation class.

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

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 within 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;
 }
}

Conclusion: