Here we will learn custom html helpers in asp.net mvc and how to create custom html helpers in the asp.net mvc application with an example.
You are free to create a new html helper in asp.net mvc. If you want, we have some simple steps to create it.
There are 2 ways to create a custom html helper in asp.net mvc.
Let’s start with Creating html helpers using Static Methods in asp.net mvc with example.
In this example, we will create a simple HTML helper method that will create a marked HTML span with color and font settings for span in it. For this, we will create a folder with the name “Custom_Helpers” inside that we will add a static class with the name “LabelborderHelper”.
In this html helper, we will take text as input and add font size, color, and span text weight. For that, we need to write code as shown 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("{0} ", content);
return new HtmlString(Value);
}
}
}
Now let’s add a controller and give the name as “TesthelperController” once we create a controller that will be like as 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();
}
}
}
Now we will add a view for the above controller to test the custom helper method. For that right-click on controller à select Add View. Once we add View,, open that file (Index.cshtml) and write the code like as shown below.
@{
ViewBag.Title = "Index";
}
<style>
span
{
font-size: 20px;
font-weight: bold;
border:2px solid #000;
color: green;
}
</style>
<h2>Index</h2>
@using Tutorial3.Custom_Helpers
@LabelborderHelper.LabelBorder("<span>Creating Custom helper static method</span>")
Once we create view run application to see the output that would be like as shown below.
If we create an extension method, it will be available in the helper method of the view. E.g., @Html.LabelBorderExtension. Now, create an extension method class with the name “LabelborderExtensionhelper” in the folder “Custom_Helpers” and write the following code.
using System;
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("{0} ", content);
return new HtmlString(htmlString);
}
}
Now we will add a view for the above controller to test the custom helper method. For that right click on controller à select Add View. Once we add View, open that file (Index.cshtml) and write the code like as shown below
@{
ViewBag.Title = "Index";
}
<style>
span
{
font-size: 20px;
font-weight: bold;
border:2pxsolid#000;
color: green;
}
</style>
<h2>Index</h2>
@Html.LabelBorderExtension("<span>Creating Custom helper static method</span>")
Our extension method output will be like as shown below
Using both static and extension methods in asp.net mvc,, we can create custom html helpers in a simple way.