Asp.Net MVC Custom HTML Helpers

  Total Views : 3457
  Comments : 3
 
  Keywords : Create custom html helper methods in asp.net mvc, How to create custom helper method in asp.net mvc with example, Asp.net mvc custom html helpers with static and extension methods

Here we will learn what is custom html helpers in asp.net mvc and how to create custom html helpers in asp.net mvc application with example

Custom HTML Helpers in Asp.Net MVC

You are free to create new html helper in asp.net mvc. If you want we have some simple steps to create it.

 

There are 2 way to create custom html helper in asp.net mvc.

 

  1. Using Static Methods in Asp.Net MVC
  2. Using 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 which will create a marked HTML span with color and font settings for span in it. For this we will create a folder with name “Custom_Helpers” inside that we will add a static class with 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, weight of span text for that we need to write code like 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 controller and give name as “TesthelperController” once we create 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 view for above controller to test custom helper method for that just 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 extension method then it will be available in helper method of view. E.g. @Html.LabelBorderExtension. Now create extension method class with name “LabelborderExtensionhelper” in 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 view for above controller to test custom helper method for that just 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

 By using both static and extension methods in asp.net mvc we can create custom html helpers in simple way.

 Comments (3)

  • Navi tutlane registered profile image
     
    Navi   Reply

    Hi, thanks for the easy explanation for this topic. just one concern for the above example,how the css class has applied to the text.

     Jul 02, 2016
    • Suresh Dasari tutlane registered profile image
       
      Suresh Dasari

      Thanks navi for identify bug we updated code now you can test its working fine.

       Jul 14, 2016
  • Manav Pandya tutlane registered profile image
     
    Manav Pandya   Reply

    What is meaning and how to create IHtmlString ???

     Dec 07, 2016

Leave a comment

  • Default Tutlane User