asp.net MVC级联下拉列表

我正在尝试在asp.net中创建一些级联下拉列表。 列表在页面加载时正确填充：

 @Html.LabelFor(m => m.Country) @Html.DropDownListFor(m => m.Country, new SelectList(Model.CountriesDDL, "CountryCode", "Country"), "--Select--", new { @class = "form-control" }) 
 
 @Html.LabelFor(m => m.Region) @Html.DropDownListFor(m => m.Region, new SelectList(Model.RegionsDDL, "CountryCode", "RegionName"), "--Select--", new { @class = "form-control" })  

我在视图中使用jQuery / Ajax：

  $(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('' + value.RegionName + ''); }); }, error: function (ex) { alert('Failed to retrieve regions.' + ex); } }); return false; }) });  

那就是调用控制器方法：

  [HttpPost] public JsonResult GetRegionsByCountryCode(string countryCode) { var regions = _uiRepository.GetRegionsByCountryCode(countryCode); return Json(regions); } 

但是当我从“Country”下拉列表中更改select时，我会看到一个弹出对话框，其中显示：

 Failed to retrieve regions.[object Object] 

我不确定该错误意味着什么或我如何调试它。 我在控制器方法上设置了一个断点，但它从未命中过它？

Answer 1

您的下拉ID是Region但在您的成功function中，您正在使用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 Country { get; set; } public List 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 { 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 { 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 { r1, r2, r3 }; var results = regions.Where(r => r.CountryCode == Int32.Parse(countryCode)).ToList(); return Json(results); } } 

视图：

 @model MVCTutorial.Controllers.ViewModel   
 Country @Html.DropDownListFor(m => m.Country, new SelectList(Model.Country, "CountryCode", "Country"), "--Select--", new { @class = "form-control" }) 
 
 Region @Html.DropDownListFor(m => m.Region, new SelectList(Model.Region, "CountryCode", "RegionName"), "--Select--", new { @class = "form-control" })  

Answer 2

在ajax调用中添加contentType：’application / json’。

 $.ajax({ type: 'POST', url: '@Url.Action("GetRegionsByCountryCode")', dataType: 'json', contentType:'application/json' data: { countryCode: $("#Country").val() }, success: function (data) { $.each(data, function (index, value) { $("#Regions").append('' + value.RegionName + ''); }); }, error: function (ex) { alert('Failed to retrieve regions.' + ex); } });