Asp.net MVC4 下拉列表绑定到带有 JavaScript 的复选框

Asp.net mvc4 dropdown binding to checkboxes with javascript

本文关键字：JavaScript 复选框 net MVC4 下拉列表 绑定 Asp      更新时间：2023-09-26

我有一个基于 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);
}

视图

@{     
  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)

JS函数

$(function () {
    $(".checkboxUniversities").change(function () {
        $.getJSON('/ControllerName/ProgramList/' + 1, function (data) {
            var items = '<option>Select a Program</option>';
            $.each(data, function (i, program) {
                items += "<option value='" + program.Value + "'>" + program.Text + "</option>";
            });
            $('#EducationProgramBachelorId').html(items);
        });
    });
});

我在 JS 函数中的这一步停止了：

$.getJSON('/ControllerName/ProgramList/' + 1, function (data)

因为我不知道如何获取和发送我的 UniversityId 的 int[] 数组以及如何在我的 Json 视图中转换它。有人可以帮助我解决这种情况吗？

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

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

PS：对不起我的英语

如果我

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

我建议使用MVC框架的全部范围来为您完成繁重的工作，即：

  • 返回分部视图而不是 （json） int 数组
  • 在部分视图中，只需使用 MVC：s 常规模型视图工具创建下拉菜单
  • 将菜单插入主视图<div>占位符中

它看起来像下面这样。

控制器

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

部分视图（名为"学生程序"）

@model IEnumerable<Student>
@Html.DropDownFor("EducationProgramBachelorId", new SelectList(Model, "EducationProgramBachelorId", "ProgramName"))

主视图

@{     
    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>

jQuery

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

这应该会简化很多事情。大学的 Id 应作为其值添加到复选框中，稍后通过 change 函数的 target 属性获取。

不过，有一些警告。

  1. 我不知道你的Student类的确切结构，所以如果我做了一些错误的假设，你可能不得不调整它。

  2. 我把这段代码直接写进了StackOverflow窗口，还没有测试过，所以可能有错别字

希望这有帮助！

相关文章：