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.

HtmlHelper	Strogly Typed HtmlHelpers	Html Control
Html.ActionLink		It generates  Anchor link
Html.Label	Html.LabelFor	It generates  Label
Html.TextBox	Html.TextBoxFor	It generates  Textbox
Html.TextArea	Html.TextAreaFor	It generates  TextArea
Html.Display	Html.DisplayFor	It generates  Html text
Html.RadioButton	Html.RadioButtonFor	It generates  Radio button
Html.ListBox	Html.ListBoxFor	It generates  multi-select list box
Html.DropDownList	Html.DropDownListFor	It generates  Dropdown, combobox
Html.Hidden	Html.HiddenFor	It generates  Hidden field
Password	Html.PasswordFor	It generates  Password textbox
Html.CheckBox	Html.CheckBoxFor	It generates  Checkbox
Html.Editor	Html.EditorFor	It 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.
  
  
  
  

  namespace WebApplication1.Models
  {
      public class StudentModel
      {
          public int ID { get; set; }
          public string Name { get; set; }
          public DateTime DateofJoing { get; set; }
          public int Age { get; set; }
      }
  }

• Now, add View for the list of Students.
  
  
  
  

  @model IEnumerable<WebApplication1.Models.StudentModel>
  @{
      ViewBag.Title = "StudentList";
  }
  <h2>StudentList</h2>
  
  <p>
      @Html.ActionLink("Create New", "Create")
  </p>
  <table class="table">
      <tr>
          <th>
              @Html.DisplayNameFor(model => model.Name)
          </th>
          <th>
              @Html.DisplayNameFor(model => model.DateofJoing)
          </th>
          <th>
              @Html.DisplayNameFor(model => model.Age)
          </th>
          <th></th>
      </tr>
  
  @foreach (var item in Model) {
      <tr>
          <td>
              @Html.DisplayFor(modelItem => item.Name)
          </td>
          <td>
              @Html.DisplayFor(modelItem => item.DateofJoing)
          </td>
          <td>
              @Html.DisplayFor(modelItem => item.Age)
          </td>
          <td>
              @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
              @Html.ActionLink("Details", "Details", new { id=item.ID }) |
              @Html.ActionLink("Delete", "Delete", new { id=item.ID })
          </td>
      </tr>
  }
  
  </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.
  

  public ActionResult StudentList()
        {
            List<StudentModel> lst = new List<StudentModel>{
                                           new StudentModel{
                                              ID = 1,
                                              Name = "Allan",
                                               DateofJoing = DateTime.Parse(DateTime.Today.ToString()),
                                              Age = 23
                                           },
  
                                           new StudentModel{
                                              ID = 2,
                                              Name = "Carson",
                                              DateofJoing = DateTime.Parse(DateTime.Today.ToString()),
                                              Age = 45
                                           },
  
                                           new StudentModel{
                                              ID = 3,
                                              Name = "Carson",
                                              DateofJoing = DateTime.Parse(DateTime.Today.ToString()),
                                              Age = 37
                                           },
                                           new StudentModel{
                                              ID = 4,
                                              Name = "Laura",
                                              DateofJoing = DateTime.Parse(DateTime.Today.ToString()),
                                              Age = 26
                                           }
                                        };
            return View(lst);
        }

Let’s create an example for creating new Student.

• Now, add View for creating the Student.
  
  
  
  

  @model WebApplication1.Models.StudentModel
  @{
      ViewBag.Title = "Create";
  }
  
  <h2>Create</h2>
  @using (Html.BeginForm())
  {
      @Html.AntiForgeryToken()
  
      <div class="form-horizontal">
          <h4>StudentModel</h4>
          <hr />
          @Html.ValidationSummary(true, "", new { @class = "text-danger" })
          <div class="form-group">
              @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
              <div class="col-md-10">
                  @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                  @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
              </div>
          </div>
  
          <div class="form-group">
              @Html.LabelFor(model => model.DateofJoing, htmlAttributes: new { @class = "control-label col-md-2" })
              <div class="col-md-10">
                  @Html.EditorFor(model => model.DateofJoing, new { htmlAttributes = new { @class = "form-control" } })
                  @Html.ValidationMessageFor(model => model.DateofJoing, "", new { @class = "text-danger" })
              </div>
          </div>
  
          <div class="form-group">
              @Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" })
              <div class="col-md-10">
                  @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } })
                  @Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger" })
              </div>
          </div>
  
          <div class="form-group">
              <div class="col-md-offset-2 col-md-10">
                  <input type="submit" value="Create" class="btn btn-default" />
              </div>
          </div>
      </div>
  }
  
  <div>
      @Html.ActionLink("Back to List", "Index")
  </div>
  
  @section Scripts {
      @Scripts.Render("~/bundles/jqueryval")
  }

• Now, create an action method "Create" in HomeController.
  

  public ActionResult Create()
  {
  
      return View(new StudentModel());
  }
  
    [HttpPost]
  public ActionResult Create(FormCollection collection)
  {
  
      //Code for adding student in to the collection
      return View();
  }