使用javascript将Asp.net mvc4下拉列表绑定到复选框

我有一个基于ASP.NET MVC4、SQL Server 2012、EF的项目。
在我的编辑表单中，我需要将下拉列表绑定到页面上显示的复选框。当选中下拉列表中的一个或多个复选框时，需要根据表中的特殊行从数据库加载值。下面是我的代码，以演示我在这一刻所拥有的：

控制器

public ActionResult StudentEdit(int id)
{
   Student student = repo.GetStudentById(id);

   ViewBag.EducationProgramBachelorId = new SelectList(
   context.EducationProgramBachelors, "EducationProgramBachelorId", "ProgramName",     
   student.EducationProgramBachelorId);
   return View(student);
}

public JsonResult ProgramList(int Id)
{
   var model = context.EducationProgramBachelors;
   var program = from s in model
                 where s.UniversityId == Id
                 select s;

   return Json(new SelectList(program, "EducationProgramBachelorId", "ProgramName"), JsonRequestBehavior.AllowGet);
}

public ActionResult ProgramList(int id){
    var model = context.EducationProgramBachelors;
    var program = from s in model
               where s.UniversityId == Id
               select s;

    return PartialView("studentProgram", program);
}

查看

@{     
  List<ViewModels.AssignedUniversities> universities = ViewBag.Universities;

  foreach (var university in universities)
  {
     <div>
         <input type="checkbox"
                class="checkboxUniversities"
                name="selectedLatUniversities"
                value="@university.UniversityNameShort"
                @(Html.Raw(university.IsSelected ? "checked=\"checked\"" : ""))/>
         @university.UniversityNameShort
     </div>
   }
}

@Html.DropDownList("EducationProgramBachelorId", String.Empty)

@{     
    List<ViewModels.AssignedUniversities> universities = ViewBag.Universities;

    foreach (var university in universities)
    {
        <div>
            <input type="checkbox"
                class="checkboxUniversities"
                name="selectedLatUniversities"
                value="@university.Id"
                @(Html.Raw(university.IsSelected ? "checked=\"checked\"" : ""))/>
                    @university.UniversityNameShort
        </div>
     }
}

 <div id="dropdown-placeholder"></div>

因为我不知道如何获取和发送UniversityId的int[]数组，以及如何在我的Json视图中转换它。有人能帮我解决这个问题吗

在这一行中，get（'/ControllerName/ProgramList/'+1，1-这是一个测试值，用于检查脚本是否工作

学生和大学之间是多对多的关系

---

注意：对不起，我的英语不好

如果我理解正确，您希望在每次单击复选框时返回一个ID数组，然后用与ID对应的数据填充下拉列表，对吗

我建议充分利用MVC框架为您完成繁重的工作，即：

• 返回部分视图而不是（json）int数组
• 在局部视图中，只需使用MVC:s普通模型视图工具创建下拉菜单
• 将菜单插入主视图上的占位符

它看起来像下面这样

控制器

public ActionResult StudentEdit(int id)
{
   Student student = repo.GetStudentById(id);

   ViewBag.EducationProgramBachelorId = new SelectList(
   context.EducationProgramBachelors, "EducationProgramBachelorId", "ProgramName",     
   student.EducationProgramBachelorId);
   return View(student);
}

public JsonResult ProgramList(int Id)
{
   var model = context.EducationProgramBachelors;
   var program = from s in model
                 where s.UniversityId == Id
                 select s;

   return Json(new SelectList(program, "EducationProgramBachelorId", "ProgramName"), JsonRequestBehavior.AllowGet);
}

public ActionResult ProgramList(int id){
    var model = context.EducationProgramBachelors;
    var program = from s in model
               where s.UniversityId == Id
               select s;

    return PartialView("studentProgram", program);
}

局部视图（名为“学生计划”）

这应该可以简化很多事情。大学的Id应该作为其值添加到复选框中，然后通过

change

函数的

target

属性获取

不过，有几点需要注意

我不知道你的

学生的确切结构，所以如果我做了一些错误的假设，你可能不得不调整

我直接在StackOverflow窗口中编写了这段代码，但还没有对其进行测试，因此可能会出现拼写错误

---

希望这有帮助！

这和我现在的情况一样。在这一行中，get（“/ControllerName/ProgramList/”+1，1-这是一个测试值，用于检查是否工作我的脚本，你的答案非常棒，但我仍然不知道我必须发送什么，而不是1真正的1-这是我复选框中选定的大学ID

@{     
    List<ViewModels.AssignedUniversities> universities = ViewBag.Universities;

    foreach (var university in universities)
    {
        <div>
            <input type="checkbox"
                class="checkboxUniversities"
                name="selectedLatUniversities"
                value="@university.Id"
                @(Html.Raw(university.IsSelected ? "checked=\"checked\"" : ""))/>
                    @university.UniversityNameShort
        </div>
     }
}

 <div id="dropdown-placeholder"></div>

$(function () {
    $(".checkboxUniversities").change(function (event) {
        var id = $(event.target).val();
        $.get('/ControllerName/ProgramList/' + id, function (data) {
            $("#dropdown-placeholder").html(data);
        });
    });
});