ASP.NET MVC: Creating Custom HTML Helper Methods

Introduction

In this article we will learn how to create custom HTML helper methods and the various ways of doing it in an ASP.NET MVC framework application. HTML helper methods play important role in developing the views of an ASP.NET MVC application. It is known that the ASP.NET MVC application is controller driven i.e. the controller is responsible for rendering the respective view, during this rendering process the controller internally takes care of executing the HTML Helper methods on the view.

As the name suggests these are simply helper methods which a developer can use to render the HTML elements like textbox, checkbox, form, validation summary, etc and also can call methods like Validate for validating a model, encode for HTML encoding a string, etc. Some of the built-in HTML Helper methods are listed below:

1. Html.ActionLink
2. Html.Validate
3. Html.ValidateFor<>
4. Html.TextBox
5. Html.TextBoxFor<>,  etc

By seeing the above list you will also notice that generic HTML Helper methods are also available. So what is the advantage of using these HTML helper methods?

1. Re-usability, the developer can use these helper methods across multiple views.
2. Less coding effort, the developer simply has to make a call to the HTML helper method for the view to be rendered with desired HTML content.
3. Extensibility, yes the developer can build his own HTML helper method which we will be learning through this article.
4. A means to call the server side method from a view or a partial view while rendering.

Creating Custom HTML Helper Methods

ASP.NET MVC framework allows you to write custom HTML Helper methods. HTML Helper methods will be written either in C# programming or in VB.NET as they will be executed on the server side. There are two prominent ways of doing it.

1. Static Method
2. Extension Method

In your ASP.NET MVC application create a separate library for the custom HTML helper methods. Add a .cs file to the library and name it as ContainerHelper.cs. In that file create two classes ContainerHelperStatic and ContainerHelperExtension. For illustration purposes I will create a custom HTML helper method to render a div container holding few HTML elements. The HTML helper method should basically accept the parameters required to build the HTML content and return a string value which should be the manipulated HTML content. I will provide samples using both static and extension methods in order to create custom HTML helper methods.

Static Method

If you want to create the HTML helper method using a static method then in the ContainerHelperStatic class create a static method called Container. Below is the C# programming code.

  public static string Container(string divCssClass, string labelText, string labelCss, string anchorUrl, string anchorText)
  {
      TagBuilder divTag = new TagBuilder("div");
      divTag.AddCssClass(divCssClass);
      TagBuilder labelTag = new TagBuilder("label");
      labelTag.AddCssClass(labelCss);
      labelTag.SetInnerText(labelText);
      TagBuilder anchorTag = new TagBuilder("a");
      anchorTag.MergeAttribute("href", anchorUrl);
      anchorTag.SetInnerText(anchorText);
      divTag.InnerHtml = string.Format("{0}<br/><br/><br/>{1}", labelTag.ToString(), anchorTag.ToString());
      return divTag.ToString();
  }

Extension Method

If you want to create the HTML helper method using an extension method then in the ContainerHelperExtension class create an extension method called Container. Below is the C# code.

  public static string Container(this HtmlHelper htmlHelper, string divCssClass, string labelText, string labelCss, string anchorUrl, string anchorText)
  {
              TagBuilder divTag = new TagBuilder("div");
              divTag.AddCssClass(divCssClass);
              TagBuilder labelTag = new TagBuilder("label");
              labelTag.AddCssClass(labelCss);
              labelTag.SetInnerText(labelText);
              TagBuilder anchorTag = new TagBuilder("a");
              anchorTag.MergeAttribute("href", anchorUrl);
              anchorTag.SetInnerText(anchorText);
              divTag.InnerHtml = string.Format("{0}<br/><br/><br/>{1}", labelTag.ToString(), anchorTag.ToString());
              return divTag.ToString();
  }

In the above code snippets you would notice a new class called TagBuilder. It is specifically introduced to facilitate developers in building the HTML content easily in ASP.NET MVC framework applications. This class is ingrained in the library System.Web.Mvc. So in order to use the TagBuilder class, reference of System.Web.Mvc library has to be added to the project.