Asp.Net Mvc Selectpicker(Asp.Net Mvc Selectpicker)

我正在尝试使用Bootstrap SelectPicker来实现DropDownList Multi Select，以在我的应用程序中选择Schools。

我对MVC和JQuery不是很熟悉，因为我一直使用webforms很久，所以我正在从互联网上学习来完成。

这是一个场景：

在我的布局中，有一个DropDownList：

@*DropDownList Select School*@ @Html.DropDownList("Schools", null, null, new { id = "MultiSelect", @class = "selectpicker form-control", multiple = "", title = "School" })

填充DropDownList的代码：

public ActionResult Class() { IEnumerable<SelectListItem> ListClasses = db.scasy_class .OrderBy(a => a.class_name) .Select(c => new SelectListItem { Value = c.id.ToString(), Text = c.class_name, Selected = false }); ViewBag.Class = ListClasses.ToList(); ClassViewModel classViewModel = new ClassViewModel() { SelectOptions = ListClasses }; return View(classViewModel); }

在布局上，当用户选择一些学校时，使用下拉列表，

$('#MultiSelect').on('change', function () { $.each($("#MultiSelect option"), function () { $.post("/Setup/Student/SetSchool/", { school: $(this).val(), selected: $(this).prop('selected') }); }); });

和控制器;

public ActionResult SetSchool(int school, bool selected) { ArrayList school_nos = Session["Schools"] as ArrayList; if (selected) { if (!school_nos.Contains(school)) { school_nos.Add(school); } } else { if (school_nos.Contains(school)) { school_nos.Remove(school); } } Session["Schools"] = school_nos; return new HttpStatusCodeResult(HttpStatusCode.OK); }

它正在按预期工作，直到这里。对于下一次重新加载，我尝试使用相同的数据填充下拉列表，但使用会话值显示先前选中的学校使用会话值，因为我将在其他许多页面上使用此信息。

$(document).ready(function () { $.getJSON("/Setup/Student/GetSchool/", function (data) { var myData = []; $.each(data, function (index, item) { if (item.Selected == true) { myData.push(item.Value); } }); //alert(myData); $('#MultiSelect').selectpicker('val', myData); }); });

和控制器;

public JsonResult GetSchool() { IEnumerable<SelectListItem> ListSchools = db.scasy_school .OrderBy(a => a.name) .Select(a => new SelectListItem { Value = a.id.ToString(), Text = a.name}); ArrayList school_nos = Session["Schools"] as ArrayList; List<SelectListItem> ListSchoolsUpdated = new List<SelectListItem>(); foreach (var item in ListSchools) { SelectListItem selListItem; if (school_nos.Contains(item.Value.ToString())) { selListItem = new SelectListItem() { Value = item.Value.ToString(), Text = item.Text, Selected = true }; } else { selListItem = new SelectListItem() { Value = item.Value.ToString(), Text = item.Text, Selected = false }; } ListSchoolsUpdated.Add(selListItem); } return Json(ListSchoolsUpdated, JsonRequestBehavior.AllowGet); }

代码不会引发错误，但我无法显示所选项目的下拉列表。

I am trying to implement a DropDownList Multi Select using Bootstrap Selectpicker for selecting Schools in my application.

I am not very familiar with MVC and JQuery since i have been using webforms for a long time, so i am learning from internet to accomplish.

Here is the scenario:

on my layout, there is a DropDownList:

@*DropDownList Select School*@ @Html.DropDownList("Schools", null, null, new { id = "MultiSelect", @class = "selectpicker form-control", multiple = "", title = "School" })

The code to fill the DropDownList:

public ActionResult Class() { IEnumerable<SelectListItem> ListClasses = db.scasy_class .OrderBy(a => a.class_name) .Select(c => new SelectListItem { Value = c.id.ToString(), Text = c.class_name, Selected = false }); ViewBag.Class = ListClasses.ToList(); ClassViewModel classViewModel = new ClassViewModel() { SelectOptions = ListClasses }; return View(classViewModel); }

On layout, when the user selects some schools, using the dropdownlist,

$('#MultiSelect').on('change', function () { $.each($("#MultiSelect option"), function () { $.post("/Setup/Student/SetSchool/", { school: $(this).val(), selected: $(this).prop('selected') }); }); });

and the controller;

public ActionResult SetSchool(int school, bool selected) { ArrayList school_nos = Session["Schools"] as ArrayList; if (selected) { if (!school_nos.Contains(school)) { school_nos.Add(school); } } else { if (school_nos.Contains(school)) { school_nos.Remove(school); } } Session["Schools"] = school_nos; return new HttpStatusCodeResult(HttpStatusCode.OK); }

it is working as it is expected until here. For the next reload, i am trying to fill the dropdownlist with the same data but show previously selected schools with tick, using Session values, since i will need this information on many other pages.

$(document).ready(function () { $.getJSON("/Setup/Student/GetSchool/", function (data) { var myData = []; $.each(data, function (index, item) { if (item.Selected == true) { myData.push(item.Value); } }); //alert(myData); $('#MultiSelect').selectpicker('val', myData); }); });

and the controller;

public JsonResult GetSchool() { IEnumerable<SelectListItem> ListSchools = db.scasy_school .OrderBy(a => a.name) .Select(a => new SelectListItem { Value = a.id.ToString(), Text = a.name}); ArrayList school_nos = Session["Schools"] as ArrayList; List<SelectListItem> ListSchoolsUpdated = new List<SelectListItem>(); foreach (var item in ListSchools) { SelectListItem selListItem; if (school_nos.Contains(item.Value.ToString())) { selListItem = new SelectListItem() { Value = item.Value.ToString(), Text = item.Text, Selected = true }; } else { selListItem = new SelectListItem() { Value = item.Value.ToString(), Text = item.Text, Selected = false }; } ListSchoolsUpdated.Add(selListItem); } return Json(ListSchoolsUpdated, JsonRequestBehavior.AllowGet); }

Code throws no error, but i cannot have the dropdownlist with selected items shown.