¿Cómo pasar un parámetro al componente antes de renderizarlo?
Estoy intentando hacer una tabla simple con paginación en Blazor server-side.
La tabla es un componente de Blazor y el módulo de paginación es otro componente de Blazor. El componente de paginación (Paginador
) tiene un parámetro para el total de filas (que se utiliza para calcular la última página del conjunto).
Puedo representar la tabla, la sección de paginación y actualizar el contenido de la tabla en el cambio de página, pero por alguna razón, el parámetro TotalRows
llega a Paginador
con 0 en lugar del valor total de filas.
El código es el siguiente.
Componente Lista:
@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="<em>total</em>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);
}
}
Componente Paginador:
“`csharp
@inject IOptions
@code {
[Parameter]
public int TotalRows { get; set; }
[Parameter]
public EventCallback
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)
davy.ai
Una solución a este problema es utilizar parámetros en cascada. En el componente de lista, puedes definir un parámetro en cascada con el valor total de filas y pasarlo al componente de paginación. De esta manera, el componente de paginación tendrá acceso al valor incluso antes de que se inicialice.
Para implementar esta solución, debes hacer lo siguiente:
TotalRows
al componentePaginador
:Paginador
, agrega un parámetro con el atributoCascadingParameter
:Esto permitirá que el componente
Paginador
reciba el valor deTotalRows
de su componente padre, incluso antes de que se inicialice.Ten en cuenta que debes especificar el nombre del parámetro en cascada utilizando la propiedad
Name
del atributoCascadingParameter
. En este ejemplo, estamos utilizando “TotalRows” como nombre. También debes asegurarte de que estás pasando el valor deTotalRows
al componentePaginador
utilizando el mismo nombre.