ASP.NET Core MVC无JS实现下拉框级联：选中Plate类型后展示对应Subtype

解决方案 #

不用JS实现级联下拉的核心逻辑是选中第一个下拉框时触发表单回传，将选中的Plate值传给后端，后端过滤对应Subtype后重新渲染视图，你只需要按下面的步骤修改现有代码即可：

第一步：修改控制器Action #

调整CreatePlate方法，新增参数接收选中的Plate值，并且将选中值回传给视图：

[Route("Home/CreatePlate/{name}")]
public IActionResult CreatePlate(string name, string selectedPlate = "")
{
    var model = countryData.GetCountry(name);
    // 把选中的Plate值传给视图
    ViewBag.SelectedPlate = selectedPlate;
    return View(model);
}

第二步：修改CreatePlate.cshtml视图 #

补全form标签，调整两个下拉框的渲染逻辑：

@model Generator.Country

@{ 
    ViewData["Title"] = "CreatePlate";
}

<h1>CreatePlate</h1>

<div>
    <h4>Country</h4>
    <hr />
    <!-- 新增form标签，触发提交时带回当前国家名称和选中的Plate值 -->
    <form method="get" asp-action="CreatePlate" asp-route-name="@Model.name">
        <dl class="row">
            <dt class="col-sm-2">

                <select id="Plate" name="selectedPlate" onchange="this.form.submit()">
                    @if (Model.plates != null)
                    {
                        <!-- 加默认提示项 -->
                        <option value="">请选择Plate类型</option>
                        foreach (var plate in Model.plates)
                        {
                            <!-- 选中回传后保持当前选中状态 -->
                            <option value="@plate.type" selected="@(plate.type == ViewBag.SelectedPlate)">@plate.type</option>
                        }
                    }
                </select>

                <select id="Subtype" name="Subtype">
                    @if (!string.IsNullOrEmpty(ViewBag.SelectedPlate) && Model.plates != null)
                    {
                        // 只过滤选中Plate对应的Subtype
                        var selectedPlateObj = Model.plates.FirstOrDefault(p => p.type == ViewBag.SelectedPlate);
                        if (selectedPlateObj != null && selectedPlateObj.subtypes.Any())
                        {
                            foreach (var subtype in selectedPlateObj.subtypes) 
                            {
                                <option value="@subtype.subtypeName">@subtype.subtypeName</option>
                            }
                        }
                        else
                        {
                            <option value="">该Plate下无可用Subtype</option>
                        }
                    }
                    else
                    {
                        <option value="">请先选择Plate类型</option>
                    }
                </select>

            </dt>
            <dd class = "col-sm-10">
            </dd>
        </dl>
    </form>
</div>

逻辑说明 #

1. 选中Plate下拉框的选项时会自动提交表单，把当前选中的Plate值和国家名称传给控制器
2. 控制器拿到选中的Plate值后存到ViewBag返回给视图
3. 视图渲染时根据ViewBag里的选中Plate值，只加载对应Plate下的Subtype到第二个下拉框
4. 全程不需要写任何JS代码，完全靠原生表单提交和服务端渲染实现级联效果

内容的提问来源于stack exchange，提问作者Sebastian Halik