Asp.Net MVC Custom HTML Helpers

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.

Custom HTML Helpers in Asp.Net MVC

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.

 

  1. Using Static Methods in Asp.Net MVC.
  2. Using the Extension Method in Asp.Net MVC Html Helper Class.

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”.

Create Custom HTML Helper in Asp.Net MVC using Static Method

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.

 

create custom html helper methods using static methods in asp.net mvc

Create Custom HTML Helper in Asp.Net MVC using Extension Method

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 

 

create custom html helper methods using extension methods in asp.net mvc

 Using both static and extension methods in asp.net mvc,, we can create custom html helpers in a simple way.