Click here to Skip to main content
13,093,720 members (59,684 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


4 bookmarked
Posted 8 Jul 2014


, 8 Jul 2014
Rate this:
Please Sign up or sign in to vote.

What are HTML Helpers in ASP.NET MVC?

Think of HTML Helper in ASP.NET MVC as a method returning a string. So, what can that string be? The returning string is basically an HTML string that can render a HTML tag. For example, a link, an image or other form elements.

Developers who have worked with ASP.NET Web Forms can map HTML helper to Web Form Controls because both serve the same purpose. But HTML helpers are comparatively lightweight because they don’t have view state and event model like Web Form Controls. Along with the built in HTML helpers, we can also create our own custom helpers to fulfill our specific needs.

What Standard HTML Helpers Render?

For ASP.NET MVC developers, understanding of standard HTML Helpers is highly desirable. Standard HTML Helpers can be categorized as follows:

  • URL Helpers
    • HTML Links
    • Image Links
  • HTML Form Elements

MVC URL Helpers

Rendering a link in HTML is a very common requirement. There are two different types of URL Helpers available in ASP.NET MVC, i.e., for HTML Links and Image Links. Let’s discuss both of them one by one.

1. HTML Links

Html.ActionLink() Helper is used to render an HTML link in a View. ActionLink() method actually links to a Controller action from inside a View.

@Html.ActionLink("Web Development Tutorial Company Profile", "CompanyInfo")

The above line of code is an example of Html.ActionLink() method that renders an HTML anchor tag and linking to a Controller action “CompanyInfo” in a View as follows:

<a href="/Site/CompanyInfo">Web Development Tutorial Company Profile</a>

2. Image Links

In order to generate an Image Link, Url.Action() helper is available.

<a href="@Url.Action("ViewDetails")">
<img src="../Images/ViewDetails.jpg" alt="View Details"></a>

Note: Although Image Link is doing almost the same thing, i.e., linking to a Controller action “ViewDetails” and rendering an HTML anchor tag with additional image. But we can’t use Html.ActionLink() helper for this purpose because Html.ActionLink() helper, by default, expects link text to encode, so we can’t pass an <img> tag to it.

For ASP.NET MVC Interview Questions and Answers for Beginners as well as Experienced developers, click here.

MVC HTML Form Elements

In order to render HTML Form elements, ASP.NET MVC provides a number of HTML helpers as follows:

@Html.TextBox("strStudentName") renders:

<input id="strStudentName" name="strStudentName" type="text" value="" />

@Html.TextArea("strAcademicBackground", "", 10, 50, null) renders:

<textarea cols="50" id="strAcademicBackground" 

name="strAcademicBackground" rows="10">

@Html.Password("strPassword") renders:

<input id="strPassword" name="strPassword" type="password" />

@Html.RadioButton("radGender", "Male", true) renders:

<input checked="checked" id="radGender" 

name="radGender" type="radio" value="Male" />

@Html.CheckBox("chkDuesPaid", true) renders:

<input checked="checked" id="chkDuesPaid" 

name="chkDuesPaid" type="checkbox" value="true" />
<input name="chkDuesPaid" type="hidden" value="false" />

@Html.DropDownList ("ddlLevel", new SelectList(new [] 
{"1st Grade", "2nd Grade", "3rd Grade"})) renders:

<select id="ddlLevel" name="ddlLevel">
     <option>1st Grade</option>
     <option>2nd Grade</option>
     <option>3rd Grade</option>

In a later post on this blog, we will explore how to create our own Custom HTML Helper for ASP.NET MVC application.

Other Related Articles

The post ASP.NET MVC HTML Helpers – A MUST KNOW appeared first on Web Development Tutorial.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Imran Abdul Ghani
Software Developer (Senior) Emaratech
United Arab Emirates United Arab Emirates
Imran Abdul Ghani has more than 10 years of experience in designing/developing enterprise level applications. He is Microsoft Certified Solution Developer for .NET(MCSD.NET) since 2005. You can reach his blogging at WCF Tutorials, Web Development, SharePoint for Dummies.

You may also be interested in...

Comments and Discussions

GeneralNice Pin
Thin July25-Feb-15 16:32
professionalThin July25-Feb-15 16:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.170813.1 | Last Updated 8 Jul 2014
Article Copyright 2014 by Imran Abdul Ghani
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid