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.

Post Graduate Program: Full Stack Web Development

in Collaboration with Caltech CTMEEnroll Now
Post Graduate Program: Full Stack Web Development

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

New Course: Full Stack Development for Beginners

Learn Git Command, Angular, NodeJS, Maven & MoreEnroll Now
New Course: Full Stack Development for Beginners

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

Full Stack Web Developer Course

To become an expert in MEAN StackView Course
Full Stack Web Developer Course

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.

Free Course: Programming Fundamentals

Learn the Basics of ProgrammingEnroll Now
Free Course: Programming Fundamentals

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.

Full Stack Java Developer Course

In Partnership with HIRIST and HackerEarthEXPLORE COURSE
Full Stack Java Developer Course

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>

Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!

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.

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 Web Development Certification Course to further improve your career prospects.

About the Author

SimplilearnSimplilearn

Simplilearn is one of the world’s leading providers of online training for Digital Marketing, Cloud Computing, Project Management, Data Science, IT, Software Development, and many other emerging technologies.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.
  • *According to Simplilearn survey conducted and subject to terms & conditions with Ernst & Young LLP (EY) as Process Advisors