如何在渲染前将参数传递给组件？

Question

我正在尝试在 Blazor 服务器端做一个简单的 table 分页。

table是一个Blazor组件，分页模块是另一个Blazor组件。分页组件 (Paginador) 有一个总行数参数（用于计算集合中的最后一页）。

我可以呈现 table，分页部分并在页面更改时更新 table 的内容，但由于某种原因 TotalRows 参数到达 Paginador 用 0 而不是总行值。

代码如下

列表组件：

@page "/personas/listar"

@inject SqlServerPersonasRepository _repo;

<h3>Lista de personas</h3>

<table class="table table-striped">
    <thead>
        <tr>
            <th>DNI</th>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>Fecha de nacimiento</th>
            <th>¿Activo?</th>
            <th>Tipo</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in _personas)
        {
            <tr>
                <td><code>@item.Dni</code></td>
                <td>@item.Nombre</td>
                <td>@item.Apellido</td>
                <td>@item.FechaNacimiento.ToString("dd/MM/yyyy")</td>
                <td>@(item.Activo ? "Sí":"No")</td>
                <td>@item.Tipo.Nombre</td>
            </tr>
        }
    </tbody>
</table>

<div class="row">
    <Paginador TotalRows="_total_rows" OnPageChange="@GetPageAsync" />
</div>

@code {
    [Parameter]
    public int Page { get; set; } = 1;

    private int _total_rows;
    private List<PersonaModel> _personas = new();

    protected override async Task OnInitializedAsync()
    {
        _total_rows = await _repo.ContarAsync();
    }

    protected override async Task OnParametersSetAsync()
    {
        _personas = await _repo.ListarAsync(Page);
    }

    public async Task GetPageAsync(int page)
    {
        _personas = await _repo.ListarAsync(page);
    }
}

Paginador:

@inject IOptions<TablesSettings> Options

<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item @(_current_page == 1 ? "disabled": string.Empty)">
            <button type="button" class="page-link" @onclick="(async () => await PageChangeAsync(1))" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                @*<span class="sr-only">1</span>*@
            </button>
        </li>
        @if (_current_page == 1)
        {
            <li class="page-item disabled"><button type="button" class="page-link">1</button></li>
            <li class="page-item"><button type="button" class="page-link" @onclick="(async () => await PageChangeAsync(2))">2</button></li>
            <li class="page-item"><button type="button" class="page-link" @onclick="(async () => await PageChangeAsync(3))">3</button></li>
        }
        else if (_current_page == _last_page)
        {
            var two_to_last = _last_page - 2;
            var one_to_last = _last_page - 1;
            <li class="page-item"><button type="button" class="page-link" @onclick="(async () => await PageChangeAsync(two_to_last))">@two_to_last</button></li>
            <li class="page-item"><button type="button" class="page-link" @onclick="(async () => await PageChangeAsync(one_to_last))">@one_to_last</button></li>
            <li class="page-item disabled"><button type="button" class="page-link">@_last_page</button></li>
        }
        else
        {
            var previous = _current_page - 1;
            var next = _current_page + 1;
            <li class="page-item"><button type="button" class="page-link" @onclick="(async () => await PageChangeAsync(previous))">@previous</button></li>
            <li class="page-item"><button type="button" class="page-link" @onclick="(async () => await PageChangeAsync(_current_page))">@_current_page</button></li>
            <li class="page-item"><button type="button" class="page-link" @onclick="(async () => await PageChangeAsync(next))">@next</button></li>
        }

        <li class="page-item @(_current_page == _last_page ? "disabled" : string.Empty)">
            <button type="button" class="page-link" @onclick="(async () => await PageChangeAsync(_last_page))" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                @*<span class="sr-only">@_last_page_index</span>*@
            </button>
        </li>
    </ul>
</nav>

@code {
    [Parameter]
    public int TotalRows { get; set; }
    [Parameter]
    public EventCallback<int> OnPageChange { get; set; }

    private int _current_page { get; set; } = 1;
    private int _last_page;

    protected override async Task OnInitializedAsync()
    {
        _last_page = (int)Math.Ceiling(decimal.Divide(TotalRows, Options.Value.RowsPerPage));
    }

    protected async Task PageChangeAsync(int page)
    {
        await OnPageChange.InvokeAsync(page);
        _current_page = page;
        StateHasChanged();
    }
}

我发现，在加载页面时，Paginador 在调用列表组件的 OnInitializedAsync 方法之前呈现，因此 TotalRows 参数采用默认值值。

那么，如何在呈现 Paginador 之前获取行总数？

提前致谢。

Answer 1

So, how do I get the total of rows in Paginador before it's rendered?

Put an @if block around the component expecting the data. – Brian Parker

做这样的事情：

if (_total_rows > 0 )
{
   <div class="row">
    <Paginador TotalRows="_total_rows" OnPageChange="@GetPageAsync" />
   </div>
}

当总行数大于 0 时，if 语句现在允许创建 Paginador 组件。

注意：我很快就读完了你的问题，但我相信这是你应该做的：

protected override async Task OnInitializedAsync()
{
   // Retrieve the persons list
   _personas = await _repo.ListarAsync(Page); 
    
}

// Get rid of  OnParametersSetAsync()

和

<div class="row">
    <Paginador TotalRows="@_personas.Count" OnPageChange="@GetPageAsync" />
</div>

如何在渲染前将参数传递给组件？

How to pass parameter to component before rendering?

blazor

blazor-server-side

blazor-component