HTML Helpers in MVC

HTML Helpers in ASP.NET MVC Application

In this article, I am going to discuss the HTML Helpers in MVC Application with examples. The most important point that you need to remember is using the HTML Helpers in ASP.NET MVC Application greatly reduce 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 MVC?
  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 ASP.NET MVC application there is no such toolbox available to drag and drop HTML controls on to the view. So those developers who are coming from ASP.NET Web Forms background, they find it little difficult to create views in ASP.NET MVC application.

So, to overcome the above problem, the ASP.NET MVC Framework provides Html Helper classes which contain different extension methods. 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 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 is HTML helper in MVC?

An HTML Helper in 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 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 in 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 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 the HTML Helper extension methods greatly reduce the amount of HTML code that you write within a view. As per ASP.NET MVC, the Views should be as simple as possible. All the complicated logic to generate the controls should be encapsulated into the HTML helper methods to keep views as simple as possible. 

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

We will discuss what these are and the difference between them in a later article. The following table lists Html Helper methods and HTML control each method generates.

HTML Helpers in MVC

In the next article, I am going to discuss the TextBox and TextArea HTML Helper method in with real-time examples. Here, In this article, I try to explain the basics of HTML Helpers in MVC application. I hope you enjoy this article. 

Leave a Reply

Your email address will not be published. Required fields are marked *