主页 / coding / 问题 / 78600052
Accepted
M.M
Asked: 2024-06-10 08:10:01 +0800 CST

如何在 Blazor 中迭代页面上未知数量的组件

  • 772

我的 Blazor（.NET 8）页面有一个组件列表，针对数据库查询响应中的每一行生成一个组件：

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

其中CollapsibleCard是我制作的一个组件，它包装了 Bootstrap card，添加了折叠/展开按钮，并且折叠/展开状态是使用 Blazor 代码管理的（即不在 Javascript 级别）。

我希望页面上有一个按钮可以立即折叠或展开所有卡片。该组件有一种折叠或展开它的方法。我可以在按钮的处理程序中添加什么代码onclick来遍历所有这些卡片？

对于固定数量的卡片，我可以@ref对每张卡片使用定义，但不确定在可能有任意数量组件的情况下它将如何工作。

注意：我之前曾尝试过为展开/折叠状态添加一个参数，但通常发现这种方法不起作用：如果您尝试从组件内部修改参数的值（当用户单击卡片上的按钮将其展开时就会发生这种情况），编译器会发出警告，并且从组件外部更改参数的值不会执行任何操作，因为组件不知道重新渲染自身，您必须遍历组件以重新渲染它们，或者重新渲染整个页面。

c#

1 个回答

  1. Best Answer

    您需要将级联状态对象与事件一起使用。使用@ref并不是一条出路。这是 Blazor 中使用的常见通知模式。如果您搜索“Blazor 通知模式”，您会找到有关该主题的多个答案。

    您可以级联表单级上下文的状态对象，也可以将其注册为SPA 会话级上下文的范围服务。

    这是一个快速而肮脏的演示。

    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);
    }
}

    一张非常简单的卡片

    @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;
    }

}

    和演示页面

    @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

相关问题