MVC 中带 SQL 数据库的级联下拉列表
Cascading Drop Down List in MVC w/ SQL Database
我有两个下拉列表,分别是 District & School。我希望每当我从列表中选择一个地区时,学校列表中的值都会同时更改。我正在使用 ajax 尝试将数据 post 发送到另一个控制器,但学校列表根本没有改变。它包含了所有学校的名称,无论我在哪个区select。我认为这与我的 SchoolDistrictInformation
控制器中的 Schools = new SelectList(db.Schools.ToList(), "schoolID", "name")
行有关。到目前为止,这是我正在使用的内容:
安全码是必须输入的密码,对应selected区。必须与数据库中的代码匹配,否则表单将无法提交。
查看模型:
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);
}
学校Table查询:
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>
}
感谢为解决此问题提供的所有帮助。谢谢!
当您将学区传回 GetSchools 操作时,您应该包括 属性 名称
$('#SelectedDistrict').on('change', function () {
$.ajax({
type: "POST",
url: 'Controller/GetSchools',
data: { SelectedDistrict: $(this).val() },
success: function (response) {
$('#SelectedSchool').html(response);
}
});
});
您的脚本位于带有 id="SelectedDistrict"
的元素之前,并且未包含在 $(document).ready()
中,因此您将事件附加到当时甚至不存在的元素。
将脚本移动到页面底部(紧接在结束 </body?
标记之前 and/or 将其包裹在 document.ready
内
$(document).ready(function() { // or $(function() {
$('#SelectedDistrict').on('change', function () {
....
});
});
旁注:将您的 jquery 版本更新为最新版本并考虑返回 json 以填充您的第二个下拉列表(参考 )
我有两个下拉列表,分别是 District & School。我希望每当我从列表中选择一个地区时,学校列表中的值都会同时更改。我正在使用 ajax 尝试将数据 post 发送到另一个控制器,但学校列表根本没有改变。它包含了所有学校的名称,无论我在哪个区select。我认为这与我的 SchoolDistrictInformation
控制器中的 Schools = new SelectList(db.Schools.ToList(), "schoolID", "name")
行有关。到目前为止,这是我正在使用的内容:
安全码是必须输入的密码,对应selected区。必须与数据库中的代码匹配,否则表单将无法提交。
查看模型:
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);
}
学校Table查询:
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>
}
感谢为解决此问题提供的所有帮助。谢谢!
当您将学区传回 GetSchools 操作时,您应该包括 属性 名称
$('#SelectedDistrict').on('change', function () {
$.ajax({
type: "POST",
url: 'Controller/GetSchools',
data: { SelectedDistrict: $(this).val() },
success: function (response) {
$('#SelectedSchool').html(response);
}
});
});
您的脚本位于带有 id="SelectedDistrict"
的元素之前,并且未包含在 $(document).ready()
中,因此您将事件附加到当时甚至不存在的元素。
将脚本移动到页面底部(紧接在结束 </body?
标记之前 and/or 将其包裹在 document.ready
$(document).ready(function() { // or $(function() {
$('#SelectedDistrict').on('change', function () {
....
});
});
旁注:将您的 jquery 版本更新为最新版本并考虑返回 json 以填充您的第二个下拉列表(参考