How to Create Custom Inline Helper Methods in ASP.Net MVC

In this article, we will talk about what helper methods are and how to create and use helper methods in an ASP.NET MVC application.

Helper Methods

Helpers methods are packages of a few lines of code or markup that can be reused throughout an MVC application. There are two types of helper methods, inline helper methods and external helper methods. In this article, we will talk about inline helper methods.

Getting Started

To get started, open Visual Studio 2013 and create a brand new ASP.NET MVC application. Assume we need to display a list of fruits and flowers. To do this let`s add the following code to the Index action of HomeController.

using System.Web.Mvc;

namespace CustomInlineHelper.Controllers
{
    public class HomeController: Controller
    {
        public ActionResult Index()
        {
            ViewBag.Fruits = new string[]
            {
                "Apple", "Mango", "Lemon"
            };
            ViewBag.Flowers = new string[]
            {
                "Rose", "Jasmine", "Sunflower"
            };
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

As shown in the preceding code, let`s display the data for the fruits and flowers stored in the ViewBag. The contents of the Index view is as shown below.

@{
ViewBag.Title = "Home Page";
}
<div class="row">
    <div class="col-md-6">
        <h2>Fruits</h2>
        <ul>
@foreach (var item in (string[])ViewBag.Fruits)
{
            <li>@item</li>
}
        </ul>
    </div>
    <div class="col-md-6">
        <h2>Flowers</h2>
        <ul>
@foreach (var item in (string[])ViewBag.Flowers)
{

            <li>@item</li>
}
        </ul>
    </div>
</div>

Now let`s run the application (shortcut F5) to view the output. The output is as shown below.



Figure 1: Output of the application

Now assume that instead of an unordered list, we want to display the data as an ordered list. Then in the preceding case we need to make the change in two places in the Index.cshtml file. This is where the inline helper methods are useful. We can encapsulate Code (combination of HTML markup and Razor code) in a helper method so that we can reuse it in our application. We can create a simple inline helper using @helper syntax.

Creating custom helper method using @helper syntax

To create the helper method, add the following code to the index view of the home controller.

@helper ListItems(string [] items)
{
<ul>
@foreach (var item in items)
{
    <li>@item</li>
}
</ul>
}

The preceding code uses the @helper syntax to create a new inline helper called ListItems. It looks like our normal C# method. It contains one parameter called items that is a string array and the body of the method is a combination of HTML markup and Razor Code. Just like our normal C# method, it can contain any number of arguments (the arguments can be nullable or an optional argument). We can invoke this @helper method like our normal C# method as shown below.

@ListItems(ViewBag.Fruits)

Visual Studio also provides intellisense when invoking the method as shown below:



Figure 2: Intellisense for helper methods in Visual Studio

Now let`s update the Index view to use the new helper method. The contents for the updated index view is as shown below.

@{
ViewBag.Title = "Home Page";
}

@helper ListItems(string[] items)
{
<ul>
@foreach (var item in items)
{
  <li>@item</li>
}
</ul>
}
<div class="row">
    <div class="col-md-6">
        <h2>Fruits</h2>
@ListItems(ViewBag.Fruits)
    </div>
    <div class="col-md-6">
        <h2>Flowers</h2>
@ListItems(ViewBag.Flowers)
    </div>
</div>

Creating helper methods to use across multiple views

In the preceding case, we have declared the helper method in the index view, so we will be able to use it in the same view. But there may be some situation where we may need to use the same functionality across multiple views. In that case, we need to declare the helper as a global method so that we can access it across multiple views. To make the helper method as a global method, create a new file called "GlobalHelper.cshtml" in the App_Code directory. We can name this file as we want. Now copy our ListItems helper method in the "GlobalHelper.cshtml" file. The contents of GlobalHelper.cshtml file is:



Figure 3: Contents of GlobalHelper.cshtml file

When we compile the code the GlobalHelper.cshtml file will be compiled to a class with ListItems as its static method. We can invoke this global helper method like we invoke a static method of a class in C# as shown below.

@GlobalHelper.ListItems(ViewBag.Fruits)

Now let`s use this global helper in the index view. The contents of the updated index view is:

@{
ViewBag.Title = "Home Page";
}
<div class="row">
    <div class="col-md-6">
        <h2>Fruits</h2>
@GlobalHelper.ListItems(ViewBag.Fruits)

    </div>
    <div class="col-md-6">
        <h2>Flowers</h2>
@GlobalHelper.ListItems(ViewBag.Flowers)
    </div>
</div>

Now we can use this helper in any view in our application.

Conclusion

Using Razor @helper syntax we can encapsulate code (combination of Razor code and HTML markup) in a Razor view that we can reuse across all the views in our application. So even if we need to change the code we just need to change it in one place. This makes the code more readable and maintainable. I hope this helps you.

I hope you enjoyed reading the article.

Happy Coding!