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 the extension method of the 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

New Project

After clicking on New Project one window will appear; select Web from the 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

Project 2

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

Screenshot for creating a new project 3

MVC checkbox

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

Step 2. Right-click on the 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

Models folder

Screenshot 2

Class

Write the following code in your class,

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace StronglyTypeHTML_Helper_Demo.Models
{
    public class Employee
    {
        public int EmpId { get; set; }
        public string Name { get; set; }
        public string Gender { get; set; }
        public City City { get; set; }
        public Skills Skills { get; set; }
        public string Address { get; set; }
        public string Password { get; set; }
        public bool AgreeTerm { get; set; }
    }
}

public enum City
{
    Delhi,
    Mumbai,
    Kolkata,
    Chennai,
    Bangalore
}

public enum Skills
{
    HTML5,
    CSS3,
    Bootstrap,
    JavaScript,
    jQuery,
    Angular,
    MVC,
    WebAPI
}

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

Screenshot for controller

Controllers folder

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

MVC5 Controller-Empty

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

HomeController

Controller code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using StronglyTypeHTML_Helper_Demo.Models;
namespace StronglyTypeHTML_Helper_Demo.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(Employee emp)
        {
            return View();
        }
    }
}

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

Screenshot for adding view

Index action method

@Html.Hidden

A Hidden helper is used for hidden HTML input like employee ID.

@Html.HiddenFor(model => model.EmpId)

@Html.Label

The label helper method responsible for creating HTML labels is on the browser. It has two parameters: first label ID and label value.

@Html.LabelFor(model => model.Name, new { @class = "label-control" })

Output

@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.

@Html.TextBoxFor(
    model => model.Name,
    new { @class = "form-control" }
)

Output

Output2

@Html.TextArea

The TextArea Method renders <textarea> element on the browser.

@Html.TextAreaFor(
    model => model.Address,
    new { @class = "form-control", rows = "5" }
)

Output

Output3

@Html.Password

The password HTML helper method is responsible for creating a password input field on the browser.

@Html.PasswordFor(model => model.Password, new { @class = "form-control" })

Output

Output4

@Html.RadioButton

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

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

<div class="form-group">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary active">
            @Html.RadioButtonFor(model => model.Gender, true, new { id = "male-true" })
            @Html.Label("male-true", "Male")
        </label>
        <label class="btn btn-primary">
            @Html.RadioButtonFor(model => model.Gender, false, new { id = "female-true" })
            @Html.Label("female-true", "Female")
        </label>
    </div>
</div>

Output

Male feamle

@Html.CheckBox

The CheckBox helper method renders a checkbox and has the name and ID that you specify.

@Html.CheckBoxFor(model => model.AgreeTerm)

Output

Checkbox

Html.ListBox

The ListBox helper method creates the HTML ListBox with a scrollbar on the browser. It allows you to choose multiple values by holding ctrl.

@Html.ListBoxFor(
    model => model.skills,
    new SelectList(Enum.GetValues(typeof(Skills))),
    new { @class = "form-control" }
)

Output

Bootstrap

@Html.DropdownList

The DropDownList helper renders a drop-down list.

@Html.DropDownListFor(
    model => model.city,
    new SelectList(Enum.GetValues(typeof(City))),
    "Select City",
    new { @class = "form-control" }
)

Output

Dropdown list