Inline and Custom HTML Helpers In ASP.NET MVC

Anoop Kumar Sharma
8y
68.3k
0
4

Article

With the help of the HTML helper class, we can create HTML controls programmatically. HTML helpers are used in view to render HTML content. HTML helper is a method which helps to return a string.

HTML Helpers are categorized into three types:

Inline HTML helpers
Built-in HTML helpers
Custom HTML helpers

In this article, we will learn how to create inline and custom HTML helpers. We have already covered built-in HTML helpers in the previous articles of this series. In previous ASP.NET MVC tutorials of this series, we saw,

Inline HTML Helpers

@helper syntax is used to create reusable inline helper method. They make the code more reusable, as well as more readable.

Let’s see how to use them.

Create an empty ASP.Net MVC Application.

Right click the controller and add a controller.

public class HomeController : Controller
{
public ActionResult InlineHTMLHelper()
{
return View();
}
}

Right click action method and click add view.

@{
Layout = null;
}
@helper OrderedList(string[] words)
{
<ol>
@foreach(string word in words)
{
<li>@word</li>
}
</ol>
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Inline HTML Helper</title>
</head>
<body>
<div>
@OrderedList(new string[]{"Delhi","Punjab","Assam","Bihar"})
</div>
</body>
</html>

Preview

In the code shown above, we created an inline helper method i.e. OrderedList, which takes a string array as an argument and displays each word in an ordered list. We can reuse the inline HTML helpers multiple times on the same view.

In order to access the same inline HTML helper across the different view, we have to move our @helper methods in .cshtml files to App_Code folder.

@helper OrderedList(string[] words)
{
<ol>
@foreach (string word in words)
{
<li>@word</li>
}
</ol>
}

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Inline HTML Helper App Code</title>
</head>
<body>
<div>
@InlineHelplerCode.OrderedList(new string[] { "Delhi", "Punjab", "Assam", "Bihar" })
</div>
</body>
</html>

Preview

Custom HTML Helpers

We can create custom HTML helpers in two ways,

Using static methods
Using extension methods

Using static methods

This is one of the simplest methods to create custom HTML helpers. We added a class (named as CustomHelper ) in CustomHelper folder.

public static class CustomHelper
{
public static MvcHtmlString Image(string source,string altTxt,string width,string height){
//TagBuilder creates a new tag with the tag name specified
var ImageTag = new TagBuilder("img");
//MergeAttribute Adds attribute to the tag
ImageTag.MergeAttribute("src", source);
ImageTag.MergeAttribute("alt", altTxt);
ImageTag.MergeAttribute("width", width);
ImageTag.MergeAttribute("height", height);
//Return an HTML encoded string with SelfClosing TagRenderMode
return MvcHtmlString.Create(ImageTag.ToString(TagRenderMode.SelfClosing));
}
}

In the code shown above, we created a static method that returns an HTML-encoded string that uses MvcHtmlString. Now add namespace reference and call the custom helper from the view.

@{
Layout = null;
}
@using InlineAndCustomHTMLHelper.CustomHelper
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Custom Static HTML Helper</title>
</head>
<body>
<div>
@CustomHelper.Image("/Images/UserPic.jpg","UserPic","100","100")
</div>
</body>
</html>

Preview

Using Extension Methods

Extension method enables us to add new methods to an existing class. To create an extension method, we have to create a static class, and first parameter of an extension method points towards the class that is extended by the method.

public static MvcHtmlString Image(this HtmlHelper htmlhelper, string source, string altTxt, string width, string height)
{
var ImageTag = new TagBuilder("img");
ImageTag.MergeAttribute("src", source);
ImageTag.MergeAttribute("alt", altTxt);
ImageTag.MergeAttribute("width", width);
ImageTag.MergeAttribute("height", height);
return MvcHtmlString.Create(ImageTag.ToString(TagRenderMode.SelfClosing));
}

In the code shown above, we added image custom helper method and extended the HtmlHelper class. Now go to view, add the namespace reference, and call image helper method from HTML Helper class.

code

@{
Layout = null;
}
@using InlineAndCustomHTMLHelper.CustomHelper
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Custom Extension HTML Helper</title>
</head>
<body>
<div>
@Html.Image("/Images/UserPic.jpg","UserPic","100","100")
</div>
</body>
</html>

Preview

Now we can use Image HTML helper in all the views. The only thing we have to do is to add the reference at the top, so that we can call/invoke that custom helper method. If you want to use that custom helper method multiple times, you can add namespace of that custom helper class in the view’s web.config file.