如何在cshtml中基于ID用if else实现无JS/JQuery的下拉选项联动

你原来的代码核心错误是把前端DOM操作代码写在了服务器端的Razor块里——Razor代码是页面渲染时在服务器端执行的，这时候前端页面还没加载到浏览器里，document.getElementById这种前端JS代码根本无法获取到用户选择的值，自然没法动态生成第二个下拉框的选项。

下面提供两种可行的服务器端实现方案：

方案1：ASP.NET Web Forms 服务器控件（Web Forms项目适用） #

利用服务器端的DropDownList控件，开启自动回发，在后台事件中动态绑定第二个下拉框的选项：

前端CSHTML代码 #

<asp:DropDownList ID="ddlFirst" runat="server" CssClass="form-control" AutoPostBack="true" OnSelectedIndexChanged="ddlFirst_SelectedIndexChanged">
    <asp:ListItem Text="SomethingHere" Value="SomethingHere"></asp:ListItem>
    <asp:ListItem Text="其他选项" Value="OtherOption"></asp:ListItem>
</asp:DropDownList>

<asp:DropDownList ID="ddlSecond" runat="server" CssClass="form-control"></asp:DropDownList>

后台代码（对应页面的.cs文件） #

protected void ddlFirst_SelectedIndexChanged(object sender, EventArgs e)
{
    // 清空第二个下拉框原有选项
    ddlSecond.Items.Clear();
    
    // 根据第一个下拉框的选中值添加对应选项
    switch (ddlFirst.SelectedValue)
    {
        case "SomethingHere":
            ddlSecond.Items.Add(new ListItem("SomethingHere2", "SomethingHere2"));
            ddlSecond.Items.Add(new ListItem("SomethingHere3", "SomethingHere3"));
            break;
        case "OtherOption":
            ddlSecond.Items.Add(new ListItem("OtherSubOption1", "OtherSubOption1"));
            ddlSecond.Items.Add(new ListItem("OtherSubOption2", "OtherSubOption2"));
            break;
    }
}

方案2：ASP.NET Core 表单回发（Core项目适用） #

通过表单提交把第一个下拉框的选中值传到后端，后端根据值生成第二个下拉框的选项后返回页面：

定义ViewModel #

public class DropdownViewModel
{
    // 存储第一个下拉框的选中值
    public string SelectedFirstValue { get; set; }
    // 存储第二个下拉框的选中值（可选）
    public string SelectedSecondValue { get; set; }
}

前端CSHTML代码 #

<form method="post">
    <select class="form-control" id="SomethingHere" name="SelectedFirstValue" onchange="this.form.submit();">
        <option value="SomethingHere" @(Model.SelectedFirstValue == "SomethingHere" ? "selected" : "")>SomethingHere</option>
        <option value="OtherOption" @(Model.SelectedFirstValue == "OtherOption" ? "selected" : "")>其他选项</option>
    </select>

    <select class="form-control" id="SomethingHere2" name="SelectedSecondValue">
        @if (Model.SelectedFirstValue == "SomethingHere")
        {
            <option value="SomethingHere2">SomethingHere2</option>
            <option value="SomethingHere3">SomethingHere3</option>
        }
        else if (Model.SelectedFirstValue == "OtherOption")
        {
            <option value="OtherSubOption1">其他子选项1</option>
            <option value="OtherSubOption2">其他子选项2</option>
        }
    </select>
</form>

后端Controller代码 #

public IActionResult Index()
{
    // 初始化ViewModel
    return View(new DropdownViewModel());
}

[HttpPost]
public IActionResult Index(DropdownViewModel model)
{
    // 这里可以根据model.SelectedFirstValue从数据库/配置中获取对应的子选项数据
    // 比如：var subOptions = _service.GetSubOptions(model.SelectedFirstValue);
    // 然后把数据传给ViewModel，这里为了示例直接在前端判断，实际项目建议把选项数据放到ViewModel里

    return View(model);
}

注意事项 #

这两种方案都会触发页面回发（刷新），因为服务器端代码只能在页面渲染或表单提交时执行，无法像JavaScript那样实现无刷新的实时联动——如果想要无刷新体验，还是必须用到JavaScript或JQuery，这是客户端交互的本质决定的。

内容的提问来源于stack exchange，提问作者エース