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.

Here's How to Land a Top Software Developer Job

Full Stack Developer - MERN StackExplore Program
Here's How to Land a Top Software Developer Job

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

Html_helpers_in_MVC_1

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program
Learn the Ins & Outs of Software Development

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

Html_helpers_in_MVC_2.

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

Html_helpers_in_MVC_3

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program
Learn the Ins & Outs of Software Development

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

Html_helpers_in_MVC_4.

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

Html_helpers_in_MVC_5.

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program
Learn the Ins & Outs of Software Development

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

Html_helpers_in_MVC_6.

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

Html_helpers_in_MVC_7.

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program
Learn the Ins & Outs of Software Development

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

Html_helpers_in_MVC_8

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
Learn the Ins & Outs of Software Development

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.

Our Software Development Courses Duration And Fees

Software Development Course typically range from a few weeks to several months, with fees varying based on program and institution.

Program NameDurationFees
Caltech Coding Bootcamp

Cohort Starts: 16 Dec, 2024

6 Months$ 8,000
Automation Test Engineer Masters Program

Cohort Starts: 18 Dec, 2024

8 months$ 1,499
Full Stack Java Developer Masters Program

Cohort Starts: 18 Dec, 2024

7 months$ 1,449
Full Stack (MERN Stack) Developer Masters Program

Cohort Starts: 8 Jan, 2025

6 Months$ 1,449