Custom HTML Helper methods in ASP.NET MVC 4


In this article, we will look into different approaches available for creating custom Helper methods within ASP.NET MVC 4 application. An HTML Helper is just a method that returns a string having HTML or plain text and can be used in our Views. We have built-in Helpers like Html.ActionLink(),Html.CheckBox() etc. Let’s create our own Helper method. Create a new Internet MVC 4 application and name it as MyCustomHelper.

We will create a Helper method to strip\remove the HTML tags from a string. Modify the Index view with code as shown below:

@{
ViewBag.Title = "Home Page";
}
@helper StripHTML(string input)
{
<b>
@System.Text.RegularExpressions.Regex.Replace(input, "<.*?>", string.Empty)
</b>
}
<div>
HTML Content: @HttpUtility.HtmlDecode("<div><p>Test</p><br/></div>")
<br />
Plain Content:@StripHTML("<div><p>Test</p></div>")
</div>

Above Helper will strip the HTML from any parameter passed to it and renders on the View. Syntax is for defining a helper is similar to defining a Method without return type. This way, we can create Helper method with our logic & markup needed. One problem here is, we can't reuse it in other Views. To solve this, we can move the Index.cshtml having custom Helper to App_code folder [Create it, if not exist] and access the helper in any View by mentioning ViewName.HelperName as shown in below code:

@Index.StripHTML("<div><p>Test</p></div>")

Another approach to create custom HTML helper is using Extension methods. Add a new class named MyHelper.cs with below code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MyCustomHelper.Helpers
{
public static class MyHelper
{
public static MvcHtmlString StripHTML(this HtmlHelper html, string input)
{
return new MvcHtmlString(System.Text.RegularExpressions.Regex.Replace(input, "<.*?>", string.Empty));
}
}
}

Build the project and include below code in the view, where you need to access the Helper Method as shown below:

@using MyCustomHelper.Helpers

@Html.StripHTML("<div><p>Test</p></div>")

I am attaching source code for reference. By following above two approaches, we can create our own HTML helpers for using in the Views. I hope this article will be helpful for all.

MyCustomHelper.zip

Comments (5)
  1. Michael Earls says:

    I have both of these in my project for various reasons. Do you know of a way to access the static helper from within the templated helper? I have included a @using myhelpernamespace at the top of the templated helper, but I can’t get access to @Html.MyCustomHelper.
    Thoughts?

  2. kickAssDeveloper says:

    @Earls:
    Assuming you have a Helper.cs class in MyNamespace, you include @using mynamespace at the top and to access to the helper method (if its a static method), you can try this
    @{
    Helper.MyMethod();
    }
    Hope this helps.

  3. 1523658999 says:

    125479633333333

  4. Robert says:

    Add the namespace of your helper-class to the web.config in the Views-folder. This way you don’t need to add it to each individual view.

Comments are closed.

Skip to main content