forum

Home / DeveloperSection / Forums / How we create custom HTML Helper in Asp.net MVC?

Ask Question

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

Pedro Araez39703-Feb-2020

Briefly tell me how we create custom Html Helper in asp.net MVC with an example as well as an image. 

asp.net mvcasp.net mvc 
Updated on 03-Feb-2020
Pedro Araez

Pedro Araez

Follow
Thank you

Can you answer this question?

Answer

1 Answers

Nishi Tiwari

Nishi Tiwari

03-Feb-2020

Mainly there are 2 ways to create custom HTML helper in asp.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?

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?

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

Liked By