javascript - 使用 asp.net core 3.1 mvc 的级联下拉列表
问题描述
当我从选择中选择一个国家/地区时,我无法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));
}
GetCitiesAsync
通过 Ajax调用的 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", id = 1 }, new { name = "Manchester", id = 2 }});
}
else
{
return Json("");
}
}