Estou com dificuldades com um componente de menu suspenso de seleção múltipla no meu aplicativo do lado do servidor Blazor .NET 8. Estou usando o componente de seleção MudBlazor para dar suporte à seleção múltipla.
Estou carregando uma lista de departamentos da nossa instância do Dynamics e os estou armazenando em um List<SelectListItem>. Cada entrada tem um Key(um valor numérico, como 737004101) e uma representação textual do departamento ("Departamento A").
Meu objetivo é
- exibir os departamentos em um menu suspenso de seleção múltipla (com caixas de seleção para permitir a seleção de várias entradas), mostrando o nome dos departamentos
- armazenar a lista de departamentos selecionados por meio de seus valores-chave numéricos (por exemplo, a
List<int>ou uma sequência concatenada de valores-chave)
Meu problema é: não consigo fazer isso funcionar como eu gostaria.
Estou renderizando os departamentos assim - com essa configuração, os nomes dos departamentos são exibidos quando o menu suspenso é aberto (como esperado e desejado):
<MudSelect T="string" @bind-Value="@CurrentValue" MultiSelection=true>
@foreach (SelectListItem item in Departments)
{
<MudSelectItem T="string" Value="@item.Value">@item.Text</MudSelectItem>
}
</MudSelect>
A lista de departamentos é tratada como um parâmetro no meu componente:
[Parameter]
public List<SelectListItem> Departments { get; set; } = new List<SelectListItem>();
e CurrentValuevem do InputBase<string>componente base do Blazor - é um campo de string no componente.
Se eu fizer assim, vejo a lista de departamentos com seus nomes no menu suspenso, posso selecionar várias entradas, mas depois de terminar a seleção, o componente MudSelect mostra a lista concatenada dos valores numéricos dos departamentos selecionados (por exemplo, "737004101, 737004104, 737004106").
Então descobri a MultiSelectionTextFuncpropriedade de MudSelect, e, lendo os documentos, acreditei que essa era a solução: uma função usada para definir um texto de exibição personalizado para o componente, quando vários itens foram selecionados. Então criei uma função dessas no meu componente e conectei-a ao 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);
}
Pego a lista dos valores (numéricos) selecionados, traduzo-os em nomes de departamentos e, então, mostro isto (lista de nomes legíveis por humanos dos departamentos selecionados) no meu componente:
Dept. A; Dept. D; Dept. H
Mas, embora agora eu veja os nomes dos departamentos na lista suspensa e, depois de escolher alguns deles, também vejo os nomes legíveis na caixa de texto do componente suspenso. Agora, meu CurrentValuetambém está sendo definido para a lista de nomes dos departamentos selecionados. Não recebo mais a lista das teclas numéricas selecionadas.
Parece que eu posso:
selecione vários departamentos e obtenha a lista dos selecionados (numéricos)
Id- mas a exibição dos departamentos selecionados também é a lista concatenada de numéricosId; ouuse isso
MultiSelectionTextFunce obtenha a exibição dos departamentos selecionados corretamente, em formato legível por humanos - mas perco as informações de quais teclas (numéricas) foram selecionadas.
O que posso fazer para alcançar ambos?
- Mostrar nomes dos departamentos no menu suspenso e após a seleção para referência
- Armazene/recupere a lista numérica
Keydos departamentos selecionados para que eu possa armazená-los em um banco de dados de alguma forma
