如何在运行时填充服务端应用中MudBlazor MudSelect组件的选项

基础动态填充实现 #

直接绑定数据源到MudSelect，通过生命周期方法或自定义事件触发数据加载：

Razor组件代码 #

<MudSelect T="string" @bind-Value="SelectedOption" Label="选择选项">
    @foreach (var option in Options)
    {
        <MudSelectItem Value="@option">@option</MudSelectItem>
    }
</MudSelect>

后端逻辑 #

@code {
    private string SelectedOption { get; set; }
    private List<string> Options { get; set; } = new();

    protected override void OnInitialized()
    {
        // 初始化阶段加载数据，也可绑定到按钮点击等事件触发
        LoadOptions();
    }

    private void LoadOptions()
    {
        // 替换为实际的服务端数据获取逻辑
        Options = new List<string> { "选项1", "选项2", "选项3" };
    }
}

异步加载服务端数据 #

服务端Blazor场景中常需异步获取数据（如从API、数据库），需处理加载状态避免交互异常：

Razor组件代码 #

<MudSelect T="Product" @bind-Value="SelectedProduct" Label="选择产品" Disabled="@isLoading">
    @if (isLoading)
    {
        <MudSelectItem Disabled="true">加载中...</MudSelectItem>
    }
    else
    {
        @foreach (var product in Products)
        {
            <MudSelectItem Value="@product">@product.Name</MudSelectItem>
        }
    }
</MudSelect>

后端逻辑 #

@code {
    private Product SelectedProduct { get; set; }
    private List<Product> Products { get; set; } = new();
    private bool isLoading;

    // 注入业务服务（实际场景替换为你的服务）
    // @inject IProductService ProductService

    protected override async Task OnInitializedAsync()
    {
        await LoadProductsAsync();
    }

    private async Task LoadProductsAsync()
    {
        isLoading = true;
        // 替换为实际的异步数据获取逻辑
        // Products = await ProductService.GetAllProductsAsync();
        await Task.Delay(1000); // 模拟网络延迟
        Products = new List<Product>
        {
            new Product { Id = 1, Name = "产品A" },
            new Product { Id = 2, Name = "产品B" },
            new Product { Id = 3, Name = "产品C" }
        };
        isLoading = false;
    }

    // 数据模型示例
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

关键注意事项 #

• 渲染触发：若直接修改现有集合（如Add/Remove操作），需手动调用StateHasChanged()通知组件重新渲染；若重新赋值集合（如Options = new List<...>），框架会自动检测到数据变化。
• 类型匹配：MudSelect的泛型T必须与绑定的Value、MudSelectItem的Value类型完全一致，否则会抛出类型不匹配错误。
• 状态管理：异步加载时务必设置加载状态，禁用组件或显示加载提示，避免用户重复操作或看到空列表。
• 服务注入：从服务端获取数据时，确保正确注入对应的业务服务，遵循Blazor依赖注入规范。

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