HTML Helpers in ASP.NET MVC

Back to: ASP.NET MVC Tutorial

HTML Helpers in ASP.NET MVC Application

In this article, I am going to discuss the HTML Helpers in ASP.NET MVC Application with Examples. The most important point that you need to keep in mind is using the HTML Helpers in the ASP.NET MVC Application greatly reduces the number of HTML tags that 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?

In our traditional ASP.NET web forms application, as a developer, we generally use the toolbox for adding controls on any particular web page. However, coming to the ASP.NET MVC application there is no such toolbox available to drag and drop HTML controls onto the view. So those developers, who are coming 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 at the moment then 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 a view to generating a text box.
@Html.TextBox(“firstname”) 

The Point that you need to keep in mind is there are several overloaded versions 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 then 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 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, readonly, class, etc. If you want to use these attributes within a Helper method, then you need to prefix them with “@” symbol as shown in the below example.
@Html.TextBox(“firstname”, “Pranaya”, new { @class = “redtextbox”, @readonly=”true” })

If you want to generate a label for “Name” using 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 then use the following 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, it is not mandatory to use HTML Helpers in ASP.NET MVC views. 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.

HTML Helpers in MVC

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