Creating Custom HTML Helpers In ASP.Net MVC

HTML Helpers in ASP.NET MVC

HTML Helpers are nothing but the way of rendering HTML on the view page in ASP.NET MVC. Typically what we have in traditional ASP.NET web forms is Web Controls to get the same functionality but with the evolution of the MVC pattern, you don't have any web controls to add to the view pages.

In simple words, it is just a method that returns a string and the string is HTML.

Example of HTML Helpers

The ASP.NET MVC framework ships with various builtin HTML helpers such as ActionLink and Label.

Let's have a look at how a HTML helper is added to the view page. I am considering the Razor View Engine for this example.

@Html.ActionLink("Display Name of Link", "MethodName", "ControllerName");

The example above shows how the OOB Action Link is used to render the HTML hyperlink on the view page.

The following is another example where it is used to render the Html label tag to render a Store Name property of the model class.

@Html.LabelFor(model => model.StoreName)

Why to use HTML Helpers

The question might have popped into your mind by now asking, if HTML helpers will just render the HTML string then why do I need to use them? If I know the HTML syntax then why not add the HTML directly onto the view page?

The answer is simple, it depends on how clean and consistent you want to make your application. Of course you can do the direct addition of HTML tags onto your view pages but if you observe the second example, you can see that it is simply rendering the label tag on the view page for a property in the model at run time. So it is just for making the developer's life easies and to have cleaner HTML for your view page.

Why Custom HTML Helpers are needed

Well, there is always a need to do some custom stuff on top of what the framework offers and the reason for doing this is either for business requirements or to get things done in a smarter way.

Writing a custom HTML helper is nothing but writing an extension method. You are actually writing an extension method for the HtmlHelper class.

Being a SharePoint developer I always find this task similar to the creation of a web control where you override the render method of the base class and do the custom HTML rendering.

Creating a Custom HTML Helper

All right, for demo purposes I will keep the example simple, I will simply write an HTML helper that will render the header of the content on the view page.

This is done simply with the <header> tag of HTML 5.

Step 1

Define your custom static class for the creation of your custom HTML helpers.

public static class DemoCustomHtmlHelpers
{
}

Step 2

Add a static method to the class and ensure that the return type is MvcHtmlString. Write an input paramter of method as HtmlHelper and also a string for which the header tag needs to be generated.

You might need to add a System.Web.Mvc namespace to your class.

public static MvcHtmlString Header(this HtmlHelper helper, string content)
{
}

Step 3

Add the rendering logic in the method. You can use the TagBuilder class to generate HTML tags to be rendered.

public static MvcHtmlString Header(this HtmlHelper helper, string content)
{
var tagBuilder = new TagBuilder("header");
tagBuilder.InnerHtml = content;
return new MvcHtmlString(tagBuilder.ToString());
}

Step 4

Build the project and open any of the view pages. Now you can use your custom HTML helper to render the header. Be sure that your view page has the correct using namespace for using your custom HTML helper extension.

@Html.Header("Create")

When you observe the view page's HTML you will find the generated HTML tag by our Custom HTML helper extension.

<header>Create</header>

So this is all guys, have fun and try to create these HTML Helper extensions in your scenarios.