1

I have a project based on ASP.NET MVC4, SQL Server 2012, EF.
In my edit form I need bind dropdown to checkboxes which display on the page. And when checked one or many checkboxes in the dropdown need to loading values from database which according to special rows in table. Here is my code to demonstrate what i have in this moment:

Controller

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

View

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

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

I'm stopped on this step in my JS function:

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

Because I don't know how i can get and send int[] array of my UniversityId and how transform it in the my Json View. Can anybody help me with this situation?

In this line get('/ControllerName/ProgramList/' + 1, 1 - it's a test value to check work or dont work my script.

Between Student and University is many-to-many relationships.

P.S.: Sorry for my English

4

1 回答 1

2

如果我对您的理解正确，您希望在单击复选框时返回一个 ID 数组，然后使用与 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);
}

部分视图（名为“studentProgram”）

@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窗口的，没有测试，所以可能有错别字

希望这可以帮助！

于 2013-09-11T11:00:53.503 回答