HTML Helpers in ASP.NET MVC

Back to: ASP.NET MVC Tutorial For Beginners and Professionals

HTML Helpers in ASP.NET MVC Application

In this article, I am going to discuss the HTML Helpers in ASP.NET MVC Applications with Examples. The most important point you need to remember is that using the HTML Helpers in the ASP.NET MVC Application greatly reduces the number of HTML tags you generally use to create HTML Controls. As part of this article, we are going to discuss the following pointers.

1. Why HTML Helper in MVC?
2. What are HTML Helpers in ASP.NET MVC?
3. Is it possible to create our own custom HTML Helpers in ASP.NET MVC
4. Is it mandatory to use HTML Helpers in ASP.NET MVC Applications?
5. Types of HTML Helpers in MVC.

Why HTML Helper in ASP.NET MVC?

As a developer in our traditional ASP.NET web forms application, we generally use the toolbox for adding controls on any particular web page. However, coming to the ASP.NET MVC application, no toolbox is available to drag and drop HTML controls onto the view. So those developers, who come from ASP.NET Web Forms backgrounds, find it a little difficult to create views in the ASP.NET MVC application.

So, to overcome the above difficulty, the ASP.NET MVC Framework provides HTML Helper classes that contain different extension methods to create different HTML Controls in a view. We can use those extension methods to create HTML controls programmatically within a view. All the HtmlHelper methods that are present within the HtmlHelper class generate HTML controls and return the result as an HTML string. If this is not clear now, don’t worry; we will discuss this in great detail.

What are HTML Helpers in ASP.NET MVC?

An HTML Helper in ASP.NET MVC is an extension method of the HTML Helper class, which is used to generate HTML content in a view.  For example, if you want to generate a textbox with id=”firstname” and name=”firstname” then you can type all the required HTML in a view as shown below
<input type=”text” name=”firtsname” id=”firstname” />

But in ASP.NET MVC, you can use the following “TextBox” HTML helper method in view to generating a text box. 
@Html.TextBox(“firstname”) 

The Point you need to keep in mind is several overloaded versions are available for the above TextBox HTML helper method. To set the value along with the name, you can use the following overloaded version of the TextBox helper method.
@Html.TextBox(“firstname”, “Pranaya”)

At runtime, the above TextBox HTML helper method generates the following HTML
<input id=”firstname” name=”firstname” type=”text” value=”Pranaya” />

It is also possible to set the HTML attributes of a text box. If you want to do so, you need to use the following overloaded version of the TextBox HTML helper method. 
@Html.TextBox(“firstname”, “Pranaya”, new { style = “background-color:Red; color:White; font-weight:bold”, title=”Please enter your first name” })

Notice here that we are passing the HTML attributes title and style as an anonymous type to the TextBox helper method. Some of the HTML attributes are reserved keywords. For example, read-only, class, etc. If you want to use these attributes within a Helper method, you need to prefix them with the “@” symbol, as shown in the example below.
@Html.TextBox(“firstname”, “Pranaya”, new { @class = “redtextbox”, @readonly=”true” })

If you want to generate a label for “Name” using the HTML helper method, then use the following HTML Helper method
@Html.Label(“Name”, “Name”)

If you want to generate a textbox to enter a password, use the HTML Helper method.
@Html.Password(“Password”)

If you want to generate a multi-line textbox using Helper methods with 6 rows and 30 columns, then use the following HTML Helper method
@Html.TextArea(“Comments”, “”, 6, 30, null)

If you want to generate a hidden field, then use the following HTML Helper method
@Html.Hidden(“id”)

The hidden field is used to store the hidden values which we don’t want to show to the end-users on a page, but we need these values to update the data when the form is submitted to the server.

Is it possible to create our own custom HTML Helpers in ASP.NET MVC?

Yes, it is possible. We can create our custom HTML Helpers in ASP.NET MVC Application, and we will discuss this in our Custom HTML Helpers article.

Is it mandatory to use HTML Helpers in ASP.NET MVC?

No, using HTML Helpers in ASP.NET MVC views is not mandatory. You can write the required HTML within a view, but using HTML Helper extension methods greatly reduces the amount of HTML code that you write within a view. As per ASP.NET MVC documentation, the Views should be as simple as possible. All the complicated logic to generate the HTML Controls should be encapsulated into the HTML helper methods to keep views simple. 

Types of HTML Helpers Methods in ASP.NET MVC Application

In ASP.NET MVC, there are two types of HTML Helper methods

1. Simple HTML helper methods
2. Strongly type HTML helper Methods

We will discuss what these are and the difference between them in a later article. The following table shows the lists of Html Helper methods and the corresponding HTML control they generate.

In the next article, I am going to discuss the TextBox and TextArea HTML Helper methods in ASP.NET MVC Applications with examples. In this article, I explain the basics of HTML Helpers in ASP.NET MVC application. I hope you enjoy this HTML Helpers in MVC article.