jquery multiselect – 从数据库分组

我正在使用jquery multiselect插件[ https://github.com/davidstutz/bootstrap-multiselect]并使用数据库值动态绑定它。

HTML

@Html.ListBoxFor(m => m.Classes, new SelectList(Model.Classes, "Value", "Text"), new { @id = "classList" }) 

脚本

 $('#classList').multiselect({ enableClickableOptGroups: true }); 

视图中的模型是视图模型，包含SelectList的属性

 public class SearchControlViewModel { .... public SelectList Classes { get; set; } } 

和控制器中的代码

 SearchControlViewModel model = new SearchControlViewModel() { .... Classes = new SelectList(repClass.GetClassesByYear(23), "classID", "classname") }; return View(model); 

它的作用就像一个魅力除了一件事 – 我想添加像那样的分组/组头。 我怎样才能做到这一点？

用于生成SelectList的GetClassesByYear()方法返回一个包含属性int classID ， string classname和string grade ，我希望能够按grade对选项进行分组。

Answer 1

MVC-4不支持选项组，您需要升级到MVC-5才能使用开箱即用的function。 如果您进行了升级，请参阅使用SelectGroup构造函数构建带有OptGroup组的选择列表 ，并通过生成IEnumerable

如果没有升级，您可以将表示您的组及其选项的模型传递给视图，并使用一些javascript / jquery来生成元素。 首先创建一些额外的视图模型

 public class OptionGroupVM { public string GroupName { get; set; } public IEnumerable Options { get; set; } } public class OptionVM { public string Value { get; set; } public string Text { get; set; } public bool IsSelected { get; set; } // Only applicable if your not binding to a model property } 

然后修改主视图模型以包括以下内容

 public class SearchControlViewModel { .... public IEnumerable SelectedClasses { get; set; } public IEnumerable ClassOptions { get; set; } } 

请注意，您当前的模型和ListBoxFor()是不正确的，因为

1. 你不能将绑定到Classes属性所在的复杂对象的集合 – 模型需要是值类型的集合，并且

2. 您不能对绑定的属性和SelectList使用相同的名称 – 如果我指定viewBag名称等于@ Html.DropDownListFor中的模型属性名称，那么是否会有任何冲突更多细节

在控制器中

 var data = repClass.GetClassesByYear(23); var groupedOptions = data.GroupBy(x => x.grade).Select(x => new OptionGroupVM() { GroupName = x.Key.ToString(), Options = x.Select(y => new OptionVM() { Value = y.classId.ToString(), Text = y.classcame, }) }); SearchControlViewModel model = new SearchControlViewModel() { .... SelectedClasses = ...., // the values of the options that will be pre-selected ClassOptions = groupedOptions }; return View(model); 

并在视图中使用

 @Html.ListBoxFor(m => SelectedClasses, Enumerable.Empty(), new { id = "classList" }) 

这将最初生成而没有任何选项。 然后使用以下脚本生成选项