Banshee Banshee - 3 months ago 34
jQuery Question

DropDown(combobox) with checkboxes in ASP.NET MVC

Hi,

I am building a ASP.NET MVC 2 application and have so far used regular dropdowns :

<%: Html.DropDownListFor(model => model.LS.L1, Model.LS.Location1List, "-- choose place --", new { @class = "dd1" })%>


Now I need to change this to a dropdown with checkbox list instead. This means two things :


  1. The model most be changes so L1 can hold multiple values(instead of just a int), maby also the Location1List most be changed from SelectList to some kind of list?

  2. The DropDownListFor(combobox) most be changed to a "DropDownCheckListFor.



Its important that this is as basic as possible so we can maintain browser compability(even on smartphones).

As you can see its also important that the selected values is filled into a model object(by the default binder) on submit.

I have looked at this dropdown : http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

Its looks grate but Im not sure how to translate this to ASP.NET MVC so the selected values is filled in to a model object on submit(as the DropDownListFor does). Also this jquery solution might be unnecary complex.

Pleas advice

Answer

Remember MVC helpers just render HTML markup. So according to the instructions on that page you linked, you just need generate

<select multiple="multiple">

In order to do that you need to use Html.ListBoxFor instead of Html.DropDownListFor. Then when you've included all of the correct javascript files, you can simply add a javascript block. That looks like this:

$(function() {
   $('.dd1').multiselect();
});