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。我也使用了开发者工具来检查我的实际目标。我所做的第二个更改是对 was 控制器：

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()