Custom HTML Helpers In MVC

HTML Custom Helpers

HTML helper is a method that returns a HTML string. Then this string is rendered in view. MVC provides many HTML helper methods. It also provides facility to create your own HTML helper methods. Once you create your helper method you can reuse it many times.

There are two ways in MVC to create custom Html helpers as below.

1. Adding extension method for HtmlHelper class
2. Using static method

Adding extension method for HtmlHelper class

We can create our own HTML helper by writing extension method for HTML helper class. These helpers are available to Helper property of class and you can use then just like inbuilt helpers.

Example

Add new class in MVC application and give it meaningful name. In this example we create new folder “CustomHelper” in application and then we add class “CustomHelpers” in that folder. As we are going to create extension method make this class static. Write the following code in class:

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

namespace CustomeHelper.CustomHelper
{
    public static class CustomHelpers
    {
        public static IHtmlString File(this HtmlHelper helper, string id)
      {
            TagBuilder tb = new TagBuilder("input");
            tb.Attributes.Add("type", "file");
            tb.Attributes.Add("id", id);
            return new MvcHtmlString(tb.ToString());
        }
    }
}

In above code we create static method file for HtmlHelper class. In this method we create html tag with the help of TagBulider class. In this code we just use two attributes you can add more html attributes as per your requirement. Now we use this html helper method on view just like inbuilt helpers. As this class resides in “CustomHelper” namespace we should add this namespace in view as below,

@using CustomeHelper.CustomHelper
@ {
    ViewBag.Title = "Index";
}

< h2 > Index < /h2>

If you want to use these helpers on multiple views then add namespace in web.config file. Once you add that namespace you are ready to use “File” helper like below,



Add this method and pass id parameter. And run your view, you will get output as below.



Using static method

In this method we don’t create any extension method for HtmlHelper class. We create new class as “CustomHelper”. Write the following code in class:

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

namespace CustomeHelper.CustomHelper
{
    public class CustomHelper
    {
        public static IHtmlString File(string id)
      {
            TagBuilder tb = new TagBuilder("input");
            tb.Attributes.Add("type", "file");
            tb.Attributes.Add("id", id);
            return new MvcHtmlString(tb.ToString());
        }
    }
}

Once you create this you are able to use this helper method on view. As in this method we don’t create extension method for HtmlHelper class, we don’t use like inbuilt helpers. To use this helper we use class name instead of “@Html” (in razor view) like below.



Add this method and pass id parameter. And run your view, you will get output as below.



Conclusion

In this article we learned to create custom html helpers. By creating custom html helper we can eliminate the repeating html code fragments from application.