c# - 使下拉列表依赖于 MVC Core 中的另一个下拉列表

Question

这类似于提出的问题 Drop-down box dependent on the option selected in another drop-down box除了我想使用 C# 类来保留下拉值列表而不是纯 html。上一个问题中使用的 jQuery 不适用于我正在尝试做的事情。
我希望用户选择车辆制造商，然后让模型列表取决于选择的制造商
C# 类:DropDowns.cs

public static List<SelectListItem> MakeList (string defaultLabel = "---"){

    List<SelectListItem> makeList = new List<SelectListItem>();

    makeList.Add(new SelectListItem {Text="defaultLabel", Value = ""});
    makeList.Add(new SelectListItem {Text="Ford", Value = "Ford"});
    makeList.Add(new SelectListItem {Text="Toyota", Value = "Toyota"});

    return makeList;}

public static List<SelectListItem> ModelList (string defaultLabel = "---"){

    List<SelectListItem> modelList = new List<SelectListItem>();

    modelList.Add(new SelectListItem {Text="defaultLabel", Value = ""});

    //Ford models
    modelList.Add(new SelectListItem {Text="F-150", Value = "F-150"});
    modelList.Add(new SelectListItem {Text="Mustang", Value = "Mustang"});

    //Toyota models
    modelList.Add(new SelectListItem {Text="Rav4", Value = "Rav4"});
    modelList.Add(new SelectListItem {Text="Tundra", Value = "Tundra"});

    return modelList;}

HTML:myView.cshtml

<select name="make" asp-for="Make" asp-items="DropDowns.MakeList()"></select>
<select name="model" asp-for="Model" asp-items="DropDowns.ModelList()"></select>

我不确定是否可以将 jQuery 用于 asp 项目。也许我需要在我的模型列表中添加 if 语句？

Answer 1

asp-items依赖服务端来解析，如果这样动态改变下拉列表，客户端和服务端需要保持实时交互。所以这个方法是不可能的。你需要使用jQuery。
当您看到页面时，asp-items已被解析为 html。这时候可以通过jQuery改变html。

<select name="make" asp-for="Make" asp-items="DropDowns.MakeList()"></select>
<select name="model" asp-for="Model" asp-items="DropDowns.ModelList()"></select>
@section Scripts{ 
<script>
    $(function () {
        let model = $('#Model').children()
        $('#Make').change(function () {
            let make = $(this).val()
            if (make == 'Ford') {
                $('#Model').empty()
                $('#Model').append(model)
                $('#Model option').eq(4).remove()
                $('#Model option').eq(3).remove()
            } else if (make == 'Toyota') {
                $('#Model').empty()
                $('#Model').append(model)
                $('#Model option').eq(2).remove()
                $('#Model option').eq(1).remove()
            }
        })
    })
</script>
}