Blazor中MudSelect多选时显示名称而非ID的问题求助

方法1：自定义SelectedValuesText显示名称 #

若需继续绑定Guid类型的选中ID集合，可通过SelectedValuesText属性完全控制组件顶部的显示内容，无需修改绑定类型。

修改你的MudSelect组件，添加SelectedValuesText绑定：

<MudSelect T="Guid" Label="Items" MultiSelection="true" 
           @bind-SelectedValues="selectedItemIds" 
           Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter"
           Required RequiredError="select item"
           SelectedValuesText="@SelectedItemsText">

    @foreach (var item in items)
    {
        <MudSelectItem T="Guid" Value="@item.id">@item.name</MudSelectItem>
    }
</MudSelect>

在@code块中添加计算属性，根据选中ID匹配对应名称并拼接：

private List<Guid> selectedItemIds = new();
private IEnumerable<YourItemType> items = new List<YourItemType>(); // 替换为你的实际Item类型

private string SelectedItemsText
{
    get
    {
        if (!selectedItemIds.Any()) return string.Empty;
        var selectedNames = items.Where(i => selectedItemIds.Contains(i.id))
                                 .Select(i => i.name);
        return string.Join(", ", selectedNames);
    }
}

方法2：绑定完整对象（更直观） #

若业务场景允许，直接绑定Item对象而非单独的ID，组件会自动显示MudSelectItem中定义的名称，提交时可轻松提取ID。

修改组件泛型类型与绑定对象：

<MudSelect T="YourItemType" Label="Items" MultiSelection="true" 
           @bind-SelectedValues="selectedItems" 
           Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter"
           Required RequiredError="select item">

    @foreach (var item in items)
    {
        <MudSelectItem T="YourItemType" Value="@item">@item.name</MudSelectItem>
    }
</MudSelect>

在@code块中调整绑定变量，提交时提取ID集合：

private List<YourItemType> selectedItems = new();
private IEnumerable<YourItemType> items = new List<YourItemType>();

// 表单提交逻辑
private void HandleSubmit()
{
    var submittedIds = selectedItems.Select(i => i.id).ToList();
    // 执行提交操作
}

注意事项 #

• 确保items集合在组件渲染、选中状态变化时已完成加载，否则无法匹配到对应名称。
• 方法1适合需保持Guid绑定的场景，方法2更适合业务逻辑中需操作完整Item对象的场景。

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