问题描述
当我从CityId
选择中选择一个国家时,我无法通过Ajax填充CountryId
选择。
我尝试更改jquery版本,但仍然无法正常工作。
有人可以告诉我我的错误在哪里吗?
查看:
<div class="row">
<div class="col-md-4 offset-md-4">
<form method="post">
<div asp-validation-summary="ModelOnly"></div>
<div class="form-group">
<label asp-for="CountryId" class="control-label"></label>
<select asp-for="CountryId" asp-items="Model.Countries" class="form-control"></select>
<span asp-validation-for="CountryId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CityId" class="control-label"></label>
<select asp-for="CityId" asp-items="Model.Cities" class="form-control"></select>
<span asp-validation-for="CityId" class="text-danger"></span>
</div>
</form>
</div>
</div>
控制器:
public async Task<JsonResult> GetCitiesAsync(int countryId)
{
var country = await _countryRepository.GetCountryWithCitiesAsync(countryId);
return Json(country.Cities.OrderBy(c => c.Name));
}
用于通过Ajax调用GetCitiesAsync
的Javascript代码:
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script type="text/javascript">
$(document).ready(function () {
$("#CountryId").change(function () {
$("#CityId").empty();
$.ajax({
type: 'POST',url: '@Url.Action("GetCitiesAsync")',dataType: 'json',data: { countryId: $("#CountryId").val() },success: function (cities) {
$("#CityId").append('<option value="0">(Select a city...)</option>');
$.each(cities,function (i,city) {
$("#CityId").append('<option value="'
+ city.id + '">'
+ city.name + '</option>');
});
},error: function (ex) {
alert('Failed to retrieve cities.' + ex);
}
});
return false;
})
});
</script>
}
谢谢!
解决方法
对我来说很好。
我从您的代码dotnetfiddle中做了一个小例子。
请注意,我尚未更改您的js代码。 这意味着问题是以下之一:
- 您将以不同于预期的形式从客户端返回json数据。
- 您的脚本损坏了。
- 您缺少脚本。
检查浏览器控制台中是否有错误,如果没有错误,请尝试更改正在运行的脚本,即,如果使用的是CDN,请更改CDN。
示例代码:
查看:
<div class="container">
<div class="col-md-6 col-md-offset-3">
@using (Html.BeginForm())
{
<select class="form-control" name="CountryId" id="CountryId">
<option value="0" selected>Select</option>
<option value="1">US</option>
<option value="2">UK</option>
</select>
<select class="form-control" name="CityId" id="CityId">
</select>
}
</div>
</div>
JavaScript:
$(function()
{
$("#CountryId").change(function ()
{
$("#CityId").empty();
$.ajax({
type: 'POST',url: '@Url.Action("GetCitiesAsync")',dataType: 'json',data: { countryId: $("#CountryId").val() },success: function (cities) {
if (cities.length == 0)
return;
$("#CityId").append('<option value="0">(Select a city...)</option>');
$.each(cities,function (i,city) {
$("#CityId").append('<option value="'
+ city.id + '">'
+ city.name + '</option>');
});
},error: function (ex) {
alert('Failed to retrieve cities.' + ex);
}
});
return false;
})
});
控制器:
[HttpPost]
public JsonResult GetCitiesAsync(int countryId)
{
if (countryId == 1)
{
return Json(new List<dynamic>() { new { name = "NewYork",id = 1 },new { name = "LosAngeles",id = 2 }});
}
else if (countryId == 2)
{
return Json(new List<dynamic>() { new { name = "London",new { name = "Manchester",id = 2 }});
}
else
{
return Json("");
}
}