Início / coding / Perguntas / 78600052
Accepted
M.M
Asked: 2024-06-10 08:10:01 +0800 CST

Como iterar sobre um número desconhecido de componentes em uma página no Blazor

  • 772

Minha página Blazor (.NET 8) possui uma lista de componentes gerados, um para cada linha em uma resposta de consulta de banco de dados:

@foreach (var item in _listOfItems)
{
    <CollapsibleCard Title="item.CardTitle">
        other contest based on item..
    </CollapsibleCard>
}

onde CollapsibleCardestá um componente que fiz que envolve Bootstrap card, adicionando um botão recolher/expandir, e o estado recolhido/expandido é gerenciado usando o código Blazor (ou seja, não no nível Javascript).

Gostaria de ter um botão na página que recolhesse ou expandisse todos os cartões de uma vez. O componente possui um método para recolhê-lo ou expandi-lo. Qual código posso colocar no onclickmanipulador para que o botão passe por todos esses cartões?

Para um número fixo de cartões, eu poderia usar @refa definição de cada um, mas não tenho certeza de como isso funcionaria neste cenário em que poderia haver qualquer número de componentes.

Nota. Eu já tentei ter um parâmetro para o estado expandido/recolhido, mas geralmente descobri que essa abordagem não funciona: o compilador emite avisos se você tentar modificar o valor de um parâmetro de dentro do componente (como aconteceria quando o usuário clica em o botão no cartão para expandi-lo), e alterar o valor do parâmetro de fora do componente não faz nada, pois o componente não sabe como se renderizar novamente, você teria que iterar sobre os componentes para re- renderize-os de qualquer maneira ou renderize novamente a página inteira.

c#

1 respostas

  1. Best Answer

    Você precisa usar um objeto de estado em cascata com um evento. Usar @refnão é o caminho a percorrer. Este é um padrão de notificação comum usado no Blazor. Se você pesquisar no SO por "Blazor Notification Pattern" encontrará diversas respostas sobre o assunto.

    Você pode colocar em cascata o objeto de estado para um contexto de nível de formulário ou registrá-lo como um serviço com escopo definido para um contexto de nível de sessão SPA .

    Aqui está uma demonstração rápida e suja.

    public class CardState
{
    public bool AllOpen { get; private set; }
    public event EventHandler<bool>? StateChanged;

    public void CloseAllCards()
    {
        AllOpen = false;
        this.StateChanged?.Invoke(this, this.AllOpen);
    }

    public void OpenAllCards()
    {
        AllOpen = true;
        this.StateChanged?.Invoke(this, this.AllOpen);
    }
}

    Um cartão muito simples

    @implements IDisposable

@if (_isOpen)
{
    <div class="card my-2">
        <div class="m-2 text-end">
            <button class="btn btn-dark" @onclick="this.Close">Close</button>
        </div>
        <div class="card-body">Basic card</div>
    </div>
}
@code {
    [CascadingParameter] private CardState? CardState { get; set; }
    [Parameter] public bool IsInitiallyOpen { get; set; } = true;
    private bool _isOpen = true;

    protected override void OnInitialized()
    {
        _isOpen = this.IsInitiallyOpen;
        if (this.CardState is not null)
            this.CardState.StateChanged += this.OnStateChanged;
    }

    protected void Close()
    {
        _isOpen = false;
    }

    private void OnStateChanged(object? sender, bool state)
    {
        _isOpen = state;
        // must call here as this is not a UI event
        this.StateHasChanged();
    }

    public void Dispose()
    {
        if (this.CardState is not null)
            this.CardState.StateChanged -= this.OnStateChanged;
    }

}

    E página de demonstração

    @page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

<div class="m-2 p-2 text-end">
    <button class="btn btn-primary" @onclick="ChangeState">Change</button>
</div>

<CascadingValue Value="_cardState">
    <Card />
    <Card />
    <Card />
    <Card />
</CascadingValue>

@code {
    private readonly CardState _cardState = new();

    private void ChangeState()
    {
        if (_cardState.AllOpen)
            _cardState.CloseAllCards();

        else
            _cardState.OpenAllCards();
    }
}
    • 2

relate perguntas