Asp.Net Mvc 选择器

Question

我正在尝试使用 Bootstrap Select选择器在我的应用程序中选择学校来实现 DropDownList Multi Select。

我对MVC和JQuery不是很熟悉，因为我长期使用webforms，所以我在网上学习来完成。

场景如下：

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

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

填充下拉列表的代码：

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

代码没有抛出错误，但我无法显示包含所选项目的下拉列表。

Answer 1

为您的页面声明一个模型class

public class ClassViewModel {
  public List<int> SelectedSchools {get; set;}
  public List<SelectListItem> Schools {get; set;}
}

在您的控制器操作中设置所选学校。

设置您的视图模型

@model ClassViewModel

然后在您的视图中使用此代码显示下拉列表

 @Html.ListBoxFor(m=> m.SelectedSchools , Model.Schools, new {id = "MultiSelect", @class = "selectpicker form-control", title = "School" })

Asp.Net Mvc 选择器

Asp.Net Mvc Selectpicker

c#

jquery

asp.net-mvc

twitter-bootstrap

bootstrap-selectpicker