How To Create A Custom Helper Class In ASP.NET MVC

Sourabh Somani
8y
11.1k
0
4
100
Article

What is HTML Helper Class

HTML helpers are the way by which we can render html on the view page of MVC. These Helpers are simple functions that let the developer specify the type of HTML needed on the view.

The following built-in Helpers are available.

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

There are some Html Helper also available for strongly typed View.

Html.CheckBoxFor
Html.DropDownListFor
Html.HiddenFor
Html.ListBoxFor
Html.PasswordFor
Html.RadioButtonFor
Html.TextAreaFor
Html.TextBoxFor

The above list of HTML Helper is for strongly typed view. Inside these helper methods we pass lambda expression as a method argument.

But if we want to create our own HTML Helper Method then there are three ways to create your custom Html Helpers.

Using Static Method
Using Extension Method
Using the @helper

Custom Helper Using Static Method

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace CustomHelper.CustomHelpers
{
/// <summary>
/// This Class Helpes
/// </summary>
public static class HelperByStaticMethod
{
/// <summary>
/// This is a Helper Method For Image Element
/// </summary>
/// <param name="Source">Provide Source</param>
/// <param name="Alt">alt Attribute For That Image</param>
/// <param name="Title">Title For the Image</param>
/// <param name="Height">Height Attribute (By Default Height will be 128)</param>
/// <param name="Width">Width Attribute (By Default Width will be 128)</param>
/// <returns></returns>
public static string img(string Source, string Alt, string Title, int Height=128, int Width=128)
{
return String.Format("<img src='{0}' alt='{1}' title='{2}' height='{3}' width='{4}'/>", Source, Alt, Title, Height, Width);
}
}
}

And inside View we will use like the following:

@using CustomHelper.CustomHelpers
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@Html.Raw(HelperByStaticMethod.img("/Images/1.jpg", "Mark Zuck", "Mark Zuckerberg"))
@Html.Raw(HelperByStaticMethod.img("/Images/2.jpg", "Bill Gates", "Bill Gates", 250, 167))
@Html.Raw(HelperByStaticMethod.img("/Images/3.jpg", "APJ Abdul Kalam", "APJ Abdul Kalam", 250))
@Html.Raw(HelperByStaticMethod.img("/Images/4.jpg", "Steve Jobs", "Steve Jobs", 200, 200))
</div>
</body>
</html>

Output

In the above code I have created a static class and method taking Image Source, Alt, Title, Height and Width and returning simple string. But one problem is that I am explicitly converting these into html format using Html.Raw. If I don't convert this string into html format and keep my code as in the following,

@HelperByStaticMethod.img("/Images/1.jpg", "Mark Zuck", "Mark Zuckerberg")
@HelperByStaticMethod.img("/Images/2.jpg", "Bill Gates", "Bill Gates", 250, 167)
@HelperByStaticMethod.img("/Images/3.jpg", "APJ Abdul Kalam", "APJ Abdul Kalam", 250)
@HelperByStaticMethod.img("/Images/4.jpg", "Steve Jobs", "Steve Jobs", 200, 200)

then our output will be the following.

Custom Helper Using Extension Method

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace CustomHelper.CustomHelpers
{
public static class HelperByExt
{
public static MvcHtmlString img(this HtmlHelper htmlHelper,string Source, string alt, string title, int Height=128, int Width=128)
{
var imgTag = new TagBuilder("image");
imgTag.MergeAttribute("src", Source);
imgTag.MergeAttribute("alt", alt);
imgTag.MergeAttribute("title", title);
imgTag.MergeAttribute("width", Width.ToString());
imgTag.MergeAttribute("height", Height.ToString());
return MvcHtmlString.Create(imgTag.ToString(TagRenderMode.SelfClosing));
}
}
}

In view we will use our Custom Helper class as in the following:

I am writing the following code for our view.

@using CustomHelper.CustomHelpers
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@Html.img("/Images/1.jpg", "Mark Zuck", "Mark Zuckerberg")
@Html.img("/Images/2.jpg", "Bill Gates", "Bill Gates", 250, 167)
@Html.img("/Images/3.jpg", "APJ Abdul Kalam", "APJ Abdul Kalam", 250)
@Html.img("/Images/4.jpg", "Steve Jobs", "Steve Jobs", 200, 200)
</div>
</body>
</html>

Output

Custom Helper Using @helper

This method is specific for only razor view engine. The @helper syntax within Razor enables you to easily create re-usable helper methods that can encapsulate output functionality within your view templates. They enable better code reuse, and can also facilitate more readable code. Let’s look at a super-simple scenario of how the @helper syntax can be used.

Because as I said @helper is specific for only razor view engine so we can use it only on view or cshtml file.

How to use @helper

I am writing the following code for our view.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@helper img(string Source, string alt, string title,
int Height = 128, int Width = 128)
{
<img src="@Source" alt="@alt" title="@title" height="@Height" width="@Width"/>
}
@img("/Images/1.jpg", "Mark Zuck", "Mark Zuckerberg")
@img("/Images/2.jpg", "Bill Gates", "Bill Gates", 250, 167)
@img("/Images/3.jpg", "APJ Abdul Kalam", "APJ Abdul Kalam", 250)
@img("/Images/4.jpg", "Steve Jobs", "Steve Jobs", 200, 200)
</div>
</body>
</html>

Output

Finally, I am combining all view's code, which I have created for all type of ways to create HTML Helper that is as follows,

@using CustomHelper.CustomHelpers
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h1>Helper By Static Method</h1>
@Html.Raw(HelperByStaticMethod.img("/Images/1.jpg", "Mark Zuck", "Mark Zuckerberg"))
@Html.Raw(HelperByStaticMethod.img("/Images/2.jpg", "Bill Gates", "Bill Gates", 250, 167))
@Html.Raw(HelperByStaticMethod.img("/Images/3.jpg", "APJ Abdul Kalam", "APJ Abdul Kalam", 250))
@Html.Raw(HelperByStaticMethod.img("/Images/4.jpg", "Steve Jobs", "Steve Jobs", 200, 200))
<hr />
<h1>Helper By Extension Method</h1>
@Html.img("/Images/1.jpg", "Mark Zuck", "Mark Zuckerberg")
@Html.img("/Images/2.jpg", "Bill Gates", "Bill Gates", 250, 167)
@Html.img("/Images/3.jpg", "APJ Abdul Kalam", "APJ Abdul Kalam", 250)
@Html.img("/Images/4.jpg", "Steve Jobs", "Steve Jobs", 200, 200)
<hr />
<h1>Helper By @@helper </h1>
@helper img(string Source, string alt, string title,
int Height = 128, int Width = 128)
{
<img src="@Source" alt="@alt" title="@title" height="@Height" width="@Width"/>
}
@img("/Images/1.jpg", "Mark Zuck", "Mark Zuckerberg")
@img("/Images/2.jpg", "Bill Gates", "Bill Gates", 250, 167)
@img("/Images/3.jpg", "APJ Abdul Kalam", "APJ Abdul Kalam", 250)
@img("/Images/4.jpg", "Steve Jobs", "Steve Jobs", 200, 200)
</div>
</body>
</html>

Output