ASP Net Core 3.1 MVC中的级联下拉菜单

Question

我正试图在ASP.NET Core 3.1中使用jQuery和Ajax创建级联下拉列表，但似乎无法找到解决方案。

这些是我的模型类：

public class CountryStateViewModel
{
public int CountryId { get; set; }
public int StateId { get; set; }
}
public class Country
{
public int CountryId { get; set; }
public string CountryName { get; set; }
}
public class State
{
public int CountryId { get; set; }
public int StateId { get; set; }
public string StateName { get; set; }
}

以下是我的控制器方法：

public ActionResult DropDown()
{
List<Country> CountryList = new List<Country> { new Country { CountryId = 1, CountryName = "Sweden" }, new Country { CountryId = 2, CountryName = "Norway" } };
ViewBag.CountryList = new SelectList(CountryList, "CountryId", "CountryName");
return View();
}
public JsonResult GetStateList(int CountryId)
{
List<State> StateList = new List<State> { new State { StateId=1,CountryId = 1, StateName = "Stockholm" }, new State { CountryId = 1, StateName = "Malmö", StateId=2 } };
return Json(StateList);
}

这是我对脚本的看法：

<div class="container">
<div class="form-group">
@if (ViewBag.CountryList != null)
{
@Html.DropDownListFor(model => model.CountryId, ViewBag.CountryList as SelectList, "--Select Country--", new { @class = "form-control" })
}
</div>
<div class="form-group">
@Html.DropDownListFor(model => model.StateId, new SelectList(" "), "--Select State--", new { @class = "form-control" })
</div>
</div>
<script src="~/https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#CountryId").change(function () {
$.get("/Forum/GetStateList", { CountryId: $("#CountryId").val() }, function (data) {
$("#StateId").empty();
$.each(data, function (index, row) {
$("#StateId").append("<option value='" + row.StateId + "'>" + row.StateName + "</option>")
});
});
})
});
</script>

最后，我尝试以以下方式配置我的startup.cs，以便它处理发送JSON对象：

services.AddControllers().AddNewtonsoftJson();

我没能做到这一点。我想知道问题是否在于调用脚本？这些是我在Chrome的开发者工具中的控制台选项卡下看到的错误：

jquery.unobtrusive-ajax.min.js:1 Failed to load resource: the server responded with a status of 404 ()
jquery.min.js:1 Failed to load resource: the server responded with a status of 404 ()
jquery.min.js:1 Failed to load resource: the server responded with a status of 404 ()
jquery.unobtrusive-ajax.min.js:1 Failed to load resource: the server responded with a status of 404 ()

当我启动视图时，我可以看到两个下拉列表，但当我选择一个国家时，第二个下拉列表中没有显示任何州(只有两个选项表示未定义(。

Answer 1

已解决！这需要一些来回，但我想我会分享我所做的，以防其他人遇到类似的问题。这就是我修改脚本的方式：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#CountryId").change(function () {
$.get("GetStateList", { CountryId: $("#CountryId").val() }, function (data) {
$("#StateId").empty();
$.each(data, function (index, row) {
$("#StateId").append("<option value='" + row.StateId + "'>" + row.StateName + "</option>")
});
});
})
});
</script>

我所做的唯一改变是$.get。我也使用开发工具来检查我的实际指导位置。我做的第二个改变是对is控制器：

public JsonResult GetStateList(int CountryId)
{
List<State> StateList = new List<State>();
if (CountryId == 1)
{
StateList = new List<State> { new State { StateId = 1, CountryId = 1, StateName = "Stockholm" }, new State { CountryId = 1, StateName = "Malmö", StateId = 2 }, new State { CountryId = 1, StateId = 3, StateName = "Göteborg" } };
}
else
StateList = new List<State> { new State { StateId = 1, CountryId = 1, StateName = "Oslo" }};
return Json(StateList, new Newtonsoft.Json.JsonSerializerSettings());
}

在这里，我所做的更改是通过添加来更改返回线路

new Newtonsoft.Json.JsonSerializerSettings()