ASP.NET MVC HTML Helpers – A MUST KNOW

By | July 6, 2014
2 Comments

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 be that string? The returning string is basically a 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 serves the same purpose. But HTML helper 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 renders?

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 link to a Controller action from inside a View.

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

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 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, expect 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.
Career skills to jumpstart your future.

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>
</select>
In later post on this blog we will explore how to create our own Custom HTML Helper for ASP.NET MVC application.

ASP.NET Core with Angular 2
Build a Real-world App with ASP.NET Core and Angular 2 (4+)

  • Build a full-stack web app with ASP.NET Core, Entity Framework Core and Angular 2 & 4.
  • Implement a Clean & Decouple Architecture.
  • Properly implement the Repository and Unit of work patterns.
  • Troubleshoot common runtime errors.
  • Test APIs using PostMan.
  • Integrate ASP.NET MVC/Core with AngularJS.
  • Understand and apply the Dependency Inversion Principle (DIP).
  • Use the new dependency injection feature in ASP.NET Core.
  • Build APIs with ASP.NET Core
  • and more….
More Web Development and related Tutorials

Step forward in 2017: Build in-demand career skills with Coursera

Top 10 Interview Questions and Answers Series: