How we create custom HTML Helper in Asp.net MVC?

Question

Nishi Tiwari · Answer

Mainly there are 2 ways to create custom HTML helper in asp.net MVC. 
and First Using Static Methods in Asp.Net MVC and Second Using Extension Method in 
Asp.Net MVC Html Helper Class
In the example, we will create an HTML helper method that will create a marked HTML span with color and font settings for span in it. For that, we will create a folder with the name “Custom_Helpers”
inside that we add a static class with name “LabelborderHelper” 
Creating Custom HTML Helper in Asp.Net MVC using Static Method 
In this type of HTML helper, we will take text as input and add font size, color, the weight of span text for which we need to write code like below:-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Tutorial3.Custom_Helpers
{
public class LabelborderHelper
{
public static IHtmlString LabelBorder(string content)
{
string Value = String.Format(andquot;{0} andquot;, content);
return new HtmlString(Value);
}
}
}
We will now add a controller and give a name to it as “TesthelperController”
which will be shown below 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Tutorial3.Controllers
{
public class TesthelperController : Controller
{
//
// GET: /Testhelper/
public ActionResult Index()
{
return View();
}
}
}
Lastly, we will add a view for the above controller to test a custom helper method for which right-click on the controller and#61664; select Add View. Once we add View open Index.cshtml file and write the code for this shown below
@{
ViewBag.Title = andquot;Indexandquot;;
}
andlt;styleandgt;
span
{
font-size: 20px;
font-weight: bold;
border:2px solid #000;
color: green;
}
andlt;/styleandgt;
andlt;h2andgt;Indexandlt;/h2andgt;
@using Tutorial3.Custom_Helpers
@LabelborderHelper.LabelBorder(andquot;andlt;spanandgt;Creating Custom helper static methodandlt;/spanandgt;andquot;)
When we create view run application to see the output which will be shown below:-
Creating Custom HTML Helper in Asp.Net MVC using Extension Method 
If we will create an extension method then it will be available in the helper method of the view.
E.g. @Html.LabelBorderExtension. We will create an extension method class with name “LabelborderExtensionhelper” in the folder “Custom_Helpers” and write the code for it
and 
using System;and using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.WebPages.Html;
namespace Tutorial3.Custom_Helpers
{
public static class labelborderExtensionhelper
{
public static IHtmlString LabelBorder(this HtmlHelper helper, string content)
{
string htmlString = String.Format(andquot;{0} andquot;, content);
return new HtmlString(htmlString);
}
}
We will now add the view for the above controller to test the custom helper method for which we just right click on controller and#61664; select Add View. Once we add View open file Index.cshtml and write the code like as shown below
@{
ViewBag.Title = andquot;Indexandquot;;
}
andlt;styleandgt;
span
{
font-size: 20px;
font-weight: bold;
border:2pxsolid#000;
color: green;
}
andlt;/styleandgt;
andlt;h2andgt;Indexandlt;/h2andgt;
@Html.LabelBorderExtension(andquot;andlt;spanandgt;Creating Custom helper static methodandlt;/spanandgt;andquot;)
The extension method output will be shown like below 
Using both static and extension methods in asp.net MVC you can create custom HTML helpers in a simple way.and

forum

How we create custom HTML Helper in Asp.net MVC?

Pedro Araez

Can you answer this question?

1 Answers

Liked By