blog

Home / DeveloperSection / Blogs / HTML Helpers in MVC

HTML Helpers in MVC

Vijay Shukla3942 26-Sep-2013

In this blog I am trying to explain the concept of HTML Helpers

In MVC, HTML helpers are much like traditional ASP.NET Web Form controls.  Just like web form controls in ASP.NET, HTML helpers are used to modify HTML. But HTML helpers are more lightweight. Unlike Web Form controls, an HTML helper does not have an event model and a view state.

In most cases, an HTML helper is just a method that returns a string.

With MVC, you can create your own helpers, or use the built in HTML helpers.

Standard HTML Helpers

MVC includes standard helpers for the most common types of HTML elements, like HTML links and HTML form elements.

HTML Links

The simplest way to render an HTML link in is to use the HTML.ActionLink() helper.

In MVC, the Html.ActionLink() don’t link to a view. It creates a link to a controller action.

Razor Syntax:

@Html.ActionLink("Go To Home", " Home ")

The Html.ActionLink() helper as many properties:

Property                                Description

.linkText                                               The link text (label)

.actionName                                      The target action

.routeValues                                      The values passed to the action

.controllerName                               The target controller

.htmlAttributes                                The set of attributes to the link

.protocol                                              The link protocol

.hostname                                          The host name for the link

.fragment                                            The anchor target for the link

Note: You can pass values to a controller action. For example, you can pass the id of a database record to a database edit action:

Razor Syntax C#:
@Html.ActionLink("Edit Record", "Edit", new {Id=3}) 
Razor Syntax VB:
@Html.ActionLink("Edit Record", "Edit", New With{.Id=3})
The Html.ActionLink() helper above, outputs the following HTML:
<a href="/Home/Edit/3">Edit Record</a>

Updated 18-Sep-2014

Leave Comment

Comments

Liked By