es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿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 Options

@code {
[Parameter]
public int TotalRows { get; set; }
[Parameter]
public EventCallback 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)
Tags:  , ,

Answer

  1. Avatar for 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:

    1. Define un parámetro en cascada en el componente de lista:
    [CascadingParameter(Name = "TotalRows")]
    public int TotalRows { get; set; }
    
    1. Pasa el valor de TotalRows al componente Paginador:
    <div class="row">
        <paginador totalrows="@TotalRows" onpagechange="@GetPageAsync"></paginador>
    </div>
    
    1. En el componente Paginador, agrega un parámetro con el atributo CascadingParameter:
    [CascadingParameter(Name = "TotalRows")]
    public int TotalRows { get; set; }
    

    Esto permitirá que el componente Paginador reciba el valor de TotalRows 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 atributo CascadingParameter. En este ejemplo, estamos utilizando “TotalRows” como nombre. También debes asegurarte de que estás pasando el valor de TotalRows al componente Paginador utilizando el mismo nombre.

Comments are closed.