Dave Arlin - Bloggin' - A Simple Extension of ASP.NET MVC HTMLHelper

Saturday, May 01, 2010

A Simple Extension of ASP.NET MVC HTMLHelper

If you’re an ASP.NET MVC developer, you’ve almost undoubtedly used HTML helpers, or at least the built in ones.

Here’s are some common ones:

 <%=Html.DropDownList("Countries","Choose Country")%>
 

This generates a DropDownList populated with the property “Countries” of type “SelectList” on the ViewData model passed into the view.

 <%=Html.TextBox("EntitySearch")%>
 

This generates a TextBox bound to the property “EntitySearch” on the ViewData model passed into the view. Can also be used to populate a property with the same name upon a form post.

In my current project, I’ve found the need to have many different buttons. These buttons are custom in the sense that they aren’t the standard HTML buttons, they have CSS and/or images associated with them. Here’s how I might declare a couple of them right now:

 <input type = "image" class = "addnew-button" />
 

 <%=Html.SubmitImage("Submit","~/images/submit-button.png") %>
 

So in both cases, I have to type in a string that kind of defines my button. In the first example, I have to say my button is an “image” and the class to use to style the button is called “addnew-button”.

In the second case, I have to define the actual path to the button. It’d be nice to have a more common and type safe way to declare all of my buttons, so I’ve created a Button HtmlHelper method. My goal is to be able to have code in my view like this:

 <%=Html.Button(ButtonHtmlHelper.ButtonType.AddNew) %>
 

 <%=Html.Button(ButtonHtmlHelper.ButtonType.Submit) %>
 

To do this, I created an extension method on the HtmlHelper class called button. This extension method can handle all my button types and has some overloads to accept a client id and any additional custom styling.

 namespace MyProject.HtmlHelpers
{
    public static class ButtonHtmlHelper
    {
        public enum ButtonType { AddNew, Remove, Ok, Cancel, Submit, Save, Search, Clear, Continue, Active, Inactive }
 
        public static string Button(this HtmlHelper htmlHelper, ButtonType buttonType)
        {
            return Button(htmlHelper, buttonType, null, null);
        }
 
        public static string Button(this HtmlHelper htmlHelper, ButtonType buttonType, string id)
        {
            return Button(htmlHelper, buttonType, id, null);
        }
 
        public static string Button(this HtmlHelper htmlHelper, ButtonType buttonType, string id, string inlineCSS)
        {
            StringBuilder addNewButtonHTML = new StringBuilder();
            addNewButtonHTML.Append(@");
            addNewButtonHTML.Append(GetButtonTypeCSSClassPrefix(buttonType));
            addNewButtonHTML.Append(@"-button"" type = ""image"" ");
 
            if (!string.IsNullOrEmpty(id))
                addNewButtonHTML.AppendFormat(@"id = ""{0}"" ", id);
 
            if (!string.IsNullOrEmpty(inlineCSS))
                addNewButtonHTML.AppendFormat(@"style = ""{0}"" ", inlineCSS);
 
            addNewButtonHTML.Append("/>");
 
            return addNewButtonHTML.ToString();
        }
 
        private static string GetButtonTypeCSSClassPrefix(ButtonType buttonType)
        {
            switch (buttonType)
            {
                case ButtonType.AddNew:
                    return "addnew";
                case ButtonType.Cancel:
                    return "cancel";
                case ButtonType.Ok:
                    return "ok";
                case ButtonType.Remove:
                    return "remove";
                case ButtonType.Submit:
                    return "submit";
                case ButtonType.Save:
                    return "save";
                case ButtonType.Search:
                    return "search";
                case ButtonType.Clear:
                    return "clear";
                case ButtonType.Continue:
                    return "continue";
                case ButtonType.Active:
                    return "active";
                case ButtonType.Inactive:
                    return "inactive";
                default:
                    throw new ArgumentException(string.Format("Unknown ButtonType of {0} was passed in.", buttonType));
            }
        }
    }
}
 

That’s all! Just make sure you either add a using statement on the view to the namespace where the HTMLHelper is, or put it in the web.config like I did in my project. (line 10)

     <namespaces>
        <add namespace="System.Web.Mvc"/>
        <add namespace="System.Web.Mvc.Ajax"/>
        <add namespace="System.Web.Mvc.Html"/>
        <add namespace="System.Web.Routing"/>
        <add namespace="System.Linq"/>
        <add namespace="System.Collections.Generic"/>
<add namespace="Microsoft.Web.Mvc"/>
<add namespace="xVal.Html"/>
<add namespace="MyProject.HtmlHelpers"/>
    namespaces>
 