ASP.NET MVC4下拉列表綁定到帶有JavaScript的復選框

Question

我有一個基於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：對不起，我的英語

Answer 1

如果我對您的理解正確，那么您想在每次單擊復選框時返回一個ID數組，然后在下拉列表中填充與ID對應的數據，對嗎？

我建議您使用MVC框架的全部功能為您完成繁重的工作，即：

• 返回局部視圖而不是（json）int數組
• 在局部視圖中，只需使用MVC的常規Model-View工具創建下拉菜單
• 將菜單插入主視圖中的占位符<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窗口中，但尚未對其進行測試，因此可能存在輸入錯誤

希望這可以幫助！