HTML Helper In ASP.NET MVC

HTML Helpers are classes which help to render the HTML. These classes have methods which generate HTML at runtime. We can also bind a model object to individual HTML element for displaying or retrieving values.

One of the major differences between calling the HtmlHelper methods and using an HTML tag is that the HtmlHelper methods are designed to make it easy to bind to the View data or Model data.

@Html is used to access the HTML helper, however, HTML is the property of HtmlHelpers which is included in the base class.

Some of the HtmlHelper methods and HTML control each method generates are provided below.

HtmlHelperStrogly Typed HtmlHelpersHtml Control
Html.ActionLink It generates  Anchor link
Html.LabelHtml.LabelForIt generates  Label
Html.TextBoxHtml.TextBoxForIt generates  Textbox
Html.TextAreaHtml.TextAreaForIt generates  TextArea
Html.DisplayHtml.DisplayForIt generates  Html text
Html.RadioButtonHtml.RadioButtonForIt generates  Radio button
Html.ListBoxHtml.ListBoxForIt generates  multi-select list box
Html.DropDownListHtml.DropDownListForIt generates  Dropdown, combobox
Html.HiddenHtml.HiddenForIt generates  Hidden field
PasswordHtml.PasswordForIt generates  Password textbox
Html.CheckBoxHtml.CheckBoxForIt generates  Checkbox
Html.EditorHtml.EditorForIt generates Html controls based on data type of specified model property e.g. textbox for string property, numeric field for int, double or other numeric type.

You will find the list of all extension methods from below link which provides details of HTML controls getting generated.

https://msdn.microsoft.com/en-us/library/system.web.mvc.html(v=vs.118).aspx

Let’s see some examples for the same.

Let’s create an example for List of Students.

  • Let’s create Student Model in Model folder.

    HTML Helper In ASP.NET

    HTML Helper In ASP.NET
    1. namespace WebApplication1.Models  
    2. {  
    3.     public class StudentModel  
    4.     {  
    5.         public int ID { get; set; }  
    6.         public string Name { get; set; }  
    7.         public DateTime DateofJoing { get; set; }  
    8.         public int Age { get; set; }  
    9.     }  
    10. }  
  • Now, add View for the list of Students.

    HTML Helper In ASP.NET

    HTML Helper In ASP.NET
    1. @model IEnumerable<WebApplication1.Models.StudentModel>  
    2. @{  
    3.     ViewBag.Title = "StudentList";  
    4. }  
    5. <h2>StudentList</h2>  
    6.   
    7. <p>  
    8.     @Html.ActionLink("Create New""Create")  
    9. </p>  
    10. <table class="table">  
    11.     <tr>  
    12.         <th>  
    13.             @Html.DisplayNameFor(model => model.Name)  
    14.         </th>  
    15.         <th>  
    16.             @Html.DisplayNameFor(model => model.DateofJoing)  
    17.         </th>  
    18.         <th>  
    19.             @Html.DisplayNameFor(model => model.Age)  
    20.         </th>  
    21.         <th></th>  
    22.     </tr>  
    23.   
    24. @foreach (var item in Model) {  
    25.     <tr>  
    26.         <td>  
    27.             @Html.DisplayFor(modelItem => item.Name)  
    28.         </td>  
    29.         <td>  
    30.             @Html.DisplayFor(modelItem => item.DateofJoing)  
    31.         </td>  
    32.         <td>  
    33.             @Html.DisplayFor(modelItem => item.Age)  
    34.         </td>  
    35.         <td>  
    36.             @Html.ActionLink("Edit""Edit"new { id=item.ID }) |  
    37.             @Html.ActionLink("Details""Details"new { id=item.ID }) |  
    38.             @Html.ActionLink("Delete""Delete"new { id=item.ID })  
    39.         </td>  
    40.     </tr>  
    41. }  
    42.   
    43. </table> 

Now, in the above example, DisplayFor() is used for displaying items. However, ActionLink is used for generating a link.

In the ActionLink, the first parameter is of the link which is “Edit”, the second parameter is the action method in the Controller, which is also “Edit”, and the third parameter ID is of any particular employee you want to edit.

  • Now, StudentList action method in HomeController.
    1. public ActionResult StudentList()  
    2.       {  
    3.           List<StudentModel> lst = new List<StudentModel>{  
    4.                                          new StudentModel{  
    5.                                             ID = 1,  
    6.                                             Name = "Allan",  
    7.                                              DateofJoing = DateTime.Parse(DateTime.Today.ToString()),  
    8.                                             Age = 23  
    9.                                          },  
    10.   
    11.                                          new StudentModel{  
    12.                                             ID = 2,  
    13.                                             Name = "Carson",  
    14.                                             DateofJoing = DateTime.Parse(DateTime.Today.ToString()),  
    15.                                             Age = 45  
    16.                                          },  
    17.   
    18.                                          new StudentModel{  
    19.                                             ID = 3,  
    20.                                             Name = "Carson",  
    21.                                             DateofJoing = DateTime.Parse(DateTime.Today.ToString()),  
    22.                                             Age = 37  
    23.                                          },  
    24.                                          new StudentModel{  
    25.                                             ID = 4,  
    26.                                             Name = "Laura",  
    27.                                             DateofJoing = DateTime.Parse(DateTime.Today.ToString()),  
    28.                                             Age = 26  
    29.                                          }  
    30.                                       };  
    31.           return View(lst);  
    32.       }  

Let’s create an example for creating new Student.

  • Now, add View for creating the Student.

    HTML Helper In ASP.NET

    HTML Helper In ASP.NET
    1. @model WebApplication1.Models.StudentModel  
    2. @{  
    3.     ViewBag.Title = "Create";  
    4. }  
    5.   
    6. <h2>Create</h2>  
    7. @using (Html.BeginForm())   
    8. {  
    9.     @Html.AntiForgeryToken()  
    10.       
    11.     <div class="form-horizontal">  
    12.         <h4>StudentModel</h4>  
    13.         <hr />  
    14.         @Html.ValidationSummary(true""new { @class = "text-danger" })  
    15.         <div class="form-group">  
    16.             @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })  
    17.             <div class="col-md-10">  
    18.                 @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })  
    19.                 @Html.ValidationMessageFor(model => model.Name, ""new { @class = "text-danger" })  
    20.             </div>  
    21.         </div>  
    22.   
    23.         <div class="form-group">  
    24.             @Html.LabelFor(model => model.DateofJoing, htmlAttributes: new { @class = "control-label col-md-2" })  
    25.             <div class="col-md-10">  
    26.                 @Html.EditorFor(model => model.DateofJoing, new { htmlAttributes = new { @class = "form-control" } })  
    27.                 @Html.ValidationMessageFor(model => model.DateofJoing, ""new { @class = "text-danger" })  
    28.             </div>  
    29.         </div>  
    30.   
    31.         <div class="form-group">  
    32.             @Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" })  
    33.             <div class="col-md-10">  
    34.                 @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } })  
    35.                 @Html.ValidationMessageFor(model => model.Age, ""new { @class = "text-danger" })  
    36.             </div>  
    37.         </div>  
    38.   
    39.         <div class="form-group">  
    40.             <div class="col-md-offset-2 col-md-10">  
    41.                 <input type="submit" value="Create" class="btn btn-default" />  
    42.             </div>  
    43.         </div>  
    44.     </div>  
    45. }  
    46.   
    47. <div>  
    48.     @Html.ActionLink("Back to List""Index")  
    49. </div>  
    50.   
    51. @section Scripts {  
    52.     @Scripts.Render("~/bundles/jqueryval")  
    53. }  
  • Now, create an action method "Create" in HomeController.
    1. public ActionResult Create()  
    2. {  
    3.      
    4.     return View(new StudentModel());  
    5. }  
    6.   
    7.   [HttpPost]  
    8. public ActionResult Create(FormCollection collection)  
    9. {  
    10.   
    11.     //Code for adding student in to the collection   
    12.     return View();  
    13. }