CODEWITHSUNDEEP
jqueryasp.net-mvccomboboxmodeldrop-down-menu
Banshee
Banshee

Reputation: 15807

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

Upvotes: 3

Views: 15089

Answers (2)

PVivek
PVivek

Reputation: 21

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

Upvotes: 0

Vadim
Vadim

Reputation: 17957

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

Upvotes: 4

Related Questions