HTML Helpers in MVC: What it is & Types of HTML Helpers with examples

introduction

HTML Helpers are managed within View to execute HTML content. We can use HTML Helpers to implement a method that returns a string.

This tutorial discusses how you can define or create custom HTML Helpers that you can use within your MVC views. Using HTML Helpers, you can decrease the amount of repetitive typing of HTML tags within a standard HTML page.

Types of HTML Helpers With Examples

In MVC, HTML Helper can be considered as a method that returns you a string. This string can describe the specific type of detail of your requirement.

Example: We can utilize the HTML Helpers to perform standard HTML tags, for example HTML<input>, and any <img> tags. We can also develop the most complex problem like tab strip or use it to load HTML data tables from database live data.

The ASP.NET MVC framework incorporates the below set of standard HTML Helpers.

· @Html.TextBox

· @Html.Password

· @Html.TextArea

· @Html.CheckBox

· @Html.RadioButton

· @Html.DropDownList

· @Html.ListBox

· @Html.Hidden

· @Html.Display

· @Html.Editor

· @Html.ActionLink

· @Html.BeginForm

· @Html.Label

1. @Html.TextBox

TextBox() helper method is a loosely typed expansion method that is related to creating a textbox(<input type=”text”>) element in razor view.

@Html.TextBox() is a function that comes from the “System.Web.Mvc.Html” namespace, which returns the type MvcHtmlString.

TextBox() Method Parameter

MvcHtmlString Html.TextBox(string fname, string lname, object htmlAttributes)

Example of TextBox() in Razor view

@Html.TextBox("txtEmplpyeeName", "", new { @class = "form-control" })

Html Result

<input class="form-control" id="txtUserName" name="txtEmplpyeeName" type="text" value="">

2. @Html.Password()

We can utilize this HTML helper class as the input to create HTML elements. This helper method function is a loosely typed expansion method that is applied to define the textbox(<input type=”password”>) factor in razor view.

We can use the @Html.Password() method within the “System.Web.Mvc.Html” namespace. Its return type is “MvcHtmlString”.

Password() Method With Parameters

MvcHtmlString Html.Password(string fname, string lname, object htmlAttributes)  

How to define Password() Helper in Razor view

@Html.Password("Password", "", new { @class = "form-control" }

Html Result

<input class="form-control" id="Password" name="Password" type="password" value="">

3. @Html.TextArea()

This HTML helper function is a loosely typed expansion function method which we can use to create a TextArea (<textarea column="40" id="Address" name="Address" rows="4"> </textarea>) element in razor view as per the requirement.

We can declare the @Html.TextArea() method within the “System.Web.Mvc.Html” namespace. Its return type is “MvcHtmlString”.

TextArea() Method With Its Parameters:

MvcHtmlString Html.TextArea(string fname, string lname, object htmlAttributes)

Syntax to Create TextArea() Helper in Razor view

@Html.TextArea("Address", " ", new { @class = "form-control",id="IdAdd" })

Html Result

<textarea class="form-control" cols="40" id="IdAdd" name="Address" rows="4"> </textarea>

4. @Html.CheckBox()

We can utilize this HTML helper class to define the HTML elements.This method is a loosely typed expansion function method that can define the CheckBox(<input type="checkbox" >) element in razor view.

The declaration of @Html.CheckBox() method can be made within the “System.Web.Mvc.Html” namespace, and its return type is “MvcHtmlString”.

CheckBox() Method Signature

MvcHtmlString CheckBox(string name, bool isChecked, object htmlAttributes)  

How to Use CheckBox() Helper in Razor View

@Html.CheckBox("Music")

How to Set CheckBox() Default as Checked

@Html.CheckBox("Sports", true)

Html Result

<input checked="checked" id="Sports" name="Sports" type="checkbox" value="true">  

<input id="Dancing" name="Music" type="checkbox" value="false">

5. @Html.RadioButton()

We can use this HTML.RadioButton() Helper method using the class to define the HTML elements. This is the loosely typed expansion method function which we can define as input type to select the (<input type="radio" >) element in razor view.

We can declare the @Html.RadioButton() method within the “System.Web.Mvc.Html” namespace, and its return type is “MvcHtmlString”.

RadioButton() Method Parameter

MvcHtmlString RadioButton(string type, object value, bool isChecked, object htmlAttributes)

Example to Use RadioButton() Helper in Razor View : Male and Female Gender

@Html.RadioButton("Gender", "Male", false, new { id = "male" }) Male  

@Html.RadioButton("Gender", "Female", true, new { id = "female" }) Female

How to set RadioButton() default as checked

@Html.RadioButton("Gender", "Male", true, new { id = "male" }) Male

Html Result

<input checked="checked" id="male" name="Gender" type="radio" value="Male">    

<input id="female" name="Gender" type="radio" value="Female">

6. @Html.DropDownList()

We can use this HTML helper to define the DropDownLisT() list. This is the loosely typed extension method function which we can define as a DropDownList(<select id="" name="">) element in razor view with a particular name, along with list items and HTML attributes.

@Html.DropDownList() method is within the “System.Web.Mvc.Html” namespace and its return type is “MvcHtmlString”.

DropDownList() Method With Its Parameters

MvcHtmlString Html.DropDownList(string name, IEnumerable<SelectLestItem> selectList, string optionLabel, object htmlAttributes)  

We Can Use DropDownlist() Helper in Razor View With This Syntax

@{  

IEnumerable<string> strList = new List<string> { "MBA", "MCA", "MSC", "MCOM" };  

}  

@Html.DropDownList("ddlCourse", new SelectList(strList, strList.FirstOrDefault()), "--Select Course----")

Html Result

<select id="ddlCourse" name="ddlCourse">    

<option value="">--Select Course----</option>    

<option selected="selected">MBA</option>   

<option>MCA</option>    

<option>MSC</option>    

<option>MCOM</option>    

</select>

7. @Html.ListBox()

With this HTML helper class, we can specify the HTML elements. ListBox() helper function is a loosely typed expansion method which we can use to create ListBox(<select id="" multiple="multiple" name="">) element in razor view with particular name, its list items, and HTML attributes.

We can use the @Html.ListBox() method within the “System.Web.Mvc.Html” namespace and its return type is “MvcHtmlString”.

ListBox() Method Parameter

MvcHtmlString Html.ListBox(string name, IEnumerable<SelectLestItem> selectList, string optionLabel, object htmlAttributes)

Below Is the Example to Define the  ListBox() Helper in Razor View

@Html.ListBox("Select Skills",new List<SelectListItem> {    

new SelectListItem{ Text="ASP.NET Core",Value="1" },    

new SelectListItem{ Text="MVC",Value="2" },    

new SelectListItem{ Text="C#",Value="3" },    

new SelectListItem{ Text="Azure",Value="4" }    

})

Html Result

<select id="Select_Skills" multiple="multiple" name="Select Skills">    

<option value="1">ASP.NET Core</option>    

<option value="2">MVC</option>    

<option value="3">C#</option>    

<option value="4">Azure</option>   

</select>

8. @Html.Label()

This HTML helper class can help create HTML elements. The Label() helper function is a loosely typed expansion method that we can set to create a Label(<label>) element in razor view.

We can use the @Html.Label() method within the “System.Web.Mvc.Html” namespace and its return type is “MvcHtmlString”

Label() Method Parameter

MvcHtmlString Html.Label(string name, string value, object htmlAttributes)

We Can Use Label() Helper in Razor View

@Html.Label("Employee Name ")

Html Result

<label for="Employee_Name_">Employee  Name </label>

9. @Html.ActionLink()

Using this HTML helper class, we can define to create HTML elements. The ActionLink() helper function can be considered as a loosely typed expansion method which we can use to set a Label(<a href="/"> element in razor view.

@Html.ActionLink() method within the “System.Web.Mvc.Html” namespace. And its return type is “MvcHtmlString”.

ActionLink() Method Parameter

MvcHtmlString ActionLink(string linkTextname, string actionName, object routeValues, object htmlAttributes);  

How to Use ActionLink() Helper in Razor view

@Html.Label("Employee Name ")

Html Result

<a href="/Home/About">Please go to About Here</a>

10. @Html.BeginForm()

We can use this HTML helper class to create the HTML elements. The BeginForm() helper function is a loosely typed expansion method that we can use to define a web form (<form action="/" method="post">) element in razor view.

@Html.BeginForm() method we can use within the “System.Web.Mvc.Html” namespace. Its return type is “MvcHtmlString”.

BeginForm() Parameter  

MvcHtmlString ActionLink(string linkText, string actionName, object routeValues, object htmlAttributes);  

How to Use BeginForm() Helper in Razor view

@using (Html.BeginForm("Index", "Home", FormMethod.Post))  

{  

// Please write your source code here.  

}

Html Result

<form action="/" method="post">

</form>