HTML Helpers in MVC

HTML Helpers in MVC

In this article, I am going to discuss the HTML Helpers in MVC with examples. Here in this article, we will discuss how we can use the HTML Helpers in MVC applications i.e. within an MVC view. The most important point that you need to remember is using the HTML Helpers in ASP.NET MVC greatly reduce the number of HTML tags that you generally use to create an HTML Control. 

Before understanding the HTML Helpers in MVC, let’s have a look at how we can create web pages in our traditional ASP.NET web forms application. 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 HtmlHelper classes which contain different extension methods and 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. The HtmlHelper class is designed only to generate HTML Controls within a view and it should not be used within controllers or models. 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 that 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 MVC?

Yes, it is possible. We can create our custom HTML helpers in MVC, and we will discuss this in a later article.

Is it mandatory to use HTML helpers in MVC?

No, it is not mandatory to use HTML Helpers in MVC views. We can write the required HTML within a view but using the HTML helper extension methods greatly reduce the amount of HTML code that we 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. 

HTML Helpers Methods Type in ASP.NET MVC

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

From the next article onwards, I am going to discuss these HTML helper methods with real-time examples in ASP.NET MVC application. In the next article, I am going to discuss the TextBox and TextArea HTML Helper method in with real-time examples.

SUMMARY

In this article, I try to explain the basics of HTML helpers in MVC application. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

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