HtmlHelper Methods in ASP.NET MVC

Introduction

Helper methods are used to render HTML in the view. Helper methods generate HTML output that is part of the view. They provide an advantage over using the HTML elements since they can be reused across the views and also require less coding. There are several built-in helper methods that are used to generate the HTML for some commonly used HTML elements, like form, checkbox, dropdown list, etc. Also, we can create our own helper methods to generate custom HTML. First, we will see how to use the built-in helper methods and then we will see how to create custom helper methods.

Standard HtmlHelper methods

Some of the standard helper methods are,

• ActionLink: Renders an anchor.
• BeginForm : Renders HTML form tag
• CheckBox: Renders check box.
• DropDownList: Renders drop-down list.
• Hidden: Renders' hidden field
• ListBox: Renders list box.
• Password: Renders TextBox for password input
• RadioButton: Renders radio button.
• TextArea: Renders text area.
• TextBox: Renders text box.

Since these helper methods are defined in the HtmlHelper class we need to qualify these methods using the HTML property of the view. For example to use the BeginForm method we need to qualify it with the HTML property and pass in the required arguments. HTML is a property of the view that points to the HtmlHelper class instance. All extension methods are defined in the System.Web.Mvc.Html namespace. There is a strongly typed version of the HtmlHelper class defined as HtmlHelper<T>. HtmlHelper<T> is a subclass of the HtmlHelper class.

@using (Html.BeginForm("Login", "Home"))
{
} 

The elements we defined between the braces above will be part of the form tag and will be posted to the server on the form submission. The following code will generate a TextBox element inside a form element. When the submit button is clicked the form will be posted to the Login method of the Home controller.

@using (Html.BeginForm("Login", "Home")) {     
    @Html.TextBox("name");
    <input type="submit" value="submit" /> 
}

If we want to retrieve the value entered by the user in the name TextBox in our action method we just need to declare an action method with an argument with the same name as the TextBox. The action method below is called after the submit button is clicked on the form and we can see that the name argument contains the user-entered value, in this case ashish. It is important to note that the argument's name should be the same as the name of the HTML element.

Creating custom HTML Helpers
 

Using Extension methods

Helper methods return strings or any other output so we can create new helper methods if the existing helper methods are not sufficient for our requirement(s). The extension method below renders the label having the background color as blue. We have defined a static Label method inside a static class CustomExtensions. So Label is an extension method on the HtmlHelper class.

public static class CustomExtensions
{
    public static IHtmlString Label(this HtmlHelper helper)
    {
        return new HtmlString("<label style=\"background-color:blue\">Name</label>");
    }
}

Since we have defined the extension method on the HtmlHelper class we can use it like a standard HTML helper method, we can call the Label() method on the HTML property of the view. To use the helper method we just need to use the line below in our view.

@Html.Label()

Using Static methods

We have used an extension method above. Instead of using an extension method, we can use a static method to implement a helper method as in the following.

public class CustomExtensions  
{  
    public static IHtmlString Label()  
    {  
        return new HtmlString("<label style=\"background-color:blue\">Name</label>");  
    }  
}  

We can call it in the view as.

@CustomExtensions.Label()