Overview Of Strongly Type HTML Helpers In MVC

Introduction

This article will explain strongly typed HTML Helpers in MVC. Strongly typed HTML helpers render HTML controls like Label, Hidden Input, TextBox, TextArea, DropdownList, RadioButton, CheckBox, ListBox, and Password Input. All strongly-typed HTML helpers depend on the model class. We can create this using a lambda expression of extension method of HTML helper class.

List of Strongly Type HTML Helpers

  • @Html.HiddenFor
  • @Html.LabelFor
  • @Html.TextBoxFor
  • @Html.RadioButtonFor
  • @Html.DropDownListFor
  • @Html.CheckBoxFor
  • @Html.TextAreaFor
  • @Html.PasswordFor
  • @Html.ListBoxFor

Step 1

Open Visual Studio 2015 click on New Project and create an empty web application project.

Screenshot for creating new project 1

Strongly Type HTML Helpers in MVC

After clicking on New Project one window will appear; select Web from left panel choose ASP.NET Web Application to give a meaningful name to your project then click on OK, as shown in the below screenshot.

Screenshot for creating a new project 2

Strongly Type HTML Helpers in MVC

After clicking on OK one more window will appear. To choose Empty check on MVC checkbox and click on OK, as shown in the below screenshot.

Screenshot for creating a new project 3

Strongly Type HTML Helpers in MVC

After clicking on OK a project will be created with the name of StronglyTypeHTML_Helper_Demo.

Step 2

Right click on models folder, select add then choose a class and click on it. A window wizard appears. Give a name to your class and click on add.

Screenshot 1

Strongly Type HTML Helpers in MVC

Screenshot 2

Strongly Type HTML Helpers in MVC

Write the following code in your class,

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.   
  6. namespace StronglyTypeHTML_Helper_Demo.Models  
  7. {  
  8.     public class Employee  
  9.     {  
  10.         public int EmpId { get; set; }  
  11.         public string Name { get; set; }  
  12.         public string Gender { get; set; }  
  13.         public city city { get; set; }  
  14.         public skills skills { get; set; }  
  15.         public string Address { get; set; }  
  16.         public string Password { get; set; }  
  17.         public bool AgreeTerm { get; set; }  
  18.     }   
  19. }  
  20. public enum city  
  21. {  
  22.     Dehli,  
  23.     Mumbai,  
  24.     Kolkata,  
  25.     Channai,  
  26.     Bangalore  
  27. }  
  28. public enum skills  
  29. {  
  30.     HTML5,  
  31.     CSS3,  
  32.     Bootstrap,  
  33.     JavaScript,  
  34.     JQuery,  
  35.     Angular,  
  36.     MVC,  
  37.     WebAPI  
  38. }   

Step 3

Right click on Controllers folder, select Add, then choose Controller, as shown in below screenshot.

Screenshot for controller

Strongly Type HTML Helpers in MVC

After clicking on the controller a window will appear to choose MVC5 Controller-Empty, and click on Add.

Strongly Type HTML Helpers in MVC

After clicking on Add another window will appear with DefaultController. Change the name HomeController then click on Add. HomeController will be added under Controllers folder. Remember don’t change Controller's suffix ;for all controllers change only the highlight. Instead of Default just change Home, as shown in the below screenshot.

Strongly Type HTML Helpers in MVC

Controller code

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using StronglyTypeHTML_Helper_Demo.Models;  
  7.   
  8. namespace StronglyTypeHTML_Helper_Demo.Controllers  
  9. {  
  10.     public class HomeController : Controller  
  11.     {  
  12.         // GET: Home  
  13.         public ActionResult Index()  
  14.         {  
  15.             return View();  
  16.         }  
  17.         [HttpPost]  
  18.         public ActionResult Index(Employee emp)  
  19.         {  
  20.             return View();  
  21.         }  
  22.     }  
  23. }  

Step 4

Right click on index action method in controller. The Add view window will appear with default index name check (use a Layout page), and click on Add, as shown in below screenshot. The view will be added in views folder under Home folder with name index.

Screenshot for adding view

Strongly Type HTML Helpers in MVC

@Html.Hidden

Hidden helper is use for hidden HTML input like employee ID.
  1. @Html.HiddenFor(model => model.EmpId)  

@Html.Label

The label helper method responsible for creating HTML label is on the browser. It has two parameters: first label ID and label value.
  1. @Html.LabelFor(model => model.Name, new { @class = "label-control" })  

Output

Strongly Type HTML Helpers in MVC

@Html.TextBox

The TextBox Helper method renders a textbox in View that has a specified name. We can also add attributes like class, placeholder etc., with the help of the overloaded method in which we have to pass objects of HTML Attributes.
  1. @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })  

Output

 

Strongly Type HTML Helpers in MVC

 

@Html.TextArea

The TextArea Method renders <textarea> element on browser.
  1. @Html.TextAreaFor(model => model.Address, new { @class = "form-control", rows = "5"  })   

Output

Strongly Type HTML Helpers in MVC

@Html.Password

The password HTML helper method is responsible for creating password input field on browser.
  1. @Html.PasswordFor(model => model.Password, new { @class = "form-control" })  

Output

Strongly Type HTML Helpers in MVC

@Html.RadioButton

RadioButton helper method is responsible for creating a radio button on the browser.

It is rendered as HTML radio button. RadioButton Helper method takes three parameters; i.e., name of the control, the value, and the Boolean value for selecting the value initially.

  1. <div class="form-group">  
  2.        <div class="btn-group" data-toggle="buttons">  
  3.            <label class="btn btn-primary active">  
  4.                @Html.RadioButtonFor(model =>model.Gender, truenew { id = "male-true" })  
  5.                @Html.Label("male-true""Male")  
  6.            </label>  
  7.            <label class="btn btn-primary">  
  8.                @Html.RadioButtonFor(model => model.Gender, falsenew { id = "female-true" })  
  9.                @Html.Label("female-true""Female")  
  10.            </label>  
  11.        </div>  
  12.    </div>  

Output

Strongly Type HTML Helpers in MVC

@Html.CheckBox

The CheckBox helper method renders a checkbox and has the name and ID that you specify.
  1. @Html.CheckBoxFor(model => model.AgreeTerm)  

Output

Strongly Type HTML Helpers in MVC

Html.ListBox

The ListBox helper method creates the HTML ListBox with scrollbar on the browser. It allows you to choose multiple values by holding ctrl.
  1. @Html.ListBoxFor(model => model.skills, new SelectList(Enum.GetValues(typeof(skills))), new { @class = "form-control" })  

Output

Strongly Type HTML Helpers in MVC

@Html.DropdownList

The DropDownList helper renders a drop down list.
  1. @Html.DropDownListFor(model => model.city, new SelectList(Enum.GetValues(typeof(city))), "Select City"new { @class = "form-control" })  

Output

 

Strongly Type HTML Helpers in MVC