DropDown（组合框）与ASP.NET MVC中的复选框

Question

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 1

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();
});

Answer 2

This tutorial shows complete step by step guide for creating multiselect dropdown with checkboxes in mvc Multiselect dropdown with checkboxes in MVC

You Need Select Tag

<select id="CustomerId" name="CopyFromCustomerId"></select>

or you can use Html.ListBoxFor

You need following script

$('#CustomerId').multiselect({
            includeSelectAllOption: true
        });

And below css and script files

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>     
<script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>