Custom HTML Helper In ASP.NET MVC

HTML helpers are methods that return the HTML content in view. We have some below available html helpers methods in ASP.NET MVC.

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

Sometimes above HTML helpers are very limited for a particular scenario.

And if you are working on a large MVC project and for a specific reason we need to have custom HTML Helpers so that we can reuse it as per our need. So MVC provide to create Custom HTML Helper.

We have 2 ways to create custom HTML Helper.

Benefit of using Custom HTML Helper is that you can write a unit test case for this particular custom html helper.

Extension Method =>Create Custom HTML Helper in Asp.Net MVC

Add a new class in Models folder =>MyCustomHelpers.cs

Here I am going to use Extension method for Label and Image control.

I have added an Image to show in this image control.

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

namespace CustomHtmlHelperInMVC.Models
{
     public static class MyCustomHelpers
     {        
           public static IHtmlString CustLabelExt(this HtmlHelper helper, string Content)
          {
                  string htmlString = $"<label style=\"background-color:red;color:white;font-size:40px;border:solid 5px green;padding:4px;\">{Content}</label>";
                  return new HtmlString(htmlString);
          }     
 

       public static MvcHtmlStringImage(this HtmlHelperhtmlhelper, string source, string altTxt, string width, string height)
       {
var ImageTag = new TagBuilder("img");
ImageTag.MergeAttribute("src", source);
ImageTag.MergeAttribute("alt", altTxt);
ImageTag.MergeAttribute("width", width);
ImageTag.MergeAttribute("height", height);

return MvcHtmlString.Create(ImageTag.ToString(TagRenderMode.SelfClosing));
        }

    }

}

Now come to your Index.cshtml and use custom control like below:

@usingCustomHtmlHelperInMVC.Models 

@{

ViewBag.Title = "ASP.NET MVC - Custom HTML Helpers";

}
 

<divclass="jumbotron">
<h7>ASP.NET MVC - Custom HTML Helper</h7>
@Html.CustLabelExt("This is Custom Label by Extension Methods.")
<br/>
@Html.Image("../Image/RS.jpg", "", "200", "200")
</div>

 Now Run your application.

Image 1.

Static Method  => Create Custom HTML Helper in Asp.Net MVC

Do below code in MyCustomHelper.cs
 

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

namespace CustomHtmlHelperInMVC.Models
{
public static class MyCustomHelpers
{
public static IHtmlString MyCustLabel(string Content)
        {
string custLableStr = $"<label style=\"background-color:orange;color:blue;font-size:30px\">{Content}</label>";
return new HtmlString(custLableStr);
        }      
}

}

Now your view.cshtml

@using CustomHtmlHelperInMVC.Models 

@{

ViewBag.Title = "ASP.NET MVC - Custom HTML Helpers";

}
<divclass="jumbotron">
<h7>ASP.NET MVC - Custom HTML Helper</h7>
<br/>
@MyCustomHelpers.MyCustLabel("This is Custom Label by Static Methods.")   
</div>

Now Run your application

Image 2.