带有 SQL 数据库的 MVC 中的级联下拉列表

Question

我有两个下拉列表，分别是地区和学校。我希望每当我从列表中选择一个地区时，学校列表中的值都会同时改变。我正在使用 ajax 尝试将数据发布到另一个控制器，但学校列表根本没有改变。无论我选择哪个学区，它都包含所有学校的名称。我认为这与我的SchoolDistrictInformation 控制器中的Schools = new SelectList(db.Schools.ToList(), "schoolID", "name") 行有关。到目前为止，这是我正在使用的内容：

安全码是必须输入的代码，与所选的地区相对应。必须与数据库中的代码匹配，否则表单将无法提交。

查看模型：

public class DistrictSchoolListViewModel
{
    public SelectList Districts { get; set; }
    public SelectList Schools { get; set; }
    public string SelectedSchool { get; set; }
    public string SelectedDistrict { get; set; }
    [Required(ErrorMessage = "This code is required")]
    public string DistrictCode { get; set; }
}

控制器：

public ActionResult SchoolDistrictInformation()
{
    var viewModel = new DistrictSchoolListViewModel()
    {
        Districts = new SelectList(db.Districts.ToList(), "leaID", "name"),
        Schools = new SelectList(db.Schools.ToList(), "schoolID", "name")
    };
    return View(viewModel);
}

[HttpPost]
public ActionResult GetSchools(DistrictSchoolListViewModel model)
{
    var selectedDistrict = model.SelectedDistrict;
    var schools = findSchools(selectedDistrict);
    IEnumerable<SelectListItem> filteredSchools = 
    schools.Select(m => new SelectListItem { Text = m.name, Value = m.schoolID.ToString() });
    return PartialView("SchoolDistrictInformation", filteredSchools);
}

校表查询：

    internal IQueryable<School> findSchools(string district)
    {
        var query = from School in db.Schools
                    where School.leaID.Equals(district)
                    select School;
        return query;
    }

学区信息查看：

@model Staff_Form.Models.DistrictSchoolListViewModel 

<h2>Select District and School from list</h2>

<script type="text/javascript" src="/scripts/jquery-1.4.4.js"></script>
<script type="text/javascript">
$('#SelectedDistrict').on('change', function () {

    $.ajax({
        type: "POST",
        url: 'Controller/GetSchools',
        data: $(this).val(),
        success: function (response) {
            $('#SelectedSchool').html(response);
        }
    });

});

</script>

<div>
    <form action="@Url.Action("StaffInformation", "Staff")" method="get">
        District: @Html.DropDownListFor(m => m.SelectedDistrict, Model.Districts, "----Select----")
        Security Code: @Html.TextBoxFor(m => m.DistrictCode) <br />
        School: @Html.DropDownListFor(m => m.SelectedSchool, Model.Schools, "----Select----")
        <input type="submit" value="Submit" />
    </form>
</div>

获取学校视图：

@model System.Collections.Generic.IEnumerable<System.Web.Mvc.SelectListItem>
@{ Layout = null;}

@foreach (var school in Model)
{
    <option value="@school.Value">@school.Text</option>
}

感谢为解决此问题提供的任何和所有帮助。谢谢！

Answer 1

您的脚本位于带有 id="SelectedDistrict" 的元素之前，而不是包含在 $(document).ready() 中，因此您将事件附加到当时甚至不存在的元素。

将脚本移动到页面底部（紧接在结束 </body? 标记之前和/或将其包裹在 document.ready 中

$(document).ready(function() { // or $(function() {
    $('#SelectedDistrict').on('change', function () {
        ....
    });
});

旁注：将您的 jquery 版本更新到最新版本并考虑返回 json 以填充您的第二个下拉列表（请参阅 this answer）

Answer 2

当您将学区传回 GetSchools 操作时，您应该包含属性名称

$('#SelectedDistrict').on('change', function () {
    $.ajax({
        type: "POST",
        url: 'Controller/GetSchools',
        data: { SelectedDistrict: $(this).val() },
        success: function (response) {
            $('#SelectedSchool').html(response);
        }
    });
});