主页 / coding / 问题 / 79017400
Accepted
marc_s
Asked: 2024-09-24 15:16:42 +0800 CST

如何正确处理多选？

  • 772

我在 .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>();

来自CurrentValueBlazorInputBase<string>基础组件 - 它是组件上的字符串字段。

如果我有这样的情况，我会在下拉列表中看到部门列表及其名称，我可以选择多个条目 - 但是在完成选择之后，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，以便我可以以某种方式将它们存储到数据库中
blazor

1 个回答

  1. Best Answer

    您可以将 SelectedListItem 对象存储为 SelectedValues。这样，您就可以使用 检索Key值并显示值。此外，您还可以设置以实现TextToStringFunc="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);
}

    MudSnippet

    • 1

相关问题