DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Frameworks
  4. Working With Built-in HTML Helper Classes in ASP.NET MVC

Working With Built-in HTML Helper Classes in ASP.NET MVC

This article will show you how to use Built-In HTML Helper Classes in ASP.NET MVC.

Anoop Kumar Sharma user avatar by
Anoop Kumar Sharma
CORE ·
May. 26, 16 · Tutorial
Like (3)
Save
Tweet
Share
127.25K Views

Join the DZone community and get the full member experience.

Join For Free

In this Article, we will learn how to use the Built-In HTML Helper Classes in ASP.NET MVC. In previous ASP.NET MVC Tutorials, we saw,

  • Creating First Application In ASP.NET MVC
  • Pass Parameter Or Query String In Action Method In ASP.NET MVC
  • Passing Data From Controller To View In ASP.NET MVC
  • Strongly Typed View Vs Dynamically Typed View In ASP.NET MVC

Using the HTML Helper class, we can create HTML Controls programmatically. HTML Helpers are used in View to render HTML content. HTML Helpers (mostly) is a method that returns a string. It is not mandatory to use HTML Helper classes for building an ASP.NET MVC application. We can build an ASP.NET MVC application without using them, but HTML Helpers helps in the rapid development of a view. HTML Helpers are more lightweight as compared to ASP.NET Web Form controls as they do not use ViewState and do not have event models.

HTML Helpers are categorized into three types:

  1. Inline HTML Helpers
  2. Built-in HTML Helpers
  3. Custom HTML Helpers

In this Article, we will cover Built-In HTML Helpers. We will see Inline and Custom HTML Helpers in the upcoming article of this series.

Built-in HTML Helpers are further divided into three categories:

  1. Standard HTML Helpers
  2. Strongly Typed HTML Helpers
  3. Templated HTML Helpers

1. Standard HTML Helpers

Standard HTML Helpers are used to render the most common type of HTML controls like TextBox, DropDown, Radio buttons, Checkbox etc. Extension methods of HTML Helper classes have several overloaded versions. We can use any one according to our requirement. Let’s see some of the Standard HTML Helpers:

Form: For creating the Form element, we can use BeginForm() and EndForm() extension method.

The BeginForm helper implements the IDisposable interface, which enables us to use the using keyword.

Label: The Label method of HTML helper can use for generating label element. Label extension method have 6 overloaded versions.

TextBox: The TextBox Helper method renders a textbox in View that has a specified name. We can also add attributes like class, placeholder etc. with the help of overloaded method in which we have to pass objects of HTML Attributes.

We can also set the value In Textbox by passing a value in the TextBox extension method.

TextArea: The TextArea Method renders <textarea> element on view.

RadioButton: RadioButton can be rendered in the view using the RadioButton Helper method. In the simplest form, RadioButton Helper method takes three parameters i.e. name of the control, the value, and the Boolean value for selecting the value initially.

CheckBox: The CheckBox helper method renders a checkbox and has the name and id that you specify.

In the above example, did you notice an additional input element? In case if you unchecked the checkbox or checkbox value not selected then you will get the value from the hidden field.

DropDownList: The DropDownList helper renders a drop down list.

Password: The Password Helper method renders the input type as password.

Hidden: The Hidden Helper method renders a Hidden field.

2. Strongly Typed Helper Method

Just like Standard Helper, we have several strongly typed methods.

Html.TextBoxFor(), Html.TextAreaFor(), Html.DropDownListFor(), Html.CheckboxFor(), Html.RadioButtonFor(), Html.ListBoxFor(), Html.PasswordFor(), Html.HiddenFor(), Html.LabelFor(), etc.

Strongly Typed Helper requires lambda expressions.To use Strongly Typed Helper method, we first have to make Strongly Typed View.

Let’s create a simple example:

Create an empty MVC Application and add a Student class in the model.

public int  RollNo {  get ;  set ; }
public string  Name {  get ;  set ; }
public string  Gender {  get ;  set ; }
public string  City {  get ;  set ; }
[ DataType ( DataType .MultilineText)]
public string  Address {  get ;  set ; }

In the Student class, I have added DataType attribute on the Address property. I have added this attribute for showing a Templated HTML Helper example along with a strongly Typed Helper method example. DataTypeAttribute class is present in the System.ComponentModel.DataAnnotations namespace.

Now Add an empty controller and Name it as HomeController.

public ActionResult Index()
public ActionResult Index( Student stud)

Right click on the Index Action method for the get request and click on Add View. Select Student Model class and Select empty template. Click on Add.

Go to View and add the following code. I am not going to use any scaffolding template for this example.

@model  StronglyTypedHTMLHelper.Models. Student
< meta name ="viewport" content ="width=device-width" />
@ using (@Html.BeginForm( "Index" , "Home" , FormMethod .Post)){
< tr >< td > @ Html.LabelFor(m=>Model.RollNo) </ td >< td > @ Html.TextBoxFor(m=>Model.RollNo) </ td ></ tr >
< tr >< td > @ Html.LabelFor(m => Model.Name) </ td >< td > @ Html.TextBoxFor(m => Model.Name) </ td ></ tr >
< tr >< td > @ Html.LabelFor(m => Model.Gender) </ td >< td > Male: @ Html.RadioButtonFor(m => m.Gender,  "Male" ,  new  { @checked= "checked" })Female: @ Html.RadioButtonFor(m => m.Gender,  "Female" ,  true ) </ td ></ tr >
< tr >< td > @ Html.LabelFor(m => Model.City) </ td >< td > @ Html.TextBoxFor(m => Model.City) </ td ></ tr >
< tr >< td > @ Html.LabelFor(m => Model.Address) </ td >< td > @ Html.EditorFor(m => Model.Address) </ td ></ tr >
< tr >< td ></ td >< td >< input type ="submit" value ="Submit"/></ td ></ tr >

In the above code, we have bounded helpers with the model property using lambda expressions. EditorFor is a Tempate HTML Helper which will generate HTML elements based upon the data type of the Address property of the Student class.

Preview:

Fill the form and click on submit. The request comes to Index Action method with [HTTPPost] attribute, from here we can get all posted values from the form and we can use that student object for any kind of Data Operations.

3. Template Helper Method

These methods are very flexible and generate the HTML element based on the properties of the model class. We have already seen an EditorFor Helper method in the previous example, which generates TextArea element because we have declared MultiLine Datatype on Address property. Display, DisplayFor, Editor, and EditorFor are the examples of Template Helper method.

Hope you like it. Thanks.

[Download Source Code via Google Drive]

HTML ASP.NET MVC ASP.NET

Published at DZone with permission of Anoop Kumar Sharma, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Taming Cloud Costs With Infracost
  • OpenID Connect Flows
  • Spring Cloud: How To Deal With Microservice Configuration (Part 1)
  • Problems of Cloud Cost Management: A Socio-Technical Analysis

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: