Chosen Multiselect Dropdown List with ASP.Net MVC3

  • Home
  • ASP.net
  • Chosen Multiselect Dropdown List with ASP.Net MVC3

I recently came up against a UI where I needed to do some fancy stuff with the dropdown list. I decided to go with the Chosen Plugin. As I went on with my project, I quickly realized that multiselect dropdowns and pretty tricky with MVC3 (well, at least confirming to the MVC guidelines). While searching around, I noticed that a lot of other people also face a lot of issues with it. Therefore, I decided to write up a quick and simple guide that could get you going with fancying your dropdown lists.

Before you begin, make sure you have the latest version of the Chosen plugin referenced in a new MVC3 project. Once you have that, we will proceed to create a simple multiselect dropdown box (fancied up with Chosen) that lets the user select 2 favorite cars, from a list of 6. I tried making this project realistic so that any database storage and retrieval would also make sense.

As usual, we will begin with the model.  We would want our model to primarily keep track of cars, but specifically, for the dropdown to work, we want to keep track of selected cars, and a list of all cars. Here is how it would look:

Of course, a more mature model would look a bit different. You would probably have a class for a car object. And your list wouldn’t be a generic SelectListItem — you get the point. For the purpose of this demo, this should do.

Once we have that, let us try to emulate a typical controller that would take values off a database, render it to a view and likewise, take values off a view and store it to the database. I have not set up a database for the demo, so I will replicate some of the database part from within the controller’s method. Here is how I have set up the controller.

In the controller, I have a car list of total of 8 cars. I have also created the selected list (cars 1 and 2) to be pre-selected when the view is rendered, intended to emulate when you retrieve things from the database. Also, notice that the values of the SelectListItems are string not int. The MVC engine, ignores any int IDs, so be careful if you are creating your own car class, that either the ID needs to be a string, converted to string, or generated as unique Guid.

And finally, the view. In the view, we not only want to bind the dropdownlist with our model, but also activate the chosen plugin. Remember, this will be a strongly types view. Here is how it will look like.

The JS script activates chosen, sets a max number for selects, along with some other options. Refer to the documentations for more details.

You can view the demo of this project here.

Well, that’s it. Good luck fancying up your own dropbox. Hope this solved some issue with the multi-select dropdownlist.

Tags:
Blog Comments

I was reading through some of your blog posts on this internet site and I believe this site is rattling informative! Retain putting up.

This was really a fascinating subject, I am very lucky to have the ability to come to your weblog and I will bookmark this page in order that I might come back one other time.

Lots of beneficial in a row. I give rise to bookmarked your place.

As I web site possessor I believe the content matter here is rattling excellent , appreciate it for your efforts. You should keep it up forever! Good Luck.

instead of passing a model can you pass a list in the viewbag and use that for the multiselect, and chosen jquery?

Yes, that could work. Just get the list from the ViewBag into a JS var using @. However, passing the selected value back to the model in this case may get a bit tricky.

please upload “chosen.jquery.min.js”

how do I load the multiselect, and also who are some check

Would like to resonate what others already expressed.
Your blog helped me setup a multiselect view in MVC.
Keep up the good work! (y)

Thanks!

Demo is not working!!!!

The demo link is not working.

This web site really has all the information I wanted concerning this subject and
didn’t know who to ask.

Fascinating blog! Is your theme custom made or did you download it from somewhere?
A theme like yours with a few simple adjustements would really make my blog stand out.

Please let me know where you got your design. Thanks

hello!,I like your writing so much! share we communicate more about your article on AOL? I require an expert on this area to solve my problem. Maybe that’s you! Looking forward to see you.

Amazing! This blog looks exactly like my old one!
It’s on a entirely different topic but it has pretty much the same page layout and design.
Wonderful choice of colors!

I’m curious to find out what blog system you are utilizing?

I’m experiencing some minor security problems with
my latest website and I would like to find something
more safeguarded. Do you have any recommendations?

Just a smiling visitant here to share the love (:, btw great design.

Thanks, post still valid in mvc 5

Hi,
I am trying to add a multiselect drop-down list on my asp.net application (not mvc).
I am using DropdownlistChosen , how can i implement multselect in my app.

Thanks a lot.
Pareed

Thanks!

Thank So Much I implemented this code and worked well.

Same as how to implement searchable Dropdownlist webform

Leave a Comment