Custom HTML Helper In ASP.NET MVC

Article

HTML helpers are methods that return the HTML content in view. People coming from the ASP.NET web forms background are used to putting the ASP.NET server control on the page from the toolbox. In ASP.NET MVC, we don't have any server controls. In MVC, we have only HTML controls. These HTML Helpers will help you to render html in browser. HTML helpers are similar to server controls of Asp.Net Web forms but Helper doesn’t have ViewState.

The following is the list of html helpers methods present in ASP.NET MVC

@Html.BeginForm
@Html.EndForm
@Html.TextBox
@Html.TextArea
@Html.Password
@Html.Hidden
@Html.CheckBox
@Html.RadioButton
@Html.DropDownList
@Html.ListBox

Let us take an example of how to utilize these html helpers.

In the above page we created label, textbox, and checkbox using the html helper and the following result is visible when we run this code,

Custom Helper

Sometime inbuilt helpers don’t provide the desire result, but ASP.NET MVC provides the concept of custom helper using what we can create as an html helper according our requirement. ASP.NET MVC providesthree ways to define the custom html helper.

Using Static Methods
Using Extension Methods
Using the @helper.

Using Static Method

In this method we create a static class with static method, this method will return the HTML string. So, first create a folder with name “Custom_Helpers” in root directory. After that create a static class with “Custom_Helper_Class” name. Now paste the following code in that class.

namespace MVCProject.Custom_Helpers {
public static class Custom_Helper_Class {
public static IHtmlString Create_Lable(string Content) {
string LableStr = $ "<label style=\"background-color:gray;color:yellow;font-size:24px\">{Content}</label>";
return new HtmlString(LableStr);
}
}
}

In the above code we created a Create_Lable method that take the content of label and returned a customized label. Now create a view and paste the following code in view.

@ {
ViewBag.Title = "Index";
}
<
h2 > Index < /h2>
@using MVCProject.Custom_Helpers
@Custom_Helper_Class.Create_Lable("This is Custom Label")

In the above code we inherit the “Custom_Helpers” file and now we can access the Creat_Lable method using the @Cusom_Helper_Class class name. When we run the above code the following result will be generated.

Using Extension Method

If we create a custom helper using the extension method then this method will be available in helper method and we can use extension method using @Html .

Firstly, create an extension method like below,

using System.Web;
using System.Web.Mvc;
namespace MVCProject.Custom_Helpers {
public static class Custom_Helper_Class {
public static IHtmlString Retrieve_Label(this HtmlHelper helper, string content) {
string LableStr = $ "<label style=\"background-color:blue;color:red;font-size:24px\">{content}</label>";
return new HtmlString(LableStr);
}
}
}

In the above code, we created a simple extension method for built in HTML helper class. The Retrieve_Label method takes two parameters, first parameter defines the object of HtmlHelper class and second parameter defis the content that we will place into label text. We can use this html extension method using the @Html as below.

When we run the above code the following result will be visible.

Using the @helper

This method is only available for razor view engine. To create an html helper, define the method using @helper property like below.

@helper Retrieve_div(string content) { <
div style = "background-color:burlywood;height:100px;width:200px" >
<
mark >
<
label style = "font-size:large;font-family:Algerian" >
@content <
/label> <
/mark> <
/div>
}

Now using the razor helper name we can retrieve a div that contains a label with some CSS property.

After the execution of above code the following result will be obtained.

In the above method there is a problem that this razor html helper is only accessible in current view. We can’t access this razor html helper outside the index view. If we want to use the razor created helpers in multiple views, then first create a App_Code directory and create a view in this directory that will contain the custom helper.

Firstly, create an App_Code folder and create a Helper View.