如何使用asp.net MVC将单选更改为带有复选框的多选下拉列表答案

【问题标题】：how to change single selection to multiselect dropdown with checkboxes using asp.net MVC如何使用asp.net MVC将单选更改为带有复选框的多选下拉列表
【发布时间】：2018-01-16 12:24:27
【问题描述】：

我使用下面的代码进行下拉

@if (ViewBag.EventContentTypeId == Convert.ToInt32(EventContentType.Events))
{
    <div class="col-sm-3 form-group input" style="padding-left:0">
        <div class="input-group">
            @Html.DropDownList("EventCategoryDDL", @ViewBag.EventCategories as IEnumerable<SelectListItem>, "-- Select Category --", new { @class = "form-control" })
            <span class="input-group-addon">
                <i class="fa fa-file-text" aria-hidden="true"></i>
            </span>
        </div>
    </div>
}

我想用复选框将这些更改为多选下拉菜单。

这是我的控制器代码，它在选择列表中，我无法修改为多选列表有没有办法更改为选择列表的多选列表。

ViewBag.EventCategories = ViewBag.EventContentTypeName == EventContentTypeString.Events.Value ? _commonService.GetEventCategoriesModel().Where(category =>category.OptionText != "Camp Kaufmann").Select(i => new SelectListItem()
{
    Text = i.OptionText,
    Value = i.OptionValue.ToString()
})
_commonService.GetEventCategoriesModel().Select(i => new SelectListItem()
{
    Text = i.OptionText,
    Value = i.OptionValue.ToString()
});

我应该如何在控制器端更改为多选列表，以及如何将下拉菜单与多选复选框绑定。

【问题讨论】：

ASP.NET MVC multiple select dropdown的可能重复

标签： javascript c# asp.net-mvc

【解决方案1】：

您可以使用bootstrap-multiselect插件检查this链接。

操作方法

public ActionResult Index()
{

  List <SelectListItem> vegList = new List<SelectListItem>
  {
  new SelectListItem {Text = "Cheese",Value="1" },
  new SelectListItem {Text = "Mushrooms",Value="2" },
  new SelectListItem {Text = "Tomatoes",Value="3" },
  new SelectListItem {Text = "Onions",Value="4" }
  };

  ViewBag.Vegetables = vegList;

    return View();
}




[HttpPost]
public ActionResult AddVegetables(string[] VegetablesDDL)
{
  var selectedVegetablesIDs = VegetablesDDL.ToList();

  foreach(var selected in selectedVegetablesIDs)
  {
    // use selected item
  }

      return View();
}

查看：

@using (Html.BeginForm("AddVegetables", "Home", FormMethod.Post))
{
    @Html.Label("Vegetables:")
    <br />
    <br />
  @Html.DropDownList("VegetablesDDL", @ViewBag.Vegetables as IEnumerable<SelectListItem>, "-- Select Vegetables 
  --", new { @class = "form-control", multiple = "multiple" })
    <br />

    <input type="submit" value="Submit" />
}

脚本：

<script type="text/javascript">
$(document).ready(function() {
    $('#VegetablesDDL').multiselect();
});
</script>

注意：

在页面头部添加bootstrap-multiselect.css，在页面底部添加bootstrap-multiselect.js。

最好使用ViewModels 而不是ViewBag 检查this。

参考：

【讨论】：