Asp.Net Mvc Selectpicker

Question

我想实现一个DropDownList多选择使用Bootstrap Selectpicker在我的应用程序中选择学校。

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

代码抛出错误，但我不能有显示所选项目的下拉列表。

Answer 1

声明一个模型类为您的网页

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