DropDownListFor 带有用于多选的复选框答案

【问题标题】：DropDownListFor with checkboxes for multiple selectionDropDownListFor 带有用于多选的复选框
【发布时间】：2015-04-29 15:37:16
【问题描述】：

下面是我的代码（MVC 5），我希望在其中有一个下拉列表，可以选择多个项目。下拉列表中的每个项目都应该有一个复选框。 And when multiple items selected, comma separated list of items should appear.

我正在使用引导多选。

问题 -
下拉菜单显示默认项目为“未选择”。当我单击下拉列表时，不会出现下拉列表 - 但是当页面加载时，我会看到附加的项目列表。我还从页面来源确认了这一点。
下拉菜单的默认项目应该是“选择一个组”，因为我正在尝试绑定它。但是我不知道如何摆脱这个默认的“未选择”。

型号：

public List<Group> Groups
{
    get
    {
        List<Group> groups = new List<Group>();
        groups.Add(new Group() { Id = 1, Name = "AA" });
        groups.Add(new Group() { Id = 1, Name = "BB" });
        groups.Add(new Group() { Id = 1, Name = "CC" });
        return groups;
    }
    protected set { }
}

public IEnumerable<SelectListItem> DefaultGroupSelectItem
{
    get
    {
        return Enumerable.Repeat(new SelectListItem{Value = "-1", Text = "Select a Group"}, count: 1);   
    }
}

public IEnumerable<SelectListItem> GroupSelectList
{
    get
    {
        SelectList groupSelectList = new SelectList(Groups, "Id", "Name");
        return DefaultGroupSelectItem.Concat(groupSelectList);
    }
}

[Display(Name = "Group")]
public int[] SelectedGroupIds { get; set; }

控制器：

public ActionResult CreateTest()
{
    UserViewModel userViewModel = new UserViewModel();
    return View(userViewModel);
}

查看：

    @Html.LabelFor(model => model.SelectedGroupIds, new { @class = "control-label col-md-2" })
<div class="col-md-10">
    @Html.DropDownListFor(model => model.SelectedGroupIds,
                                      Model.GroupSelectList,
                                        new {@class = "multiselect", multiple = "multiple"})
    @Html.ValidationMessageFor(model =>model.SelectedGroupIds)
</div>

<script src="~/Scripts/jquery-2.1.1.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap-select.js"></script>
<script src="~/Scripts/bootstrap-multiselect.js"></script>

<script>
    $(document).ready(function () {        
        $('#SelectedGroupIds').multiselect();        
    });
</script>

谁能指导我缺少什么？

谢谢！

【问题讨论】：

标签： jquery asp.net-mvc-4 twitter-bootstrap-3

【解决方案1】：

Html.DropDownListFor 呈现单个选择。请改用Html.ListBoxFor。

【讨论】：

但我希望将列表作为下拉列表。
这根本不可能。下拉菜单仅支持单个选择。如果您需要选择多个，它将呈现为一个列表框。也许您可以找到一个 JavaScript 库，可以将其伪装成下拉菜单，但仅使用 HTML 是不可能的。

【解决方案2】：

我的错 :-( 有两个问题 -

第一：
查看我用于绑定到 DropDownList 的数据源。

  groups.Add(new Group() { Id = 1, Name = "AA" });
  groups.Add(new Group() { Id = 1, Name = "BB" });
  groups.Add(new Group() { Id = 1, Name = "CC" });

Id = 1 的所有项目这就是下拉列表点击没有得到正确处理的问题。

第二：
缺少一些 jQuery 和 Bootstrap 库 - 以下是所需库的完整列表：

    <!-- Following css and scripts required for multiselect in Html.DropDownListFor 
    <script src="/Scripts/jquery-2.1.1.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <link href="/Content/bootstrap/bootstrap.less" rel="stylesheet" />
    <link href="/Content/bootstrap-multiselect.css" rel="stylesheet" />
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/bootstrap-multiselect.js"></script>
    -->

另外，为了摆脱默认的“未选择”，我必须修改 bootstrap-multiselect.js 中定义的变量。

HTH。

【讨论】：

【解决方案3】：

如果您想使用下拉菜单，请遵循此技巧。

Bootstrap-select 将所有选定的值作为单个逗号分隔的字符串返回。使用 JavaScript 或 jQuery on change 方法选择此字符串并分配给隐藏字段作为其值。现在，这个隐藏字段值被设置为选择长字符串。提交表单时，隐藏字段的值也会提交给目标控制器。您可以使用 split 方法将这些值分开并根据您的要求使用。

请记住，这只是一个技巧，而不是正确的方法。

【讨论】：

【解决方案4】：

你必须使用类似的东西：

@Html.DropDownList("Forms", ViewBag.Forms as SelectList, new { @class = "form-control ", placeholder = "Select", multiple = "multiple" })

【讨论】：