Question

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

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

查看型号：

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

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

2 个答案: