HTML Helpers in ASP.NET MVC

In ASP.NET WebForms, we had server controls available for faster development. Similarly, in ASP.NET MVC, we have HTML Helpers which can be used for faster development, but unlike server controls, they don't have ViewState and Events, so it is lightweight.

Below are the important points we developers should know about HTML Helpers:

1. ASP.NET MVC provides two types of built-in HTML Helpers:
   • Standard HTML Helpers.
   • Strongly Typed HTML Helpers.
2. We can create our own HTML Helpers.
3. All HTML Helpers return MVCHtmlString.

Let's discuss all the points one by one:

1. Standard HTML Helpers:

As I have already mentioned, HTML helpers are for faster development, and the sole purpose of Standard HTML helpers is the same. So, it is completely up to you whether you use Pure HTML or HTML Helpers in your project.

HTML Helpers are nothing but extension methods defined in the HtmlHelper class, which can be accessed with @Html in Razor view, where HTML is an object of the HtmlHelper class and the @ symbol is used to access a server-side object in Razor view.

Below are the Standard HTML Helpers available in ASP.NET MVC .

Let's understand it by creating a Login Form.

@using (Html.BeginForm("SaveStudent", "Student", FormMethod.Post))
{
<table>
<tr>
<td>@Html.Label("UserName")</td>
<td>@Html.TextBox("txtUserName")</td>
</tr>
<tr>
<td>@Html.Label("Password")</td>
<td>@Html.Password("txtPassword")</td>
</tr>
<tr>
<td>@Html.Label("Remember Me")</td>
<td>@Html.CheckBox("IsPersistant")</td>
</tr>
<tr>
<td colspan="2"><button type="submit">Login</button></td>
</tr>
</table>
}

As you can see, for UserName I have used HTML.Textbox, for Password, Html.Password, for Remember me Html.Checkbox and for Label Html.Label. Similarly, you can use any HTML helper as per your requirement.

2.Strongly Typed HTML Helpers:

As the name suggests, your HTML helpers will be strongly typed, meaning bound with your model property, so it is less error-prone.

We have the following Strongly Typed HTML Helpers available in ASP.NET MVC:

Each Strongly Typed Extension method that is HTML Helper accepts Expression <Func<TModel,TValue> > as parameter meaning expression of type Func. If you have gone through my C# articles, you should know that Func is a readymade delegate that can accept any method with a signature of any return type and parameters. In support of delegates, we have Lambda expressions, which help us write inline delegates and eliminate the need to create external methods. A lambda expression is actually a short way of creating methods. The left side of the => symbol represents the method argument (parameter), and the right side of the => symbol represents the method body.

For HTML Helpers, the Func is designed to take a model as a method argument(input) automatically, and it will return any value as output.

So if I write @Html.TextboxFor(m=>m.Id), it means that it is an extension method which is asking for Func, Func is expecting any method with a model as input and any output. I am simply passing my model as input and returning one of its properties as output, in the current case ID.

It will generate a textbox with Name="Id" .

Using strongly typed HTML helpers has the following advantages over pure HTML:

1. Faster development.
2. Easy for sending data from a View to Controller and model binding.
3. Easier for client-side validation with data annotation.

Let's understand each point with the same example of the Login Form.

First, create a model class and name it Student as shown below:

public class Student
{
public int Id { get; set; }
public string UserName { get; set; }
public string Password { get; set; }
public bool IsPersistant { get; set; }
}

Now, replace the view with the code below:

@using MVCExample.Models
@model Student
@using (Html.BeginForm("SaveStudent", "Student", FormMethod.Post))
{
<table>
<tr>
<td>@Html.LabelFor(l => l.UserName)</td>
<td>@Html.TextBoxFor(m => m.UserName)</td>
</tr>
<tr>
<td>@Html.LabelFor(l => l.Password)</td>
<td>@Html.PasswordFor(m => m.Password)</td>
</tr>
<tr>
<td>@Html.LabelFor(l => l.IsPersistant)</td>
<td>@Html.CheckBoxFor(m => m.IsPersistant)</td>
</tr>
<tr>
<td colspan="2"> <button type="submit">Login</button></td>
</tr>
</table>
}

As you can observe, first I have imported the model namespace in view and made the view strongly typed with the Student model.

I have used the Strongly Typed version of HTML helpers and passed a lambda expression with the Student model as input and the desired property as output, as it accepts a Func delegate.

Now you can judge that, apart from faster development, it is less error-prone, as we are bound to use the model and its properties. Hence, first point is justified.

Also, as we have used a model property in each HTML helper, it will generate a related HTML control with the exact same name as the name of the property. Meaning, we will no longer need to create a custom model binder, and the Action Method will correctly catch every property with its value. So, here the Second Point is also justified.

The Third Point cannot be justified right now, and we will discuss it in the next article.

3. Create Custom HTML Helper:

• Inline HTML Helper

Creating a custom HTML Helper in the same view is called Inline HTML Helper. Obviously, it can only be used in the current view only.

To create an inline HTML helper, we need to define a method with the @helper tag in a Razor view.

@helper BookList(string[] books)
{
<ul>
foreach(var book in books){
<li><strong>@book</strong></li>
}
</ul>
}
@BookList(new string[] { "Book1", "Book2", "Book3" })

It will give the following output:



Now, look closely and try to understand why the response is in a list with bold font. The answer is MVCHtmlString. Actually, all HTML helpers return MVCHtmlString, meaning the string which is already encoded and does not need further encoding.

• External HTML Helper with Extension Method:

An extension method is a custom external method that acts as an instance method for any class or type.

For example, we have the Length method defined in the String class. So, whenever we put a dot (.) after any string, the IntelliSense shows us the Length method, but if we want our own method under the String class to act in the same way, i.e., to act like an instance method, we need to extend the String type.

Similarly, if we want the IntelliSense to show our own method on putting a dot after an HTML tag, we will have to extend the HtmlHelper class(Type).

To make an extension method, we need three things:

1. Make your class static.
2. Make the method static.
3. Mark the(class) type with this prefix, which you want to extend.

Let's modify the BookList inline HTML helper and convert it into an extension method so that it can be used in any view.

public static MvcHtmlString BookList(this HtmlHelper html, string Book)
{
return  MvcHtmlString.Create(
@"
<li>"+"<b>"+Book+"</b>"+"</li>"
);
}

Now, you can use this method as an instance method of the HtmlHelper class, with @Html tag in your view, like below:

@{
string[] books = { "Book1", "Book2", "Book3" };
}
@foreach (var item in books)
{
<ul>
@Html.BookList(item)
</ul>
}

You will get the same result as earlier.