DropDown(combobox) with checkboxes in 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 :

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?
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

Vadim · Accepted Answer · 2011-03-29 18:27:41Z

4

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

answered Mar 29, 2011 at 18:27

Vadim

18k5 gold badges41 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Banshee Over a year ago

Aha this looks easy, I will try it and return to you.

PVivek · Accepted Answer · 2016-09-19 07:16:28Z

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"/>

Collectives™ on Stack Overflow

DropDown(combobox) with checkboxes in ASP.NET MVC

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related