Post
Ask Question

HTML Helpers In ASP.NET MVC

It provides an easy way to Render HTML in our View.
 
The following is the list of Html Helper controls. 
  • Html.Beginform
  • Html.EndForm
  • Html.Label
  • Html.TextBox
  • Html.TextArea
  • Html.Password
  • Html.DropDownList
  • Html.CheckBox
  • Html.RedioButton
  • Html.ListBox
  • Html.Hidden
Below are Strongly Type Html Helper methods, this will allow us to check compile time errors. We get Model's Property intelligence at Runtime.
  • Html.LabelFor
  • Html.TextBoxFor
  • Html.TextAreaFor
  • Html.DropDownListFor
  • Html.CheckBoxFor
  • Html.RadioButtonFor
  • Html.ListBoxFor
  • Html.HiddenFor
Let's dig intothe details, we have to design one registration form using above controls shown as per below screen.

Here we have Label, Textbox, Password, Rediobutton, DropDown and Checkbox.
 
In ASP.NET Application we have Server Controls, so we just need to drag and drop from the Toolbox and design the page easily, but here in MVC Application we don't have Server Control so either we can use html or Html Helper Class Controls.
 
One more important thing here is in MVC there is no ViewState, so managing controls value here is challenging.
 
 
 
Create a new MVC Project, go to Files - > New Project -> ASP.NET Web Application and Select MVC Template. Give a name and Click on Ok.
 
 

Right click on Model folder and add new Class 'Register.cs'.
 
 
Create a property for the Register class as follows.
  1. public class Register    
  2. {    
  3.        
  4.     public string Name { get; set; }    
  5.     public string Phone { get; set; }    
  6.     public string Email { get; set; }    
  7.     public string Gender { get; set; }    
  8.     public string Password { get; set; }    
  9.     public string Country { get; set; }    
  10.     public bool Terms { get; set; }    
  11.   
  12. }    
Let's use HomeController and it's view 'Index.cshtml'
 
In the html part let's start the with Html.BeginForm.

That is the main container, we will place all controls inside the tag. 
  1. @using (Html.BeginForm("Index", "Home", FormMethod.Post))  
  2. {  
  3. }  
Here in Html.Beginform we are passing View name (Index), Controller name (Home) and declare formMethod = Post Method.

If you are not passing any parameter like View name and Controller name then it will automatically call the current controller action method having [HttpPost] attribute.
 
Inside the Form Let's Start with  Html.Lable :  @Html.Label("UserName").

This will create a Lable Named UserName, so for Creating Label we will use @Html.Lable
 
Next, We need Textbox for the UserName, for that we use Html.TextBox same as @Html.TextBox("UserName").

This will Create a TextBox Named UserName. 
  1. @using (Html.BeginForm("Index", "Home", FormMethod.Post))  
  2. {  
  3.     <br />  
  4.   
  5.        @Html.Label("UserName")  
  6.        @Html.TextBox("UserName")  
  7.     <br />  
  8. }   
Same way we will design UserPhone, UserEmail etc.
  1. @using (Html.BeginForm("Index", "Home", FormMethod.Post))  
  2. {  
  3.     <br />  
  4.   
  5.        @Html.Label("UserName")  
  6.        @Html.TextBox("UserName")  
  7.     <br />  
  8.   
  9.        @Html.Label("UserPhone")  
  10.        @Html.TextBox("UserPhone")  
  11.     <br />  
  12.        @Html.Label("UserEmail")  
  13.        @Html.TextBox("UserEmail")  
  14.     <br />  
  15. }  
For Password Type Textbox We can use Html.Password : @Html.Password("UserPassword") 
  1. @Html.Label("UserPassword")  
  2.    @Html.Password("UserPassword")  
  3.  <br />  
For Gender (Male/Female) we can use RadioButton and for that you can use Html.RadioButton as follows
  1. @Html.Label("M")  
  2.   @Html.RadioButton("M", new { value = "Male" })  
  3.   @Html.Label("F")  
  4.   @Html.RadioButton("F", new { value = "Female" })  
  5.   
  6.   <br />   
For Country selection we can use dropdown and for that we have Html.DropDownList.

Here we have to create a list for the country for that I have added below code outside of BeginForm tag. 
  1. @{  
  2.       
  3.         var MyList = new List<SelectListItem>(){  
  4.         new SelectListItem(){Value="1",Text="India"},  
  5.         new SelectListItem(){Value="2",Text="UK"}  
  6.   
  7.     };  
  8. }  
Now Use this MyList in your Html.DropDownList as follows.
  1. @Html.Label("UserCountry")  
  2.         
  3.    @Html.DropDownList("UserCountry", MyList)  
  4.   
  5.    <br />  
 Same way for Checkbox we use Html.CheckBox 
  1. <br />  
  2.    @Html.Label("UserTerms")  
  3.    @Html.CheckBox("UserTerms")  
  4. <br />  
 Add Submit button in the view as follows.
  1. <input type="submit" value="Submit" />  
Now run your application. It will display your html helper contols like label, textbox, rediobutton, etc.
 
  
 
Below is the view of html which shows Render of controls. Here you can see the id and name property of control id="UserName" and Name = "UserName".
  1. <form action="/" method="post">  
  2.     <br />  
  3.     <label for="UserName">UserName</label>  
  4.     <input id="UserName" name="UserName" type="text" value="" />  
  5.     <br />  
  6.     <label for="UserPhone">UserPhone</label>  
  7.     <input id="UserPhone" name="UserPhone" type="text" value="" />  
  8.     <br />  
  9.     <label for="UserEmail">UserEmail</label>  
  10.     <input id="UserEmail" name="UserEmail" type="text" value="" />  
  11.     <br />  
  12.     <label for="UserPassword">UserPassword</label>  
  13.     <input id="UserPassword" name="UserPassword" type="password" />  
  14.     <br />  
  15.     <label for="M">M</label>  
  16.     <input id="M" name="M" type="radio" value="{ value = Male }" />  
  17.     <label for="F">F</label>  
  18.     <input id="F" name="F" type="radio" value="{ value = Female }" />  
  19.     <br />  
  20.     <label for="UserCountry">UserCountry</label>  
  21.     <select id="UserCountry" name="UserCountry">  
  22.         <option value="1">India</option>  
  23.         <option value="2">UK</option>  
  24.     </select>  
  25.     <br />  
  26.     <label for="UserTerms">UserTerms</label>  
  27.     <input id="UserTerms" name="UserTerms" type="checkbox" value="true" />  
  28.     <input name="UserTerms" type="hidden" value="false" />  
  29.     <br />  
  30.     <input type="submit" value="Submit" />  
  31. </form>    
Same thing but we will bind this with our model. I have already created the model class which is 'Register.cs' 
 
Go to your HomeController and  add Model reference.
  1. using WebHelper.Models;   
 and in the Index method write below code.
 I have added [HrtpPost] Attributes here, and pass object r of Register class.
  1. [HttpPost]  
  2. public ActionResult Index(Register r)  
  3. {  
  4.    return View();  
  5. }  
Now, I have designed the same form by binding it through Model property using Html Helper methods.
 
For Label we can use Html.LabelFor and assign it with the property 'Name', 'Email', 'Phone' Etc.

By writing m => m.Name we are binding label with the model property 'Name'.
 
Same way for Textbox we can use Html.TextBoxFor  and assign it  with the property 'Name', 'Email', 'Phone' Etc
 
Html.PasswordFor for Password field,  Html.RadioButtonFor for Password field, Html.DropDownListFor for dropdown field, Html.CheckBoxFor for checkbox field etc.
 
Check below html code for the same form. 
  1. @model WebHelper.Models.Register    
  2. @{      
  3.         var MyList = new List  
  4.     <SelectListItem>(){    
  5.         new SelectListItem(){Value="1",Text="India"},    
  6.         new SelectListItem(){Value="2",Text="UK"}    
  7.     
  8.     };    
  9. }    
  10.     
  11. @using (Html.BeginForm("Index", "Home", FormMethod.Post))    
  12. {    
  13.        
  14.     
  15.     @Html.LabelFor(m => m.Name)    
  16.     @Html.TextBoxFor(m => m.Name)    
  17.       
  18.     <br />    
  19.     
  20.     @Html.LabelFor(m => m.Phone)    
  21.     @Html.TextBoxFor(m => m.Phone)    
  22.       
  23.     <br />    
  24.     @Html.LabelFor(m => m.Email)    
  25.     @Html.TextBoxFor(m => m.Email)    
  26.       
  27.     <br />    
  28.     @Html.LabelFor(m => m.Password)    
  29.     @Html.PasswordFor(m => m.Password)    
  30.       
  31.     <br />    
  32.     @Html.Label("Male")    
  33.     @Html.RadioButtonFor(m => m.Gender, "Male", new { value = "Male" })    
  34.     @Html.Label("Female")    
  35.     @Html.RadioButtonFor(m => m.Gender, "Female", new { value = "Female" })    
  36.     
  37.       
  38.     <br />    
  39.     @Html.LabelFor(m => m.Country)    
  40.     @Html.DropDownListFor(m => m.Country, MyList)    
  41.       
  42.     <br />    
  43.     @Html.LabelFor(m => m.Terms)    
  44.     @Html.CheckBoxFor(m => m.Terms)    
  45.       
  46.     <br />  
  47.     <input type="submit" value="Submit" />    
  48. }    
Now, run the application, fill the information and set breakpoint in controller, shown as per below screen.
 
 
 
Here you can see that I got all the values of the form controls in my controller class. 
 Now if you want to persist the values of the controls you can pass the object in View for example return View(r) here I am passing object 'r'.
  1. [HttpPost]  
  2. public ActionResult Index(Register r)  
  3. {  
  4.    return View(r);  
  5. }  
 
 
Model Binder will bind the control's values with model values.
 
Read more articles on ASP.NET:


Similar Articles