ASP.NET MVC Tip #1 - Create New HTML Helpers with Extension Methods

In this tip, I show you how you can create two new HTML Helpers that you can use within an ASP.NET MVC View. I show you how you can use extension methods to create new HTML Helpers for displaying bulleted and numbered lists.

When building a View for an ASP.NET MVC application, you can take advantage of HTML Helpers to render standard HTML tags. For example, instead of typing this:

<input name="inpSubmit" type="submit" value="Click Here!" />

You can type this:

<%= Html.SubmitButton("inpSubmit", "Click Here!") %>

Over the long run, HTML Helpers can save you a lot time. But what if there isn’t an HTML Helper for a tag that you want to render? For example, imagine that you want to display a bulleted list of database records in a View. The HtmlHelper class doesn’t include a method that lets you render a bulleted list. Don’t give up. If the HTML Helper doesn't include a method that you need, just extend it!

You can add new functionality to the HtmlHelper class by creating new extension methods. An extension method looks just like a normal instance method. However, unlike a normal instance method, you add extension methods to a class by defining the methods in a completely different class.

In Visual Basic .NET, you create extension methods by creating a module and decorating the extension methods with a special attribute. In C#, you define extension methods in a static class and use the keyword this to indicate the class being extended.

Here’s how you can add extension methods to the HtmlHelper class to display both ordered and unordered list of database records:

Listing 1 – ListExtensions.vb (VB.NET)

Imports System
Imports System.Collections
Imports System.Text
Imports System.Web
Imports System.Web.Mvc
Imports System.Runtime.CompilerServices
  
  
Namespace HtmlHelpers
  
    Public Module ListExtensions
  
        <Extension()> _
        Public Function OrderedList(ByVal HtmlHelper As HtmlHelper, ByVal items As Object) As String
            Return "<ol>" + ListExtensions.GetListItems(items) + "</ol>"
        End Function
  
        <Extension()> _
        Public Function UnorderedList(ByVal HtmlHelper As HtmlHelper, ByVal items As Object) As String
            Return "<ul>" + ListExtensions.GetListItems(items) + "</ul>"
        End Function
  
  
        Private Function GetListItems(ByVal items As Object) As String
            If items Is Nothing Then
                Throw New ArgumentNullException("items")
            End If
            If Not TypeOf items Is IEnumerable Then
                Throw New InvalidCastException("items must be IEnumerable")
            End If
  
            Dim EnumItems As IEnumerable = CType(items, IEnumerable)
            Dim builder As New StringBuilder()
            For Each item As Object In EnumItems
                builder.AppendFormat("<li>{0}</li>", HttpUtility.HtmlEncode(item.ToString()))
            Next
            Return builder.ToString()
        End Function
  
    End Module
End Namespace

Listing 1 – ListExtensions.cs (C#)

using System;
using System.Collections;
using System.Text;
using System.Web;
using System.Web.Mvc;
  
namespace BulletedListHelper.HtmlHelpers
{
    public static class ListExtensions
    {
        public static string OrderedList(this HtmlHelper helper, Object items)
        {
            return "<ol>" + ListExtensions.GetListItems(items) + "</ol>";
        }
  
        public static string UnorderedList(this HtmlHelper helper, Object items)
        {
            return "<ul>" + ListExtensions.GetListItems(items) + "</ul>";
        }
  
  
        private static string GetListItems(Object items)
        {
            if (items == null)
                throw new ArgumentNullException("items");
            if (items is IEnumerable == false)
                throw new InvalidCastException("items must be IEnumerable");
  
            var enumItems = (IEnumerable)items;
            var builder = new StringBuilder();
            foreach (Object item in enumItems)
                builder.AppendFormat("<li>{0}</li>", HttpUtility.HtmlEncode(item.ToString()));
            return builder.ToString();
        }
  
    }
}

The ListExtensions class has two public methods: OrderedList() and UnorderedList(). You pass a collection of items to either method to display either a numbered or bulleted list of items. Notice that these methods return strings. Really, an HTML Helper method is nothing more than a method that renders a formatted string to the browser.

After you create the extension methods, you can use the methods in a View like this:

Listing 2 – Index.aspx

<%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="false" CodeBehind="Index.aspx.vb" Inherits="BulletedListHelper.Index" %>
<%@ Import Namespace="BulletedListHelper.HtmlHelpers" %>
  
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
  
  
   <h1>Movies (Ordered)</h1>
  
   <%= Html.OrderedList(ViewData.Model) %>
  
  
   <h1>Movies (Unordered)</h1>
  
  
   <%= Html.UnorderedList(ViewData.Model) %>
  
  
</asp:Content>

Notice that the BulletedList.HtmlHelpers namespace gets imported at the top of the file. The method Html.OrderedList() is used to render a numbered list and the method Html.UnorderedList() is used to render a bulleted list. Notice that these methods are being called on the HtmlHelper exposed by the Html property of the View just like any other extension method. When you open this View in a browser, you get the page in Figure 1:

Figure 1 – Index.aspx Rendered with Custom HTML Helpers

Finally, the Index() method exposed by the HomeController in Listing 3 illustrates how you can pass a collection of movie records to the Index.aspx View. The movie records are retrieved by taking advantage of a Linq to SQL query.

Listing 3 – HomeController.vb (VB.NET)

Public Class HomeController
    Inherits System.Web.Mvc.Controller
  
    Private db As New MoviesDataContext()
  
    Function Index()
        Dim movies = From m In db.Movies Select m.Title
        Return View(movies)
    End Function
  
   
End Class

Listing 3 – HomeController.cs (C#)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using BulletedListHelper.Models;
  
namespace BulletedListHelper.Controllers
{
    public class HomeController : Controller
    {
  
        private MoviesDataContext db = new MoviesDataContext();  
  
        public ActionResult Index()
        {
            var movies = from m in db.Movies select m.Title;
            return View(movies);
        }
  
    }
}

You can use this approach to render just about anything within an ASP.NET MVC View. For example, you can use a similar approach to create TreeViews, Menus, tabstrips, whatever.

Click Here to Download the Source Code

If you liked this blog post then please

Subscribe to this blog.