Blazor Server实现按条件下拉选项切换显示/隐藏对应下拉列表

要实现根据condition下拉框的选中值切换显示服务器/数据库下拉列表，你可以利用Blazor的条件渲染功能，结合绑定变量来控制元素的显示隐藏。

步骤1：添加绑定变量 #

在组件的@code块中声明一个变量，用于绑定condition下拉框的选中值：

@code {
    // 绑定condition下拉的选中值，默认选中0（Servers）
    private int SelectedCondition { get; set; } = 0;

    // 保留你原有的其他变量：appfilter、ServerNameDrop、dbdata等
}

步骤2：完善condition下拉框代码 #

补全condition下拉框的代码（如果已有，确保@bind指向上面的SelectedCondition变量）：

<div class="col-md-3 col-lg-2">
    <div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
        <span class="text-sm mb-0 text-capitalize font-weight-bold">Condition</span>
        &nbsp;&nbsp;
        <select id="condition" class="form-select" @bind="SelectedCondition">
            <option value="0">Servers</option>
            <option value="1">DataBases</option>
        </select>
    </div>
</div>

步骤3：添加条件渲染控制 #

修改你原有的服务器和数据库下拉框容器，用@if判断是否显示：

<div class="row">
    <div class="col-lg-12 col-12 row">
        <!-- 条件选择下拉框 -->
        <div class="col-md-3 col-lg-2">
            <div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
                <span class="text-sm mb-0 text-capitalize font-weight-bold">Condition</span>
                &nbsp;&nbsp;
                <select id="condition" class="form-select" @bind="SelectedCondition">
                    <option value="0">Servers</option>
                    <option value="1">DataBases</option>
                </select>
            </div>
        </div>

        <!-- 服务器下拉：仅当选中0时显示 -->
        @if (SelectedCondition == 0)
        {
            <div class="col-md-3 col-lg-2">
                <div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
                    <span class="text-sm mb-0 text-capitalize font-weight-bold">Servers</span>
                    &nbsp;&nbsp;
                    <select class="form-select" @bind="@appfilter.serverID">
                        <option value="0">--All--</option>
                        @foreach (var servers in ServerNameDrop)
                        {
                            <option value="@servers.serverID">
                                @servers.server_Name
                            </option>
                        }
                    </select>
                </div>
            </div>
        }

        <!-- 数据库下拉：仅当选中1时显示 -->
        @if (SelectedCondition == 1)
        {
            <div class="col-md-3 col-lg-2">
                <div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
                    <span class="text-sm mb-0 text-capitalize font-weight-bold">DataBases</span>
                    &nbsp;&nbsp;
                    <select class="form-select" @bind="@appfilter.databaseId">
                        <option value="0">--All--</option>
                        @foreach (var dbd in dbdata)
                        {
                            <option value="@dbd.dbid">
                                @dbd.dB_Name
                            </option>
                        }
                    </select>
                </div>
            </div>
        }
    </div>
</div>

原理说明 #

• @bind="SelectedCondition"会自动同步下拉框的选中值到变量中
• @if指令会根据变量值动态渲染对应的DOM元素，未满足条件的元素不会被渲染到页面中（完全隐藏，而非CSS隐藏）

内容的提问来源于stack exchange，提问作者ahmed abdelaziz