在ASP.NET MVC中使用带有复选框的下拉列表（组合框）

Question

你好，

我正在构建一个ASP.NET MVC 2应用程序，并且到目前为止已经使用了常规的下拉菜单：

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

现在我需要将此更改为下拉框带有复选框列表。这意味着两件事：

1. 模型必须更改，以便L1可以保存多个值（而不仅仅是int），也许还需要将Location1List从SelectList更改为某种列表？
2. DropDownListFor（ComboBox）必须更改为“DropDownCheckListFor”。

很重要的一点是，这必须尽可能基本，以便我们可以保持浏览器兼容性（即使在智能手机上）。

正如您所看到的那样，选择的值填充到模型对象中（由默认绑定程序）进行提交也很重要。

我已经查看了这个下拉列表：http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/ 它看起来很好，但我不确定如何将其翻译为ASP.NET MVC，以便所选值填充到模型对象中进行提交（就像DropDownListFor一样）。此外，这个jQuery解决方案可能过于复杂。

请给予建议。

- Banshee

Answer 1

记住 MVC 帮助程序只渲染 HTML 标记。所以根据您提供的页面上的说明，您只需要生成 <select> 元素的 HTML 标记即可。

<select multiple="multiple">

为了实现这一点，您需要使用Html.ListBoxFor而不是Html.DropDownListFor。然后，当您包含所有正确的javascript文件时，只需添加一个javascript块，它看起来像这样：

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

- Vadim

---

啊哈，这看起来很简单，我会尝试一下并回复你。 - Banshee

Answer 2

本教程展示了创建带有多选框的MVC多选下拉列表的完整逐步指南MVC中带有复选框的多选下拉列表。

您需要选择标签。

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

或者你可以使用 Html.ListBoxFor

你需要以下脚本

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

以下是 CSS 和脚本文件。

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

- PVivek