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.
Comments
- Anonymous
March 25, 2015
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? - Anonymous
April 23, 2015
@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. - Anonymous
April 28, 2015
125479633333333 - Anonymous
June 12, 2015
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. - Anonymous
February 09, 2016
ter