我正在尝试在asp.net中创建一些级联的下拉列表。列表在页面加载时正确填充:
<div class="form-group">
@Html.LabelFor(m => m.Country)
@Html.DropDownListFor(m => m.Country, new SelectList(Model.CountriesDDL, "CountryCode", "Country"), "--Select--", new { @class = "form-control" })
</div>
<div class="form-group">
@Html.LabelFor(m => m.Region)
@Html.DropDownListFor(m => m.Region, new SelectList(Model.RegionsDDL, "CountryCode", "RegionName"), "--Select--", new { @class = "form-control" })
</div>
我在视图中使用jQuery / Ajax:
<script type="text/javascript">
$(document).ready(function () {
$("#Country").change(function () {
$("#Region").empty();
$.ajax({
type: 'POST',
url: '@Url.Action("GetRegionsByCountryCode")',
dataType: 'json',
data: { countryCode: $("#Country").val() },
success: function (data) {
$.each(data, function (index, value) {
$("#Regions").append('<option value="'
+ value.CountryCode + '">'
+ value.RegionName + '</option>');
});
},
error: function (ex) {
alert('Failed to retrieve regions.' + ex);
}
});
return false;
})
});
</script>
那就是调用一个控制器方法:
[HttpPost]
public JsonResult GetRegionsByCountryCode(string countryCode)
{
var regions = _uiRepository.GetRegionsByCountryCode(countryCode);
return Json(regions);
}
但是,当我从“国家/地区”下拉列表中更改选择时,会弹出一个对话框,提示:
Failed to retrieve regions.[object Object]
我不确定该错误的含义或如何调试此错误。我在控制器方法上设置了一个断点,但是它从未命中吗?
您的下拉ID是,Region
但您正在使用成功功能Regions
做出一个小的更改,它将起作用。
控制器:
public class MyCountry
{
public int CountryCode { get; set; }
public string Country { get; set; }
}
public class Region
{
public int CountryCode { get; set; }
public string RegionName { get; set; }
}
public class ViewModel
{
public List<MyCountry> Country { get; set; }
public List<Region> Region { get; set; }
}
public class DropDownExampleController : Controller
{
public ActionResult Index()
{
var model = new ViewModel();
var c1 = new MyCountry { Country = "South Africa", CountryCode = 1 };
var c2 = new MyCountry { Country = "Russia", CountryCode = 2 };
model.Country = new List<MyCountry> { c1, c2 };
var r1 = new Region { RegionName = "Gauteng", CountryCode = 1};
var r2 = new Region { RegionName = "Western Cape", CountryCode = 1 };
var r3 = new Region { RegionName = "Siberia", CountryCode = 2 };
model.Region = new List<Region> { r1, r2,r3};
return View(model);
}
[HttpPost]
public JsonResult GetRegionsByCountryCode(string countryCode)
{
var r1 = new Region { RegionName = "Gauteng", CountryCode = 1 };
var r2 = new Region { RegionName = "Western Cape", CountryCode = 1 };
var r3 = new Region { RegionName = "Siberia", CountryCode = 2 };
var regions = new List<Region> { r1, r2, r3 };
var results = regions.Where(r => r.CountryCode == Int32.Parse(countryCode)).ToList();
return Json(results);
}
}
看法:
@model MVCTutorial.Controllers.ViewModel
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#Country").change(function () {
var countryCode = $("#Country").val();
$("#Region").empty();
$.ajax({
type: 'POST',
url: '@Url.Action("GetRegionsByCountryCode")',
data: { countryCode: countryCode },
success: function (data) {
$.each(data, function (index, value) {
$("#Region").append('<option value="'
+ value.CountryCode + '">'
+ value.RegionName + '</option>');
});
},
error: function (ex) {
alert('Failed to retrieve regions.' + ex);
}
});
return false;
})
});
</script>
<div class="form-group">
Country
@Html.DropDownListFor(m => m.Country, new SelectList(Model.Country, "CountryCode", "Country"), "--Select--", new { @class = "form-control" })
</div>
<div class="form-group">
Region
@Html.DropDownListFor(m => m.Region, new SelectList(Model.Region, "CountryCode", "RegionName"), "--Select--", new { @class = "form-control" })
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句