What are Html Helpers?

If you have already worked with Asp.Net web forms you can relate html helpers with the asp.net controls of web forms. Just like Asp.Net controls, html helpers render html controls on web page.

There is only one difference between Html Helpers and Asp.Net controls and its the basic difference between Asp.Net Web Forms and Asp.Net MVC i.e. no event model programming.

The ASP.NET MVC framework includes a standard set of helpers that you can use to render the most common types of HTML elements. For example, you can use the standard set of helpers to render HTML links and HTML text boxes.

Here is the list of standard Html Helpers which gets shipped with asp.net MVC.

• BeginForm() – Renders <form> element.
• CheckBox() – Renders check boxes.
• DropDownList() – Renders drop down list.
• EndForm() – End’s Form..
• Hidden() – Renders hidden fields.
• ListBox() – Renders list box.
• Password() – Renders text box of password type.
• RadioButton() – Renders radio buttons.
• TextArea() – Renders text area.
• TextBox() – renders plain text box.

To use these methods in your view , you need to just call these functions from a view page.

Eg: @Html.TextBox(“nameOfYourTextBox”).

The browser will load the text boxes for you.Also you can try other Html Helpers.

Creating custom Html Helpers:

Asp.Net MVC shifts with only standard html helpers. Often these html helpers are not enough in order to create rich user experience. For example there is no Grid view like helper. To overcome these limitations you can create your own Html Helpers.

Before discussing how to create custom Html Helpers, lets just dig into standard html helpers functioning.

Lets have a look at the syntax of TextBox Html Helper.

 @Html.TextBox(“Name”)

Lets try to deep dive into the syntax and notice some points.
1. We are not creating any objects for calling “TextBox” method. This means, “TextBox” method is a static method and name of the class would be “Html”.
2. The TextBox method is taking string argument.
3. The return type of this method should be encoded html, since we are rendering html
4. If we want to create our method , lets say MyTextBox, it should be called like as below
@Html.MyTextBox(“NameOfMyTextBox”)
For this we need to have source code so that we can include our method as a static in “Html” class.

But… we don’t have the source code!!! Now what ? Is this the end of world ? Fortunately NO… Microsoft has the work around for this.

“Problem of not having source code” could be resolved by using “Extension Methods”.

Extension Methods just Extends the class by a method. It gives you the freedom of adding methods to the classes for which you don’t have the source code. Fortunately, there is no keyword for creating extension method. You just need to pass the parameter of the class (class you want to extend by method) with a “this” keyword.

With all this knowledge in our arsenal, lets try to imagine how “MyTextBox” method should look like.

public static HtmlString MyTextBox (this Html helper, string name)
{
return new HtmlString();
}

the above code is created with the help of our imagination. We didn’t add any method body we have just returned the object of HtmlString.

However, its not correct. But its very much close to our imagination. So, Lets just try to refine our imagination and reach at correct conclusion.

1. There is no class named “Html”. The name of the class is “HtmlHelper”. “Html” is a property of the “View” of “HtmlHelper” type.

2. The body of the method is not correct. It should render a textbox. But now it will just return an empty Html String.

With above two points let’s rewrite “MyTextBoxMethod”.

public static MyTextBox( this HtmlHelper helper, string name)
{
string s = “<input type = \“text\” id =\“ + name + \” />”
return new HtmlString(s);
}

To use this extension method in your view , must ensure that you include the name space of the class where you added the above extension method.

That’s it for now…. will look at model binders next!