Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

home / developersection / forums / how we create custom html helper in asp.net mvc?
Ask Question
Pedro Araez
Pedro Araez

Student

Thank you

Message

1 Answers

Nishi Tiwari
Nishi Tiwari 03 Feb 2020
Report Abuse

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

Nishi Tiwari

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

Nishi Tiwari

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

advertising