Introduction

In this article we will try to understand HTML helper methods. We will also see how we can implement custom HTML helpers.

Background

People coming from the asp.net web forms background are used to putting the ASP.NET server control on the page using the toolbox. When we work with ASP.NET MVC application there is no toolbox available to us from where we can drag and drop HTML controls on the view. In MVC, if we want to create a view it should contain HTML code for specifying the mark up. MVC Beginners(specially with Web forms background) finds this a little troubling.

ASP.NET MVC team must have anticipated this problem and thus to ease this problem, the ASP.NET MVC framework comes with a set of HTML Helper methods. These helpers are simple functions that let the developer to specify the type of HTML needed on the view. This is done in C#. The final HTML will be generated by these functions at the runtime i.e. We don't have to worry about the correctness of generated HTML.

Using the code

Built in HTML Helpers

Lets look at how we can use various HTML helper methods. Lets try to create a simple contact us form that will ask the user for his name, email id and his query. we can design this form in simple HTML easily, let us see how we can utilize HTML helper to achieve the same.

In the above screenshot we can see that the HTML form is created using a HTML helper function, all the labels on the page are created using helper functions and all the textboxes are also created using helper functions. Now if we run the application and try to see the result:

If we want to control the HTML attributes of the generated HTML then we can use the overloaded version of the helper functions. Lets say in the above cove, we want to provide ID to all the labels.

If we run the application again and try to look at the generated HTML, we can see the ID values we have specified.

Following HTML helpers are built into the ASP.NET MVC framework:

Html.BeginForm

<code>Html.EndForm

<code>Html.TextBox

<code>Html.TextArea

<code>Html.Password

<code>Html.Hidden

<code>Html.CheckBox

<code>Html.RadioButton

<code>Html.DropDownList

<code>Html.ListBox

HTML Helpers for strongly typed views

If we are creating a strongly typed view then it is also possible to use the HTML helpers methods with the model class. Let us create a model for the contact us page:

Now let is create a strongly typed view for contact us page using the Html helpers.

These helper methods create the output HTML elements based on model properties. The property to be used to create the HTML is passed to the method as a lambda expression. It could also be possible to specify id, name and various other HTML attributes using these helper methods. Following HTML helpers are available to be used with strongly typed views:

Html.TextBoxFor

Html.TextAreaFor

Html.PasswordFor

Html.HiddenFor

Html.CheckBoxFor

Html.RadioButtonFor

Html.DropDownListFor

Html.ListBoxFor

Creating Custom HTML Helpers

If we want to create our own HTML helpers than that can also be done very easily. There are quite a few ways of creating custom helpers. lets look at all the possible methods.

Creating a static method

Writing an extension method

Using the @helper(razor only)

Let us try to create a simple HTML helper method which will create a marked HTML label. There is a new mark tag in HTML5 specifications. Let us try to create a label which create a label then mark it using the HTML5 mark tag.

Lets try to achieve this using all the above mentioned methods.

Creating a static method

In this approach we can simply create a static class with static method which will return the HTML string to be used at the time of rendering.

Note: By default these helpers will be available in the view they are defined in. If we want to use the razor created helpers in multiple views then we have to put all of them in one view and put that view file in App_Code directory. This way they will be usable from all the views.

Now we have the same html helper method written in 3 different ways, Let us create a simple view and try to use these helper methods.

Lets run the application and see the result:

Point of interest

In this article we looked at HTML helpers. We have also looked at how we can create custom HTML helpers. This article has been written from a beginner's perspective. I hope this has been informative.

Share

About the Author

I Started my Programming career with C++. Later got a chance to develop Windows Form applications using C#. Currently using C#, ASP.NET & ASP.NET MVC to create Information Systems, e-commerce/e-governance Portals and Data driven websites.

My interests involves Programming, Website development and Learning/Teaching subjects related to Computer Science/Information Systems. IMO, C# is the best programming language and I love working with C# and other Microsoft Technologies.

In the case of "Creating a static method", you missed on informing your so called "Absolute Beginners" how to compile that class or how to create a View from within the block of code that defines "Creating a static method". As I am unable to create a view from its block and hence link it to a View.

I am not sure what you mean by this. The helper classes can reside in the project like any other class.

Rehan Mehdi wrote:

how to create a View from within the block of code.... As I am unable to create a view from its block and hence link it to a View.

Still not clear on this question. The helper methods are meant to be consumed from the view. Why will this helper method create a view inside it. It can simply be used in any view like any other static C# method.

Hi Rahul
Thanks for this wonderful article it just blew me away and now I know certain things. I have a question though, sorry if it's trivial but after taking my time to study your examples i see you used an interface object in a fashion i don't readily recognize. This is the interface design:

Can you show sample html to position fields in view? Every code I have seen follow the basic placement of fields. If I have first name and last name fields I want to see sided by side NOT first name on one line and last name on another line.
Thank you

Can you provide a demo on how to position helpers in different areas of a view(screen)? I am tired of the straight down presentation of Helpers on screens. All the demos I have seen so far follow the straight down method.

Excellent demonstration!. I am VB programmer. I am currently learing C#, ASP.NET, MVC. I can really use the help of the community. I was actually not happy when I realized that MVC does not have toolbox. Your demo is exactly what I needed to start understanding MVC. Good Job and Thank you.