Blazor Fluent UI级联下拉框占位符异常问题求助

核心问题 #

使用FluentCombobox实现级联下拉时，切换父选项（如品牌）后，子下拉框（如车型）仍保留之前选中的无效值，无法自动切换回占位符文本。

针对FluentCombobox的解决方案 #

解决关键在于：父选项变更时，主动清空子下拉框的绑定值，触发组件显示占位符。

示例代码 #

<FluentCombobox 
    Placeholder="选择品牌" 
    @bind-Value="SelectedMake" 
    Items="Makes" 
    @onchange="OnMakeChanged">
    <ItemTemplate>@context.Name</ItemTemplate>
</FluentCombobox>

<FluentCombobox 
    Placeholder="选择车型" 
    @bind-Value="SelectedModel" 
    Items="CurrentModels" 
    Enabled="@(SelectedMake != null)">
    <ItemTemplate>@context.Name</ItemTemplate>
</FluentCombobox>

@code {
    private Make? SelectedMake { get; set; }
    private Model? SelectedModel { get; set; }
    private List<Make> Makes { get; set; } = new();
    private List<Model> CurrentModels { get; set; } = new();

    protected override async Task OnInitializedAsync()
    {
        // 模拟API获取品牌列表
        Makes = await GetMakesFromApi();
    }

    private async Task OnMakeChanged(ChangeEventArgs e)
    {
        // 清空选中的车型，触发占位符显示
        SelectedModel = null;
        
        // 根据选中品牌加载对应车型
        if (SelectedMake != null)
        {
            CurrentModels = await GetModelsByMakeFromApi(SelectedMake.Id);
        }
        else
        {
            CurrentModels.Clear();
        }
    }

    // 模拟API方法
    private Task<List<Make>> GetMakesFromApi() => Task.FromResult(new List<Make>
    {
        new() { Id = 1, Name = "Audi" },
        new() { Id = 2, Name = "BMW" }
    });

    private Task<List<Model>> GetModelsByMakeFromApi(int makeId)
    {
        var models = makeId switch
        {
            1 => new List<Model> { new() { Id = 101, Name = "A4" }, new() { Id = 102, Name = "Q5" } },
            2 => new List<Model> { new() { Id = 201, Name = "3 Series" }, new() { Id = 202, Name = "X5" } },
            _ => new()
        };
        return Task.FromResult(models);
    }

    public class Make { public int Id { get; set; } public string Name { get; set; } = string.Empty; }
    public class Model { public int Id { get; set; } public string Name { get; set; } = string.Empty; }
}

关键说明 #

• 在OnMakeChanged方法中，将SelectedModel设为null，强制子下拉框回到未选中状态，自动显示占位符文本。
• 给子下拉框添加Enabled属性，父选项未选中时禁用子框，优化交互体验。

针对FluentSelect/Listbox的替代方案 #

由于这两个组件原生无Placeholder属性，可通过添加默认占位符选项的方式实现需求：

示例代码（FluentSelect） #

<FluentSelect 
    @bind-Value="SelectedModelId" 
    Items="CurrentModelsWithPlaceholder" 
    Enabled="@(SelectedMake != null)">
    <ItemTemplate>@context.Text</ItemTemplate>
</FluentSelect>

@code {
    private int? SelectedModelId { get; set; }
    private List<SelectOption> CurrentModelsWithPlaceholder { get; set; } = new();

    private async Task OnMakeChanged(ChangeEventArgs e)
    {
        // 重置选中值，触发占位符选项显示
        SelectedModelId = null;
        
        var models = await GetModelsByMakeFromApi(SelectedMake.Id);
        // 插入占位符选项
        CurrentModelsWithPlaceholder = new List<SelectOption>
        {
            new() { Value = null, Text = "选择车型" }
        };
        CurrentModelsWithPlaceholder.AddRange(models.Select(m => new SelectOption { Value = m.Id, Text = m.Name }));
    }

    public class SelectOption { public int? Value { get; set; } public string Text { get; set; } = string.Empty; }
}

关键说明 #

• 在子选项列表最前方添加一个带占位符文本的默认项，父选项变更时将选中值设为null，组件会自动选中这个默认项，实现类似占位符的效果。

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