Different Types of HTML Helpers in ASP.NET MVC
Last Updated :
24 Aug, 2022
ASP.NET provides a wide range of built-in HTML helpers that can be used as per the user's choice as there are multiple overrides available for them. There are three types of built-in HTML helpers offered by ASP.NET.
1. Standard HTML Helper
The HTML helpers that are mainly used to render HTML elements like text boxes, checkboxes, Radio Buttons, and Dropdown lists, etc. are called Standard HTML helpers.
List of Standard HTML Helpers
@Html.ActionLink() - Used to create link on html page
@Html.TextBox() - Used to create text box
@Html.CheckBox() - Used to create check box
@Html.RadioButton() - Used to create Radio Button
@Html.BeginFrom() - Used to start a form
@Html.EndFrom() - Used to end a form
@Html.DropDownList() - Used to create drop down list
@Html.Hidden() - Used to create hidden fields
@Html.label() - Used for creating HTML label is on the browser
@Html.TextArea() - The TextArea Method renders textarea element on browser
@Html.Password() - This method is responsible for creating password input field on browser
@Html.ListBox() - The ListBox helper method creates html ListBox with scrollbar on browser
HTML
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Built-in HTML Helper</title>
</head>
<body>
<div>
<h3>Label example</h3>
@Html.Label("firstName", "First Name")
<h3>Text Box Example</h3>
@Html.TextBox("txtFirstName", "", new { @class = "form-control", placeholder = "First Name" })
<h3>Text Area Example</h3>
@Html.TextArea("address", new { @class = "form-control", rows = "5" })
<h3>password Example</h3>
@Html.Password("password", " ", new { @class = "form-control" })
<h3>Radio Button Example</h3>
@Html.RadioButton("MaritalStatus", "Married", new { id = "IsMarried" }) Married
<h3>Check Box Example</h3>
@Html.CheckBox("htmlSkill") HTML 5
<h3>List Box Example</h3>
@Html.ListBox("Skills", new List<SelectListItem> {
new SelectListItem { Text="ASP.NET",Value="1"},
new SelectListItem { Text="MVC",Value="2"},
new SelectListItem { Text="SQL Server",Value="3"},
new SelectListItem { Text="Angular",Value="4"},
new SelectListItem { Text="Web API",Value="5"}
}, new { @class = "form-control" })
<h3>drop down List Example</h3>
@Html.DropDownList("Gender", new List<SelectListItem> {
new SelectListItem {Text="Select Gender",Value="-1" },
new SelectListItem {Text="Male",Value="1" },
new SelectListItem {Text="Female", Value="2" }
}, new { @class = "custom-select" })
</div>
</body>
</html>
2. Strongly-Typed HTML Helper
The Strongly-Typed HTML helper takes a lambda as a parameter that tells the helper, which element of the model to be utilized in the typed view. The Strongly typed views are used for rendering specific sorts of model objects, rather than using the overall View-Data structure.
List of strongly-Typed HTML Helper
@Html.HiddenFor()
@Html.LabelFor()
@Html.TextBoxFor()
@Html.RadioButtonFor()
@Html.DropDownListFor()
@Html.CheckBoxFor()
@Html.TextAreaFor()
@Html.PasswordFor()
@Html.ListBoxFor()
The functionality of all of these are the same as above but they are used with modal classes. Now, as we know we need a model class to use strongly typed HTML. So firstly we will add a model class as follows
C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace HTML_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
}
Now write the following code in the controller. And then add a view with the default properties.
C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using HTML_Helper_Demo.Models;
namespace HTML_Helper_Demo.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(Employee emp)
{
return View();
}
}
}
Now write the HTML as follows:
HTML
@using HTML_Helper_Demo.Models
@model Employee
@{
ViewBag.Title = "Index";
}
<div>
<h3>Label Example</h3>
@Html.LabelFor(model => model.Name, new { @class = "label-control" })
<h3>Text box Example</h3>
@Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
<h3>Text Box Example 2</h3>
@Html.TextAreaFor(model => model.Address, new { @class = "form-control", rows = "5" })
<h3>Password for example</h3>
@Html.PasswordFor(model => model.Password, new { @class = "form-control" })
<h3>Radio Button Example</h3>
@Html.RadioButtonFor(model => model.Gender, true, new { id = "male-true" })
@Html.Label("male-true", "Male")
@Html.RadioButtonFor(model => model.Gender, false, new { id = "female-true" })
@Html.Label("female-true", "Female")
<h3>Check Box Example</h3>
@Html.CheckBoxFor(model => model.AgreeTerm)
<h3>List Box Example</h3>
@Html.ListBoxFor(model => model.skills, new SelectList(Enum.GetValues(typeof(skills))),
new { @class = "form-control" })
<h3>Drop Down List Example</h3>
@Html.DropDownListFor(model => model.city, new SelectList(Enum.GetValues(typeof(city))),
"Select City", new { @class = "form-control" })
</div>
The output will be as follows:
3. Templated HTML Helper
The templated HTML Helper is used for data display and input. It generates HTML automatically as per model property and it can generate HTML for a complete model with a single tag. These are divided into two categories
- Display Template
- Editor Template
List of Templated HTML Helpers
Display
@Html.Display()
@Html.DisplayFor()
@Html.DisplayName()
@Html.DisplayNameFor()
@Html.DisplayText()
@Html.DisplayTextFor()
@Html.DisplayModelFor()
Edit / Input
@Html.Editor()
@Html.EditorFor()
@Html.EditorForModel()
Now, here we can use the previously created model class and then we should write this code in the controller
C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using HTML_Helper_Demo.Models;
namespace HTML_Helper_Demo.Controllers
{
public class HomeController : Controller
{
public ActionResult Details()
{
//Here we are hardcoded the Employee Details
//In Realtime you will get the data from any data source
Employee employee = new Employee()
{
EmpId = 1,
Name = "Rishabh Tyagi",
Gender = "Male",
city = city.Delhi,
skills = skills.WebAPI,
Address = "lajpat Nagar",
AgreeTerm = true
};
ViewData["EmployeeData"] = employee;
return View();
}
}
}
Now add the view with all the default properties and write the following code
HTML
@{
ViewBag.Title = "Details";
}
<fieldset>
<legend>Employee Details</legend>
@Html.Display("EmployeeData")
</fieldset>
The output will be as follows
Similar Reads
Different ways to add media in HTML page
These days one of the most important things on the web is media. So all the developers and websites owners want to make their websites attractive and interactive. For they need to include media in their sites. There are lots of media types, audio, video, etc. There are different ways to include thos
2 min read
Different kinds of Doctype available in HTML5
In this article, we will know the Doctype & its types in HTML5. Before learning the different kinds of Doctypes in HTML5, you should be first familiar with the term "Doctype". When you inspect any website, you may have noticed that before the starting of <html> tag, <!DOCTYPE html> i
2 min read
Different ways to apply colors in an HTML document
A colorful website or application is more attractive rather than a black-and-white website. In this article, we will go through all the different ways to apply colors in HTML documents. Like other HTML tags, there is no special tag to apply colors in HTML documents. However, using the style attribut
5 min read
Difference between text() and html() method in jQuery
Text() Method: This method returns the text content of the selected elements. It overwrites the content of all the matches element while setting the content. Syntax: To return text content:$(selector).text()To set text content:$(selector).text(content)To set the text content using a function:$(selec
2 min read
What is usually included in the header of an HTML document ?
The <header> is a tag introduced in HTML5. In this article, we are going to discuss the use cases of header tags and what is usually included in the header of an HTML document. The <head> section in HTML usually includes the document's title (<title>), which appears in the browser'
3 min read
Difference between <i> and <em> tag of HTML
The <i> and <em> tags in HTML both style text as italic, but they serve different purposes. The <i> tag is used for visual styling without semantic meaning, while <em> conveys emphasis and adds semantic importance, improving accessibility and meaning in content.Note: The <
3 min read
Difference between index.ejs and index.html
What is HTML? HTML (Hypertext Markup Language) is used to design the structure of a web page and its content. HTML is actually not technically programming languages like C++, JAVA, or python. It is a markup language, and it ultimately gives declarative instructions to the browser. When a web page is
4 min read
Explain use of Meta tags in HTML
Meta Tag(<meta>) is a HTML component that gives the metadata about a HTML document. MetaData can be characterized as data that gives the data of different information or basic information about information. It is an empty tag, for example, it just has an initial tag and no end tag. They are al
4 min read
Why to Use ASP.NET Server Controls in Place of HTML Controls?
Basically HTML controls are client side controls and ASP.NET controls are server side controls. We prefer ASP.NET controls as our web controls. As with the HTML controls we can't maintain the state ie the data is lost, we can say it as it does not provide state management. And while writing the code
4 min read
Is HTML elements are same as tags or not ?
HTML elements and tags are a lot different. Let's see what HTML elements and Tags actually are and their differences. The below image tells about HTML Elements and HTML Tags. HTML Tags: The starting and ending point parts of an HTML document are HTML Tags, which start with < (less than) and end w
2 min read