The most frequently posted question in the ASP.NET MVC forums is about how to use the DropDownList (DDL) helper. To address this question, I wrote the tutorial Using the DropDownList Helper with ASP.NET MVC, which covers most DropDownList scenarios. This blog post shows some of the highlights of my new Using the DropDownList Helper with ASP.NET MVC tutorial. This new tutorial starts with the completed Music Store tutorial project.

The DDL doesn't provide one common UI requirement: how do you insert new categories into the DDL? The image below shows the completed project, which allows you to insert new genres and artists into the Music Store DB.

p1finishedprod

Providing a simple and elegant mechanism to insert new category data was proving difficult, so I contacted super MVC blogger Radu Enucă for help. Radu came up with some great approaches which I used in the tutorial. Once I completed the prototype,  JavaScript Ninja Jean-Sébastien Goupil reviewed the code and suggested several best practice changes.  With these improvements, you can be assured that this sample jQuery is something you can mimic in your own web application.

The tutorial also shows how to use the terrific Harvest Chosen jQuery plugin  to make multiple selection easy and intuitive.  You can either make multiple selections, or add selections one by one. Once you add a selection, it’s removed from the dropdown. The interface makes it easy to remove a selection; all you do is click on the “x”.

ccj

The tutorial shows how to explicitly pass the SelectList to the DDL. It also demonstrates a frequently hit quirk in the ASP.NET MVC framework when using the SelectList, and how to work around it.

In my blog entry Cascading DropDownList in ASP.Net MVC, I provide a jQuery/JavaScript best practices sample of a Cascading DropDownList. Once again, JavaScript Ninja Jean-Sébastien Goupil reviewed my code and provided feedback and suggestions to make sure the JavaScript portion was using best practices.

In the sample, you navigate to the Cascading DDL URL and you are presented a list of countries.

Once you select a country (Canada is selected in the image below), a second DDL appears with the states that belong to the selected country. All this work is done asynchronously with jQuery, so you don’t have server post back and a flickering screen.

CascadingDDL_selectA_state

Once you select a state, the Submit button becomes visible.

I continually work on improving these tutorials as I receive feedback. Let me know how you like them, and please send me any problems you find.

Rick.Anderson at Microsoft.com