The current overload methods for System.Web.Mvc.HtmlHelper.DropDownList:

We can see that all the methods that provide a means for populating the elements work off of an IEnumerable object. The sticker here is the SelectListItem type. In order to pass data into the helper we need to package it up in SelectListItem objects. So our code that handles prepping data for the view will need to know about an MVC specific construct. Not that there is necessarily anything wrong with that, but it can be limiting to your decoupling efforts if you are into that sort of thing (which can be a very good thing to be into).

We can work around this by writing our own extension methods on the HtmlHelper class. Let's begin by writing an extension method in a static class for HtmlHelper.DropDownList. This extension method will allow us to pass in a string to represent the name to use for the HTML select element and a Dictionary collection object for the HTML option elements. The method will handle mapping the dictionary to a System.Web.Mvc.SelectList object that can then be passed to one of the existing DropDownList methods.

using System.Collections.Generic;
using System.Web.Mvc;
using System.Web.Mvc.Html;

namespace Website.Models
{
    public static class ExtensionMethods
    {
        public static MvcHtmlString DropDownList(this HtmlHelper helper, 
            string name, Dictionary dictionary)
        {
            var selectListItems = new SelectList(dictionary, "Key", "Value");
            return helper.DropDownList(name, selectListItems);
        }
    }
}

The SelectList constructor supports passing in an IEnumerable object and two strings that represent the property names of the value field and text field to use from the objects in the enumerable collection. This makes it easy for us to pass in the incoming dictionary object and the name of the properties on the objects in the dictionary. Enumerating over a Dictionary object results in KeyValuePair objects that have properties named Key and Value, so those are the string values we would use to tell the SelectList object how to map the data. With the SelectList created, we can call the existing DropDownList method on the HtmlHelper and be on our way.

With the extension method in place we can turn our attention to crafting a view model and loading up data for populating a select list. Imagine we needed a select list for days of the week where the text is the name of the day and the value is an integer representing the day number in the week. If we were to create a class named PageWithSelectList as our view model, we could fill it out with the following:

using System.Collections.Generic;

namespace Website.Models
{
    public class PageWithSelectList
    {
        public Dictionary DaysOfWeek { get; set; }
        public int DayOfWeek { get; set; }

        public PageWithSelectList()
        {
            this.DaysOfWeek = new Dictionary
                                  {
                                      {1, "Sunday"},
                                      {2, "Monday"},
                                      {3, "Tuesday"},
                                      {4, "Wednesday"},
                                      {5, "Thursday"},
                                      {6, "Friday"},
                                      {7, "Saturday"}
                                  };
        }
    }
}

The DaysOfWeek would represent the data for the option elements. The DayOfWeek would represent the selected day key value (if any). The constructor handles loading up the DaysOfWeek with some data.

Moving to the controller, we can initialize an instance of the PageWithSelectList class and pass that to a view. Using a HomeController as an example, the Index action method could look like so:

using System.Web.Mvc;
using Website.Models;

namespace Website.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            var model = new PageWithSelectList();
            return View(model);
        }
    }
}

Before we turn our attention to the view file we need to address some details in the way the Razor view engine works. In previous versions of MVC you were able to add namespaces to the pages node in your main Web.config file to make them available to your view files without needing to add using statements within your views. With the Razor view engine there is a new node where these need to go () and they need to go into the Web.config file located in the Views directory.

With the default MVC 3 projects in Visual Studio 2010 this node will automatically be added to the Web.config files in the Views directories. In the example above we have added the Website.Models namespace to the list so our views will have access to it and thus be able to call our extension method.

Note
If you use Areas you will need to add namespace nodes to each Web.config in each Areas//Views directory if you want them available. Right now it doesn't look like adding the node to the top level Web.config is supported.

With those minor details handled we can build our view content. We make the view strongly typed to our Website.Models.PageWithSelectList class and add a call to our new extension method, passing in the name of our DayOfWeek property to align the html element id with our view model field and the DaysOfWeek object from our view model for populating the select options.

@model PageWithSelectList
@{
    ViewBag.Title = "Index";
}
@Html.DropDownList("DayOfWeek", Model.DaysOfWeek)

Since we added the Website.Models namespace to the Web.config file in the Views directory we do not need to use the namespace in our @model declaration, nor do we need to include a @using declaration. However, if we didn't add the namespace to the Web.config our view would look like:

@using Website.Models
@model PageWithSelectList
@{
    ViewBag.Title = "Index";
}
@Html.DropDownList("DayOfWeek", Model.DaysOfWeek)

The resulting html that gets rendered from the view looks like so:

    Sunday
    Monday
    Tuesday
    Wednesday
    Thursday
    Friday
    Saturday

With that, we have added some decoupling love to the HtmlHelper.DropDownList method! But the "out of the box" helper is not completely without love. In fact, it is tricked out to make our life extremely easy when it comes to pre-selecting an option in our view. Since our extension method is handling the mapping of our data structure into a structure the existing HtmlHelper.DropDownList method supports we get all the benefits of the existing method. The method will look for an existing property in the view model that matches the name value passed into the DropDownList method and will set the Selected property on the SelectListItem that has a matching value. By adding the DayOfWeek property to our PageWithSelectList view model we can set that property in our HomeController.Index action method and the HtmlHelper.DropDownList method will take care of things from there prior to rendering the html.

Setting the property on our model in the action method:

using System.Web.Mvc;
using Website.Models;

namespace Website.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            var model = new PageWithSelectList();
            model.DayOfWeek = 3;
            return View(model);
        }
    }
}

With no changes needed to our view, the resulting html that gets rendered:

    Sunday
    Monday
    Tuesday
    Wednesday
    Thursday
    Friday
    Saturday

Maybe a Dictionary is not ideal for what your application needs. No problem. Simply create extension methods that take in data structures that you need. If they implement IEnumerable you can use the same example code logic we have already set up. If they don't, just handle mapping your data structure manually in your extension method logic.

Don't like the notion of working with "magic strings"? Create an extension method for the HtmlHelper.DropDownListFor method:

using System;
using System.Collections.Generic;
using System.Linq.Expressions;
using System.Web.Mvc;
using System.Web.Mvc.Html;

namespace Website.Models
{
    public static class ExtensionMethods
    {
        public static MvcHtmlString DropDownList(this HtmlHelper helper, 
            string name, Dictionary dictionary)
        {
            var selectListItems = new SelectList(dictionary, "Key", "Value");
            return helper.DropDownList(name, selectListItems);
        }

        public static MvcHtmlString DropDownListFor(this HtmlHelper helper,
            Expression> expression, Dictionary dictionary)
        {
            var selectListItems = new SelectList(dictionary, "Key", "Value");
            return helper.DropDownListFor(expression, selectListItems);
        }
    }
}

Then in your view you can use a strongly typed expression to reference the view model property for the html select element name:

@model PageWithSelectList
@{
    ViewBag.Title = "Index";
}
@Html.DropDownListFor(i=>i.DayOfWeek, Model.DaysOfWeek)

Now get back to work and show those html select elements who's boss by bending your MVC code to your will!

Download the code