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

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=""> 

Output

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program

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=""> 

Output

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>

Output

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program

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">  

Output

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"> 

Output

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program

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> 

Output

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> 

Output

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program

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> 

Output

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>

Conclusion

We hope this article helped you understand  HTML helpers. In this article, we discussed the concept of the various HTML helpers' methods and functions, along with the syntax and outputs that will be helpful to professional developers from Java and .net backgrounds, application architectures, and other learners looking for information on JavaScript events.

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program

To enhance your skills and upgrade, you can sign up on our SkillUp platform, a Simplilearn initiative. The platform offers numerous free online courses to help with the basics of multiple programming languages, including JavaScript alongside pursuing other specialized professional courses. You can also opt for our Full Stack Developer - MERN Stack to further improve your career prospects.