如何正确处理多选？

Question

我正在努力处理 .NET 8 Blazor 服务器端应用程序中的多选下拉组件。我正在使用 MudBlazor 选择组件来支持多选。

我正在从 Dynamics 实例加载部门列表，并将它们存储到

List<SelectListItem>

中。每个条目都有一个

Key

（一个数值，如

737004101

）和部门的文本表示（“部门 A”）。

我的目标是

• 在多选下拉列表中显示部门（带有复选框，以允许选择多个条目），显示部门的名称
通过数字键值存储所选部门的列表（例如
• List<int>

  或键值的串联字符串）

我的麻烦是：我似乎无法让它按我想要的方式工作。

我正在像这样渲染部门 - 通过此设置，打开下拉列表时会显示部门的名称（如预期和想要的）：

<MudSelect T="string" @bind-Value="@CurrentValue" MultiSelection=true>
    @foreach (SelectListItem item in Departments)
    {
        <MudSelectItem T="string" Value="@item.Value">@item.Text</MudSelectItem>
    }
</MudSelect>

部门列表作为我的组件上的参数进行处理：

[Parameter]
public List<SelectListItem> Departments { get; set; } = new List<SelectListItem>();

并且

CurrentValue

 来自 

InputBase<string>

 Blazor 基础组件 - 它是组件上的字符串字段。

如果我像这样，我确实会在下拉列表中看到部门列表及其名称，我可以选择多个条目 - 但在完成选择后，MudSelect 组件会显示数值的串联列表选定的部门（例如“737004101、737004104、737004106”）。

然后我发现了

MultiSelectionTextFunc

 的 

MudSelect

 属性，通过阅读文档，我相信这就是解决方案：当选择多个项目时，用于为组件定义自定义 

显示文本 的函数。所以我在组件中创建了这样一个函数并将其连接到 MudSelect：

<MudSelect T="string" @bind-Value="@CurrentValue" MultiSelection=true MultiSelectionTextFunc="@GetMultiSelectionText">
    @foreach (SelectListItem item in Departments)
    {
        <MudSelectItem T="string" Value="@item.Value">@item.Text</MudSelectItem>
    }
</MudSelect>

private string GetMultiSelectionText(List<string> selectedValues)
{
    List<string> selectedTexts = new List<string>();

    foreach (string value in selectedValues)
    {
        SelectListItem? item = Departments.FirstOrDefault(x => x.Value == value);

        if (item != null)
        {
            selectedTexts.Add(item.Text);
        }
    }

    return string.Join("; ", selectedTexts);
}

我获取所选（数字）值的列表，并将它们转换为部门名称，然后在我的组件中显示此（所选部门的人类可读名称列表）：

Dept. A; Dept. D; Dept. H 但是，虽然我现在在下拉列表中看到部门的名称，并且在选择其中一些之后，我还在下拉组件的文本框中看到了可读的名称，现在我的

CurrentValue

 也被设置为列表所选部门的名称 - 我

不再获得所选数字键的列表。

看来我可以：

• 选择多个部门并获取所选（数字）的列表

  Id

   - 但随后所选部门的显示也是数字

  Id

  的串联列表；或

• 使用该

  MultiSelectionTextFunc

  并以人类可读的形式正确选择部门的

  显示 - 但我丢失了已选择的（数字）键的信息。

我可以做什么来实现这两个目标？

在下拉列表中显示部门的
• 名称，选择后可供参考
存储/检索所选部门的数字
• Key

  列表，以便我可以以某种方式将它们存储到数据库中

Answer 1

您可以将 SelectedListItem 对象存储为 SelectedValues。这样您就可以检索

Key

 值并通过使用显示 

Text

 值

ToStringFunc="x => x.Text"

。此外，您还可以设置 

Delimiter="; "

 来实现 

Dept. A; Dept. D; Dept. H 看。

所以你的 Mudselect 看起来像这样：

<MudSelect 
 T="SelectedListItem" 
 @bind-SelectedValues="@_selectedValues" 
 MultiSelection="true" 
 ToStringFunc="x => x.Text"
 Delimiter="; "
>
    @foreach (SelectListItem item in Departments)
    {
        <MudSelectItem T="SelectListItem" Value="@item">@item.Text</MudSelectItem>
    }
</MudSelect>

然后您就可以简单地检索密钥

private IEnumerable<int> GetSelectedKeys()
{
    return _selectedValues.Select(x => x.Key);
}

泥片段