Creating an HTML Helper in ASP.NET MVC

Introduction

HTML Helper is just a method that returns the HTML content in a view. Developers can use HTML helpers to render standard HTML tags such as HTML <input>, <button>, <img> tags, and so forth. In ASP.NET, we have server controls, but in ASP.NET MVC, we have HTML helpers to render HTML in a browser.

Following is the list of HTML helper’s methods that are are present in ASP.NET MVC:

  • @Html.BeginForm
  • @Html.EndForm
  • @Html.TextBox
  • @Html.TextArea
  • @Html.Password
  • @Html.Hidden
  • @Html.CheckBox
  • @Html.RadioButton
  • @Html.DropDownList
  • @Html.ListBox

HTML Custom Helpers

Sometimes, a developer has a specific use case that isn’t possible to implement by the default HTML helpers; therefore, you can create your own helper. ASP.NET MVC provides a feature called a custom helper; you can use that to create as an HTML helper according to your requirements. Following are three ways to define a custom HTML helper:

  • Using Static Methods
  • Using Extension Methods
  • Using the @helper

Creating our own helper has the advantage that the page is cleaner and more readable. We can write a unit test for this particular HTML helper.

Creating an HTML Helper Using Static Methods

To demonstrate a static HTML helper, I have created a static class named CustomHTMLHelper with a static method in a MVC application; this method will return the MvcHtmlString type. Finally, here is the following code in that class.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;


namespace CustomeHelper.CustomHTMLHelper
{
   class CustomHTMLHelper
   {
      public static MvcHtmlString Image(string Imagesource,
         string altTxt, string imagewidth, string imageheight)
      {
         var ImageTag = new TagBuilder("img");
         ImageTag.MergeAttribute("src", Imagesource);
         ImageTag.MergeAttribute("alt", altTxt);
         ImageTag.MergeAttribute("width", imagewidth);
         ImageTag.MergeAttribute("height", imageheight);
         return MvcHtmlString.Create(ImageTag.ToString
            (TagRenderMode.SelfClosing));
      }
   }
}

Once you create the above class and static method, you are ready to use this helper method on your view. Refer to the following view code, I have passed the Image Source, Alt Text, Height, and Width properties of the image.

@{
   Layout = null;
}
@using CustomeHelper.CustomHTMLHelper
<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width" />
   <title>Custom Static HTML Helper</title>
</head>
<body>
   <div>
      @CustomHelper.Image("/Images/Mypicture.jpg","UserPic","100",
         "100")
   </div>
</body>
</html>

Creating an HTML Helper Using Extension Methods

A developer can create his own HTML helper by writing an extension method for the HTML helper class. These helpers are available to the helper property of the class; you can use them directly, just as with built-in helpers.

I have created an MVC application and created new folder, named “CustomHelper,” in that application, and then added a new class with a meaningful name. We are going to create an extension method, so the class should be static. Finally, add the following code in the class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;


namespace CustomeHelper.CustomHTMLHelper
{
   class static CustomHTMLHelper
   {
      public static MvcHtmlString Image(this HtmlHelper htmlhelper,
         string Imagesource, string altTxt, string width,
         string height)
      {
         var ImageTag = new TagBuilder("img");
         ImageTag.MergeAttribute("src", Imagesource);
         ImageTag.MergeAttribute("alt", altTxt);
         ImageTag.MergeAttribute("width", width);
         ImageTag.MergeAttribute("height", height);
         return MvcHtmlString.Create(ImageTag.ToString
            (TagRenderMode.SelfClosing));
      }
   }
}

In the preceding code, I have created a static method for the HtmlHelper class. In this method, I have passed HtmlHelper, image source, alt text, image width, and height properties. Now, I will use this HTML helper method on my view, just as you would with built-in HTML helpers.

@{
   Layout = null;
}
@using CustomeHelper.CustomHTMLHelper
<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width" />
   <title>Custom Static HTML Helper</title>
</head>
<body>
   <div>
      @HTML.Image("/Images/Mypicture.jpg","UserPic","100","100")
   </div>
</body>
</html>

To use the preceding helper on multiple views, add the namespace in the web.config file. The previous view code demonstrates how to use the HTML helper.

Using the @Helper

The @Helper method is available only for the razor view engine. You have to add the HTML helper code in the view itself. There is no need to create a static class. To create an HTML helper, define the method using @helper property, as mentioned in following example.

@{
   Layout = null;
}
@using CustomeHelper.CustomHTMLHelper
<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width" />
   <title>Custom Static HTML Helper</title>
</head>
<body>
   <div>
      @helper Image( string Imagesource, string altTxt,
         string title, string width, string height)
      {
         <img src="@Imagesource" alt="altTxt" title="@title"
            height="@height" width="@width"
      }
   </div>
</body>
</html>

Now, using the razor helper name, pass image properties. Refer to the following view code.

@{
   Layout = null;
}
@using CustomeHelper.CustomHTMLHelper
<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width" />
   <title>Custom Static HTML Helper</title>
</head>
<body>
   <div>
      @HTML.Image("/Images/Mypicture.jpg","UserPic","User Picture",
         "100","100")
   </div>
</body>
</html>

Conclusion

I hope you have gotten a basic understanding of using the Custom HTML helper by reading this article. Custom HTML helpers are powerful tools in MVC, used to encapsulate reusable HTML fragments. Developers can develop custom HTML helpers according to their requirements after reading this article.

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read