---
title: "How we create custom HTML Helper in Asp.net MVC?"  
description: "How we create custom HTML Helper in Asp.net MVC?"  
author: "Pedro Araez"  
published: 2020-02-03  
updated: 2020-02-03  
canonical: https://www.mindstick.com/forum/155772/how-we-create-custom-html-helper-in-asp-dot-net-mvc  
category: "asp.net mvc"  
tags: ["asp.net mvc"]  
reading_time: 3 minutes  

---

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

Briefly tell me how we create [custom](https://www.mindstick.com/blog/12298/use-custom-writing-services-to-get-through-the-finals) Html [Helper in asp.net](https://www.mindstick.com/forum/155786/what-is-html-helper-in-asp-dot-net-mvc-razor-view) MVC with an example [as well as](https://www.mindstick.com/interview/2481/can-you-write-a-java-class-that-could-be-used-both-as-an-applet-as-well-as-an-application) an image.

## Replies

### Reply by Nishi Tiwari

**Mainly there are 2 ways to create custom HTML helper in asp.net MVC.**

- First Using Static Methods in Asp.Net MVC
- Second Using Extension Method in [**Asp.Net MVC Html Helper Class**](https://www.mindstick.com/forum/155771/what-is-html-helpers-in-asp-dot-net-mvc)

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("{0} ", 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  select Add View. Once we add View open Index.cshtml file and write the code for this 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>")
```

When we create view run application to see the output which will be shown below:-

![How we create custom HTML Helper in Asp.net MVC?](https://www.mindstick.com/mindstickforums/9ca3b644-832d-4bbf-8f1a-01b833e023a4/images/14bd08f5-1839-4fa6-ace7-7296346ede75.png)

## 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

```
 
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);
}
}
```

We will now add the view for the above controller to test the custom helper method for which we just right click on controller  select Add View. Once we add View open 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>")
```

The extension method output will be shown like below

![How we create custom HTML Helper in Asp.net MVC?](https://www.mindstick.com/mindstickforums/9ca3b644-832d-4bbf-8f1a-01b833e023a4/images/6ced9e40-ade0-46c4-a200-e4ae356e9e47.png)

Using both static and extension methods in asp.net MVC you can create custom HTML helpers in a simple way.


---

Original Source: https://www.mindstick.com/forum/155772/how-we-create-custom-html-helper-in-asp-dot-net-mvc

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.