Blazor Server(.NET8)中InputSelect动态绑定及选项互斥问题

一、修复InputSelect点击加载选项的问题 #

问题分析 #

你的代码存在两个核心问题：

• 事件触发时机不符合预期：@onfocus会在组件获得焦点时立即触发，而非点击展开下拉列表时；之前尝试的@onselect是选中选项时触发，也不是展开加载的时机。
• 数据更新后未确保UI同步：即使添加了选项，若未通知Blazor状态变化，界面可能不会更新；同时每次加载未清空旧数据，会导致重复选项堆积。

修正后的代码 #

@rendermode InteractiveServer

<div>
    <InputSelect @bind-Value=SelectedVenue style="width:100px" @onclick="LoadVenuesOnClick">
        @foreach (var venue in venueNames)
        {
            <option value="@venue">@venue</option>
        }
    </InputSelect>
</div>

@code {
    private List<string> venueNames = new() { "None" };
    private string SelectedVenue = "None";

    private void LoadVenuesOnClick()
    {
        // 清空原有选项，保留默认的"None"
        venueNames.Clear();
        venueNames.Add("None");
        
        var availableVenues = venueDL_GLOBAL.GetAvailableVenues(Hour, Day, MainHall);
        if (availableVenues != null)
        {
            venueNames.AddRange(availableVenues);
        }
        // 强制通知Blazor更新UI
        StateHasChanged();
    }
}

关键修改点 #

• 改用@onclick事件：点击下拉框时触发加载逻辑，完全匹配"点击加载选项"的需求；
• 加载前清空旧选项：避免重复添加同一批场馆；
• 调用StateHasChanged()：确保Blazor感知数据变化，重新渲染下拉选项。

如果GetAvailableVenues是异步方法，需调整为异步实现：

private async Task LoadVenuesOnClick()
{
    venueNames.Clear();
    venueNames.Add("None");
    
    var availableVenues = await venueDL_GLOBAL.GetAvailableVenuesAsync(Hour, Day, MainHall);
    if (availableVenues != null)
    {
        venueNames.AddRange(availableVenues);
    }
    StateHasChanged();
}

二、实现多个互斥选项的InputSelect #

该需求完全可行，核心思路是维护全局已选中选项集合，每个下拉框的可用选项为总可用场馆减去其他下拉框已选中的非默认值（保留自身当前选中值）。

实现代码示例 #

@rendermode InteractiveServer

<div style="display: flex; gap: 10px;">
    <InputSelect @bind-Value=SelectedVenue1 style="width:100px" @onclick="() => LoadVenuesForSelect(1)">
        @foreach (var venue in GetAvailableVenuesForSelect(1))
        {
            <option value="@venue">@venue</option>
        }
    </InputSelect>

    <InputSelect @bind-Value=SelectedVenue2 style="width:100px" @onclick="() => LoadVenuesForSelect(2)">
        @foreach (var venue in GetAvailableVenuesForSelect(2))
        {
            <option value="@venue">@venue</option>
        }
    </InputSelect>

    <InputSelect @bind-Value=SelectedVenue3 style="width:100px" @onclick="() => LoadVenuesForSelect(3)">
        @foreach (var venue in GetAvailableVenuesForSelect(3))
        {
            <option value="@venue">@venue</option>
        }
    </InputSelect>
</div>

@code {
    // 存储各下拉框的选中值
    private string SelectedVenue1 = "None";
    private string SelectedVenue2 = "None";
    private string SelectedVenue3 = "None";
    
    // 全局可用场馆列表，仅首次加载
    private List<string> allAvailableVenues = new() { "None" };

    private void LoadVenuesForSelect(int selectIndex)
    {
        // 仅首次加载时获取全局场馆数据
        if (allAvailableVenues.Count <= 1)
        {
            var venues = venueDL_GLOBAL.GetAvailableVenues(Hour, Day, MainHall);
            if (venues != null)
            {
                allAvailableVenues.AddRange(venues);
            }
        }
        StateHasChanged();
    }

    // 动态计算当前下拉框的可用选项（排除其他下拉框已选值）
    private List<string> GetAvailableVenuesForSelect(int selectIndex)
    {
        var selectedOthers = new List<string>();
        if (selectIndex != 1 && SelectedVenue1 != "None") selectedOthers.Add(SelectedVenue1);
        if (selectIndex != 2 && SelectedVenue2 != "None") selectedOthers.Add(SelectedVenue2);
        if (selectIndex != 3 && SelectedVenue3 != "None") selectedOthers.Add(SelectedVenue3);

        return allAvailableVenues.Where(v => !selectedOthers.Contains(v)).ToList();
    }

    // 选中值变化时自动更新所有下拉框的可用选项
    protected override void OnParametersSet()
    {
        StateHasChanged();
    }
}

核心逻辑说明 #

1. 全局场馆集合：首次加载时获取所有可用场馆，避免重复调用接口；
2. 动态过滤选项：每个下拉框渲染时，排除其他下拉框已选中的非"None"选项；
3. 自动同步UI：任意下拉框选中值变化时，触发StateHasChanged让所有下拉框重新计算可用选项。

如果需要支持动态添加下拉框，可将选中值改为列表存储（如List<string> SelectedVenues = new()），实现更灵活的扩展。

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