Question

我在下面的代码中使用下拉列表

@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>
}

我想通过复选框将这些更改为多选下拉列表。

这是我的控制器代码，这是在selectlist中，我无法修改为multiselectlist是他们改变选择列表的多选列表的方法。

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

我应该如何在控制器端更改为multiselectlist，以及如何使用multiselct复选框绑定下拉列表。

Answer 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。

参考：

1.

2.

如何使用asp.net MVC

1 个答案: