Amadiere.com

Fourteen and a half crazy frog burpers

30th August 2011

ASP.NET MVC 3: Drop Down Lists / SelectLists

Filed under: JQuery,MVC — Tags: , — Alex Holt @ 10:42 pm

There are a number of very useful helpers that come as default with the ASP.NET MVC framework, but one that always seems to get people confused is the Html.DropDownListFor() helper method. So in this post, I’ll quickly go over the steps I use to populate the list, as well as some of the more funky features once it’s up and running!

In our example, there will simply be a single drop down list on a form that shows a list of countries, from which you can select and submit.

First, we need to build a view model that is going to be the contract that determines the data that the view can display.

1
2
3
4
5
6
7
8
9
public class IndexViewModel
{
    // Stores the selected value from the drop down box.
    [Required]
    public int CountryID { get; set; }
 
    // Contains the list of countries.
    public SelectList Countries { get; set; }
}

Once we’ve sorted that, we can create the action result methods for our index page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
public class HomeController : Controller
{
    [HttpGet]
    public ActionResult Index()
    {
        IndexViewModel viewModel = new IndexViewModel();
        viewModel.Countries = new SelectList(GetCountries(), "ID", "Name");
        return View(viewModel);
    }
 
    [HttpPost]
    public ActionResult Index(IndexViewModel viewModel)
    {
        viewModel.Countries = new SelectList(GetCountries(), "ID", "Name");
        if (!ModelState.IsValid)
            return View(viewModel);
 
        //TODO: Do something with the selected country...
        CMSService.UpdateCurrentLocation(viewModel.CountryID);
 
        return View(viewModel);
    }
}

You’ll notice there are two instances where we populate the Countries property on the viewModel, one in the HttpGet method and the other in the HttpPost. We do this so that the list of countries is available throughout our process. You see, unlike the CountryID which is submitted as part of the Request object (it’s part of the form collection), our list is never stored – it’s lost as soon as the user navigates away from that page. So we need to repopulate it. In reality, you may only need to repopulate it when the validation fails an you have to redraw the screen in the HttpPost method, so that could be moved.

Then, it’s just a simple case of adding this to my view:

@Html.DropDownListFor(x => x.CountryID, Model.Countries)

Or you could forcably add a blank value to the top with some “please select me, pretty please”-type text. e.g.

@Html.DropDownListFor(x => x.CountryID, Model.Countries, "- please select -")

And there you have it! A working drop down box using MVC 3 and Razor views.
Now for some more fancy stuff. If you’re interested in styling your menu, then you can’t really go far wrong with jQuery UI SelectMenu (of which there are a few demos available, as well as a separate tutorial). To set up, you only need to do a few things:

  • Download JQuery & JQueryUI and add to your solution. You can now do this step through NuGet, or manually by “Add Existing Item” and downloading from the respective site.
  • Add a reference to the .js and .css files to the header of your html header, often set by the _Layout.cshtml file. Something like the following:
   <link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" />
   <script type="text/javascript" src="@Url.Content("></script>
   <script type="text/javascript" src="@Url.Content("></script>
  • Download and add the SelectMenu .js and .css files in much the same way.
<link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/selectmenu.css")" />
<script src="@Url.Content("~/Scripts/selectmenu.js")" type="text/javascript"></script>
  • Then all that lies to do is to set it off going:
<script type="text/javascript">
   $('select').selectmenu();
</script>

The last bit we added there simply makes this apply for every single select box that is on the page. As an aside, when doing AJAX or JQuery where you may potentially add an additional drop down list, you will need to call .selectmenu() to ensure that your new box appears like the others. It’s also worth noting that you may find if your page isn’t a fast loader, the standard drop down box (unstyled) will appear for a brief period.

1 Comment »

  1. Comment by mvcmonkey80 — 22nd September 2011 @ 9:58 pm

    Woa. this way was way easier than the way I’ve been doing it thanks!!

Leave a comment

*

Theme designed & built for Amadiere.com by Alex Holt. Powered by WordPress