Adding your own HtmlHelper in ASP.NET MVC 3

I am new to MVC and I am trying to create my own extension method so that I can add onto the html helpers that are available in my razor views. Html.DropDownListFor() lets you create a drop down list for any propery on your model. I would like to create a helper called Html.StateDropDownListFor() that does the exact same thing, except loads the drop down with all 50 US states. This way I don't have to create a SelectList for every single state drop down that I create. What is the easiest way to do this? Right now I have this:

public static class ExtensionMethods
{
    public static MvcHtmlString StateDropDownList(this HtmlHelper html)
    {
        // ???
    }
}

Am I even close? I don't want to rebuild a whole text box helper, I just want to create a helper that utilizes the existing text box helper but does the SelectList for me. That way in my views I could just do Html.StateDropDownList(x => x.State)

Solution 1:

To use the custom helper method in your Razor views you will need to bring it into scope. There are two possible ways to do this:

1. Add a @using SomeNamespace in the top of your view with the namespace where the static class containing the helper is defined

2. In ~/Views/web.config, add:

   <system.web.webPages.razor>
       <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
           <pages pageBaseType="System.Web.Mvc.WebViewPage">
               <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="SomeNamspace" />
               </namespaces>
           </pages>
       </system.web.webPages.razor>
   

Once the custom helper is brought into scope in the view, Intellisense should be able to pick it and you could use it:

@Html.StateDropDownList()

Now you helper method needs to do something useful. You could either call existing helpers:

public static class ExtensionMethods
{
    public static MvcHtmlString StateDropDownList(this HtmlHelper html)
    {
        return html.TextBox("foo")
    }
}

or return some custom data:

public static class ExtensionMethods
{
    public static MvcHtmlString StateDropDownList(this HtmlHelper html)
    {
        return MvcHtmlString.Create("Hello world");
    }
}

If you have a strongly typed view and you wanted to use an expression:

using System.Web.Mvc;
using System.Web.Mvc.Html;

public static class ExtensionMethods
{
    public static MvcHtmlString StateDropDownList(
        this HtmlHelper<MyViewModel> html
    )
    {
        var stateList = new SelectList(new[]
        {
            new { Key = "Alabama", Value = "Alabama" },
            new { Key = "Idaho", Value = "Idaho" },
            new { Key = "California", Value = "California" }
        }, "Key", "Value");
        return Html.DropDownListFor(
            x => x.State, stateList, "-- Select a state --"
        );
    }
}

and then:

@Html.StateDropDownList()

Solution 2:

using System.Web.Mvc.Html;
public static MvcHtmlString StateDropDownList<TModel, TValue>( this HtmlHelper<TModel> html,
    Expression<Func<TModel, TValue>> expression ) {
        return html.DropDownListFor( expression, _stateList );
}

Would work. _stateList being an IEnumerable<SelectListItem>.