Início / coding / Perguntas / 77024666
Accepted
BarnumBailey
Asked: 2023-09-02 00:23:45 +0800 CST

Blazor - limpe todas as opções de seleção sem recuperar os dados

  • 772

Blazor .NET 6.0, tenho o elemento select básico:

<select id="ProductItems" @onchange="ProductSelections" multiple size="10">
    @if (items!= null)
    {
        @foreach (var item in items)
        {
            <option value="@item.Id">@item.Description</option>
        }
    }
</select>

Fui solicitado a fornecer um botão que limpará a lista de todas as opções selecionadas. Não quero ter uma solução com muitos códigos e também não quero codificar nenhum js.

Uma solução que funciona é buscar novamente os dados quando o botão é clicado:

List<MyItems> items = new List<MyItems>();
....
private async void ButtonClearClick() 
{
    items = new List<MyItems>();  // clear variable.
    items = await GetAllItems();  // web api call to reload variable.
    StateHasChanged();
}

Isso faz com que a seleção seja brevemente recolhida e recarregada, mas pelo menos todas as opções são desmarcadas.
Em seguida, comecei a refatorar essa solução para evitar a chamada de banco de dados e pensei que usar uma variável temporária resultaria na mesma coisa:

private void ButtonClearClick2() 
{
    List <MyItems> temp = new List<MyItems>();
    items.ForEach(i => temp.Add(i)); // copy into temp.

    items = new List<MyItems>(); // clear variable.
    temp.ForEach(i => items.Add(i)); // copy back into variable.
    StateHasChanged();
}

No entanto, isso NÃO funciona, as opções ainda estão selecionadas. Também não há efeito de colapso/recarregamento, o que me indica que nada foi recarregado. Alguém pode explicar o que há de errado com a segunda tentativa? o que estou perdendo?

blazor

1 respostas

  1. Best Answer

    Você precisa vincular o select a um T[]where Té o tipo da sua MyItem.Idpropriedade. Então, ao limpar esse array, você também limpará as opções selecionadas.

    <select @bind="firstIds" multiple size="10">
    @if (options!= null)
    {
        @foreach (var item in options)
        {
            <option value="@item.Id">@item.Description</option>
        }
    }
</select>
<button @onclick="ClearFirstSelection">Clear First Selection</button>
@code{
    int[] firstIds = new int[0];
    private void ClearFirstSelection()
    {
        firstIds = new int[0];
    }
}

    Aqui está um trecho que demonstra isso.

    Trecho de Telerik

    • 1

relate perguntas