ASP.NET MVC DropDownList, MultiSelect and jQuery


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


Comments (8)

  1. Hello says:

    This is your blog ?

    haha 🙂

    Add to my favorite.

    and could you please give me one complete project which about that airtic

    http://www.asp.net/…/using-the-dropdownlist-helper-with-aspnet-mvc

    something is hard understand to me.if you give me ,i will try again.do my best

  2. J says:

    Thanks for sharing this.

    One question, how to make the selection is a required field in model entities (not allow null)?

  3. Most of your blogs are good Rick.

  4. Good one, But I want to create Dropdown with checkbox that's why i can select multiple values.

  5. SwastikMS says:

    I also want to create a multiselect dropdownlist having checkboxes without using any plugin.

  6. drumboy says:

    the download for the tutorial seems to be unavailable. Is there another source?

  7. johny says:

    Is there a provision to select all and deselect all?

  8. Is there a provision to select all and deselect all? says:

    Is there a provision to select all and deselect all?