Stepwise Creating Custom HTML Helper In MVC

We know HTML helpers are like traditional ASP.NET controls. As we create the custom controls we can also create the custom helpers.

How to create the custom helpers we will see as in the following steps,

Step 1: Create your MVC application.

Step 2: Add folder HTMLHelper and class HTMLHelper ( you may give your project a specific name )



Step 3: Now we are creating helper which will convert text in to capital letter and create label.

So add extension method for htmlhelper as below. Return type must be IHTMLString.

Note: I have created basic helper; you may create some complex multi parameter helper as per your need.

public static class HTMLHelper
{
   public static IHtmlString DisplayCapitalText(this HtmlHelper htmlHelper,
   string name, string value)
   {
      return new HtmlString(string.Format("<label id=\"" + name + "\"> " + value.ToUpper() + "</label>"));
   }
}

Step 4: Build project and in Web.config add the namespace of helper class.





Step 5: Build the solution, close and reopen it.

Step 6: On UI you can access your helper as in the following,



I have given sample string as in the following,



Step 7: Run the project and you can see the string in capital format