Blazor Server中如何更新MudSelect的Items选项？

问题场景 #

我有两个MudSelect控件，代码如下：

<MudSelect Class="pa-4" T="string" Label="Market" @bind-Value="Market" TextChanged="MarketChanged">
    @foreach (var market in markets)
    {
        <MudSelectItem T="string" Value="@market">@market</MudSelectItem>
    }
</MudSelect>
<MudSelect @ref="applicationSelector" Class="pa-4" T="string" Label="Application" @bind-Value="Application"/>

希望切换Market选项时，动态更新Application下拉框的可选项。尝试了以下代码，但applicationSelector.Items是只读属性，无法直接添加选项：

private Dictionary<string, List<string>> marketApplications { get; set; } = new Dictionary<string, List<string>>() {
        { "Market 1", new List<string>() { "Application 1" } },
        { "Market 2", new List<string>() { "Application 2", "Application 3" } }};

private void MarketChanged(string value)
{
    if (applicationSelector is null)
    {
        return;
    }

    applicationSelector.Clear();

    if (marketApplications.ContainsKey(value))
    {
        foreach (string app in marketApplications[value])
        {
            applicationSelector.Items.AddRange(marketApplications[value]); // 此处无效，因Items为只读
        }
    }
}

请问实现该需求的正确方法是什么？

正确实现方法 #

MudSelect的Items属性为只读，无法直接修改。正确思路是通过绑定数据源+Blazor自动UI刷新实现，无需直接操作组件实例的内部集合，而是通过绑定变量控制选项。

步骤1：新增绑定应用列表的变量 #

在代码中添加存储当前市场对应应用列表的变量：

private List<string> currentApplications = new();

步骤2：修改Application的MudSelect代码 #

将Application下拉框改为通过foreach渲染选项，绑定到currentApplications，同时可移除@ref="applicationSelector"：

<MudSelect Class="pa-4" T="string" Label="Application" @bind-Value="Application">
    @foreach (var app in currentApplications)
    {
        <MudSelectItem T="string" Value="@app">@app</MudSelectItem>
    }
</MudSelect>

步骤3：修改MarketChanged方法 #

切换市场时更新currentApplications的值，Blazor会自动触发UI刷新：

private void MarketChanged(string value)
{
    // 清空当前应用列表
    currentApplications.Clear();

    // 根据选中市场加载对应应用
    if (marketApplications.TryGetValue(value, out var apps))
    {
        currentApplications.AddRange(apps);
    }

    // 重置选中的应用，避免选中不存在的选项
    Application = null;
}

补充：初始化默认市场应用 #

若需要页面加载时显示默认市场的应用，可在组件初始化方法中设置：

protected override void OnInitialized()
{
    // 假设markets是已初始化的市场列表，取第一个作为默认值
    if (markets.Any())
    {
        Market = markets.First();
        MarketChanged(Market);
    }
}

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