다음을 통해 공유

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

  • 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