Html Helpers in ASP.NET MVC

HtmlHelper is a class added in System.Web.MVC namespace used to render html elements from model class object or without model class object. It binds model class properties to html elements, so html element display values for model class properties. And when we submit the form values of the html element are bind to model class properties. That’s why we use html helpers.  

Another advantage of html helper is that we write c# code for html element and it's easy to write c# code. HtmlHelper doesn't affect on your performance and this helpers are converted into html tags so these are not heavy like asp.net server side control. 

There are two type of html helpers. 

1. Standard HTML Helpers 

2. Strongly typed HTML Helpers 

Standard HTML Helpers: 

Standard html helper control simply create html element with name passed to that helper. See below are some html helpers added in HtmlHelper Class: 

• Html.ActionLink() 
• Html.BeginForm()  
• Html.CheckBox() 
• Html.DropDownList() 
• Html.EndForm() 
• Html.Hidden() 
• Html.ListBox() 
• Html.Password() 
• Html.RadioButton() 
• Html.TextArea() 

• Html.TextBox() 

See in the below image I have created login form with standard html helpers
 

 

In the above image I have added standard html helpers, they create html element. BeginForm html helper create Form control on the page, Editor helper create input type text html element.  

If you run the application and check the page source in browser, you will get which controls are created from which html helper. For the above html helpers see below image.

 

Strongly Typed HTML Helpers: 

Strongly typed html helpers are used to create view with your model object. And if you submit the form your all html elements value are bind to that model object. Below are the strongly typed html helpers: 

• Html.CheckBoxFor() 
• Html.DropDownListFor() 
• Html.HiddenFor() 
• Html.ListBoxFor() 
• Html.PasswordFor() 
• Html.RadioButtonFor() 
• Html.TextAreaFor() 
• Html.TextBoxFor() 

If you want to create above form as strongly typed html helper, firstly you have to create one Login model like below:

And when we create view for any action method you can select their model for the view like below:

Now, click on the Add button and see in the Views Folder, there is one another folder inside the Views folder with name of the controller. In that folder our view is present. If you open this View, you can find our strongly typed View like below.

 

See in the image, now for Email Id and Password, another html helper is used that is EditorFor. And this helper accept our model property. So it assign value of  model property to that control and also back assign to model while submit. 

Now if you see this view in the browser, our controls rendered as expected.

 

And if you create action method with Parameter of Login class like below:

And run the application, fill the Username and password and click on create button see what happens. 

If you check by adding breakpoint, you will see Index method with HttpPost attribute is getting called and if you added parameter as Login class, all values are binded to that login class object see below in the image.

This is purpose of html helpers.