Ciclo de vida en componentes y parámetros

Clase 8 de 19 • Curso de Aplicaciones Web con Blazor WebAssembly y .NET

Kevin Castellano

student•

Les comparto una pequeña simplificación del código usando el operador (??)

    public override async Task SetParametersAsync(ParameterView parameters)
    {
        if (parameters.TryGetValue<string>(nameof(currentCountParameter), out var value))
            currentCountParameter = value ?? currentCountParameter;
    
        await base.SetParametersAsync(parameters);
    }

    protected override void OnInitialized()
    {
        currentCount = int.Parse(CounterFromQuery ?? "0");
        logger.LogInformation("Se inicia el componente");
    }

Erick Estrada Mancilla

student•

Un componente Blazor puede pasar por cinco etapas:

SetParameters: Esta etapa se activa cuando el componente se construye inicialmente (los parámetros aún no se han establecido) o cada vez que los parámetros del componente se actualizan desde la URL o desde el componente principal. Si se anula el método SetParametersAsync, no se deben utilizar los métodos OnParametersSet y OnParametersSetAsync.

Inicializado: Esta es la etapa en la que el componente está completamente construido y los parámetros están configurados.

ParametersSet: Como su nombre indica, esta etapa se activa cada vez que se actualizan los parámetros del componente desde la URL o desde el componente principal.

AfterRender: Se activa cuando el componente supera la etapa de inicialización o cuando se llama a StateHasChanged.

Dispose: Este es el paso final en el que se elimina el componente de la interfaz de usuario. Los desarrolladores deben limpiar los recursos para evitar fugas de memoria o comportamientos inesperados.

Alvaro

student•

no es mucho codigo para capturar un simple parametro. Con todo respeto siento que microsoft hace cosas marcianas.

Jhonatan Ruiz

student•

Eventos de Blazor:

SetParametersAsync: capturar parámetros que llegan al componente. OnInitialized: Inicializar algunos datos. OnAfterRenderaync: Se usa para ejecutar código después de que el componente se renderizó en el DOM. OnParametersSet: Este evento se usa cuando se ha seteado o actualizado los parámetros que llegan al componente. StateHasChanged: Es un método que notifica a Blazor que el estado de un componente ha cambiado y que debe renderizar nuevamente.

CRM Consultores Asociados

student•

Hice un programa para sumar dos parámetros pasados por la URL

@* Los parametros se pasan por la url de la siguiente forma "<url>?primero=3&segundo=5" *@
@page "/counter"

<PageTitle>Sumar</PageTitle>

<h2>Sumador</h2>

<p>Los parametros se deben pasar por la url: <b>primero</b> y <b>segundo</b></p>
<p role="status">Primer valor: @firstValue</p>
<p role="status">Segundo valor: @secondValue</p>
<p role="status"><b>Resultado:</b> @resultado</p>

<button class="btn btn-primary" @onclick="Sumar">Sumar</button>

@code {
    [SupplyParameterFromQuery]
    [Parameter]
    public string? primero {get; set;}
    [SupplyParameterFromQuery]
    [Parameter]
    public string? segundo {get; set;}

    private int firstValue = 0;
    private int secondValue = 0;

    private int resultado = 0;

    protected override void OnInitialized()
    {
        firstValue = primero != null ? int.Parse(primero) : 0;
        secondValue = segundo != null ? int.Parse(segundo) : 0;
    }

    private void Sumar()
    {
        resultado = firstValue + secondValue;
    }
}

Javier Sain Osorno Aguirre

student•

Platzi Team

student•

Como puedo obtener esos snippets en visual studio comunity ?

Miguel Teheran

teacher•

Es este https://marketplace.visualstudio.com/items?itemName=adrianwilczynski.asp-net-core-snippet-pack

Y aca muestro los de Blazor: https://www.youtube.com/watch?v=tBbzoLIAh3U

Miguel Lozano

student•

Si de pronto en Counter no se les aparece el botón, como a mi que no me aparecía, solo es que después de los corchetes del primer if, coloquen:

await base.SetParametersAsync(parameters);

Samuel Schulz

student•

Si no les funciona con SupplyParameterFromQuery, aqui dejo la correccion que me funciono:

1) @page "/counter"

2) public override async Task SetParametersAsync(ParameterView parameters) { await base.SetParametersAsync(parameters); }

Cindy Gareca Morales

student•

😊👍

Jairo Alonso Contreras Mateus

student•

A mi no me funciono el SetParametersAsync, comente toda esta seccion para que me funcionara el codigo (tal cual se muestra en el curso)

//public override async Task SetParametersAsync(ParameterView parameter) //{

//    //if(parameter.TryGetValue<string>(nameof(currentCountParameter), out var value))
//    //{
//    //    if (value is not null)
//    //    {
//    //        currentCountParameter = value;
//    //    }
//    //}

//}

Kevin Castellano

student•

A mí me pasó lo mismo hasta que compilé con F5. Por alguna razón no se ven reflejados los cambios con con dotnet run

Eduardo Jimenez

student•

Me puse a pensar como se aplicaria esto a una aplicacion real.

Lo primero que pense es en una tabla que muestra informacion segun el usuario que este loggeado.

Entonces le pedi a Gemi confirmar si era un uso correcto.

Me dio este ejemplo:

La URL: Blazor tendría una ruta definida de la siguiente manera:

@page "/profile/{username}"

El Parámetro de la Ruta: Dentro del componente Profile, tendrías una propiedad [Parameter] para capturar el nombre de usuario de la URL.

[Parameter]
public string? username { get; set; }

El Ciclo de Vida del Componente: Dentro del método OnInitialized o OnParametersSet, usarías ese username para buscar en tu base de datos la información de ese usuario en específico (por ejemplo, su foto de perfil, sus publicaciones, etc.).

protected override async Task OnInitializedAsync()
{
    // Usar el parámetro 'username' para obtener los datos del usuario.
    var user = await userService.GetUserByUsername(username);

    if (user != null)
    {
        // Asignar los datos a variables locales para mostrarlos en la página.
        this.displayName = user.DisplayName;
        this.profilePicture = user.ProfilePicture;
        // ... y así sucesivamente
    }
}

Juan Daniel Diaz Jaramillo

student•

- SetParametersAsync:

Blazor llama a esto para **inyectar parámetros** en el componente. Solo sobrescríbelo si necesitas **interceptar** o **validar** parámetros *antes* de que Blazor los asigne, o para aplicar valores por defecto personalizados. Normalmente **no lo toques**; usa OnParametersSet{Async}.

- OnInitizalized{Async}:

Se ejecuta **una sola vez** cuando el componente se crea (antes del primer render). Ideal para **cargar datos iniciales** que no dependen de parámetros del padre.

- OnAfterRenderAsync:

Se ejecuta **después de que el componente se haya renderizado en el DOM**. Úsalo para:

- Integrarte con **JS interop** que necesita elementos ya montados.

- Medir el DOM, usar ResizeObserver, inicializar librerías JS.

Recibe firstRender (solo la versión Async) para correr cierta lógica **solo en el primer render** y evitar bucles.

- OnParametersSet{Async}:

Se ejecuta **en el primer render y cada vez que cambian los \[Parameter]** (o \[CascadingParameter]). Úsalo cuando **tu lógica depende de los parámetros** (por ejemplo, cambiar un filtro si cambió UserId).

- StateHasChanged: Fuerza un **re-render** del componente cuando cambias estado **fuera** del flujo normal de Blazor (timers, callbacks JS, websockets, etc.). Llama siempre desde el **hilo del renderer** (si vienes de otro hilo, usa InvokeAsync(StateHasChanged) para no romper nada).

Roberto Bravo

student•

Se puede indicar en el parametro que sera un int

@page "/counter/{currentCountParameter:int?}"
```Asi la variable currentCountParameter seria tipo int

```js
public int? currentCountParameter { get; set; }
```Y la funcion OnInitialized queda de esta manera:

```js
protected override void OnInitialized()
    {
        // Initialize the current count with the value from the URL parameter or set it to 0
        currentCount = currentCountParameter.GetValueOrDefault(0);
        Logger.LogInformation("Counter component initialized.");
    }
```La funcion setParameterAsync no es necesaria. Ahora es mas simple

Roberto Bravo

student•

No esta bien configurada esta seccion de comentarios. Me distorsiona el comentario totalmente

Ulises Flores Gutiérrez

student•

ROMMEL DUAREZ SAENZ

student•

el método SetParametersAsync() al parecer no es necesario en el 2do caso de querystring

Juan David Forero

student•

Cliclo de vida de los componentes de blazor:

SetParametersAsync onInicializedAsync onAfterRenderAsync onParametersSetAsync StateHasChanged

Juan David Forero

student•

Para recibir parámetros por la url, solo debes escribir en @page "/counter" después de la ruta dentro de las llaves { } el nombre del parámetro a recibir. Ahora para hacerlo opcional solo coloca el carácter ? después del nombre del parámetro.

Recuerda crear una variable con el mismo nombre para guardar y procesar ese valor dentro del @code{ }

Javier Sain Osorno Aguirre

student•

BALFRE VAZQUEZ CASTREJON

student•

Este es mi codigo, la tengo 2 contadores uno incremental y otro decremental con ambos tipso de parametros, y si vienen valores invalidos queda el valor por default

@page "/counter/{counterStartParameter?}"
@inject ILogger<Counter> logger;

<PageTitle>Counter</PageTitle>

<h2>A Counter </h2>

<p role="status">Current count: @currentCount</p>
<p role="status">Secound Descendent Count: @secondCount </p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;
    private int secondCount = 100;

    [Parameter]
    public string? counterStartParameter { get; set; }

    [SupplyParameterFromQuery]
    [Parameter]
    public string? counterStartFromQuery { get; set; }

    public override async Task SetParametersAsync(ParameterView parameters)
    {
        logger.LogInformation("Dentro de SetParametersAsync");

        if (parameters.TryGetValue<string>(nameof(counterStartParameter), out var value)) 
        {
            counterStartParameter = value;
        }

        await base.SetParametersAsync(parameters);
    }

    protected override void OnInitialized()
    {
        int tempInt;
        logger.LogInformation("Dentro de OnInitialized");
        int.TryParse(counterStartParameter ?? currentCount.ToString(), out currentCount);
        var exist = int.TryParse(counterStartFromQuery, out tempInt);
        secondCount = exist ? tempInt : secondCount;
    }

    protected override void OnAfterRender(bool firstRender)
    {
        logger.LogInformation("Dentro de OnAfterRenderAsync");
    }

    protected override void OnParametersSet()
    {
        logger.LogInformation("Recibiendo parametros");
    }
    
    private void IncrementCount()
    {
        currentCount++;
        secondCount--;
    }
}

edward.arroyave

student•

Estuve validando y realizando pruebas de flujo y noté que en algunos ejemplos se intenta asignar manualmente el valor del parámetro antes de llamar a base.SetParametersAsync(parameters), como en este caso:

if (parameters.TryGetValue<string>nameof(currentCountParameter), out var parameter)
{
    currentCountParameter = parameter; // Se asigna manualmente antes de Blazor
}

await base.SetParametersAsync(parameters);

Sin embargo, al ejecutarse await base.SetParametersAsync(parameters), el valor que se asignó manualmente se sobrescribe. No logro comprender cuál es la funcionalidad de esta asignación manual en este caso. ¿Para qué sirve si Blazor ya maneja la asignación de parámetros automáticamente?

Actualmente, mi código funciona correctamente y he agregado una validación para asegurarme de que el valor recibido sea un número y no una letra:

public override async Task SetParametersAsync(ParameterView parameters)
{
    Logger.LogInformation("Se envían los parámetros");
    await base.SetParametersAsync(parameters);
}

protected override void OnParametersSet()
{
    Logger.LogInformation("Se asignan los parámetros");
    if (!int.TryParse(currentCountParameter, out currentCount))
    {
        currentCount = 0; // Si no se puede convertir, asigna 0
        Logger.LogWarning($"Valor inválido para currentCountParameter: '{currentCountParameter}', se asigna 0.");
    }
}

Agradezco la aclaración. Muchas gracias.

    public override async Task SetParametersAsync(ParameterView parameters)
    {
        if (parameters.TryGetValue<string>(nameof(currentCountParameter), out var value))
            currentCountParameter = value ?? currentCountParameter;
    
        await base.SetParametersAsync(parameters);
    }

    protected override void OnInitialized()
    {
        currentCount = int.Parse(CounterFromQuery ?? "0");
        logger.LogInformation("Se inicia el componente");
    }

@* Los parametros se pasan por la url de la siguiente forma "<url>?primero=3&segundo=5" *@
@page "/counter"

<PageTitle>Sumar</PageTitle>

<h2>Sumador</h2>

<p>Los parametros se deben pasar por la url: <b>primero</b> y <b>segundo</b></p>
<p role="status">Primer valor: @firstValue</p>
<p role="status">Segundo valor: @secondValue</p>
<p role="status"><b>Resultado:</b> @resultado</p>

<button class="btn btn-primary" @onclick="Sumar">Sumar</button>

@code {
    [SupplyParameterFromQuery]
    [Parameter]
    public string? primero {get; set;}
    [SupplyParameterFromQuery]
    [Parameter]
    public string? segundo {get; set;}

    private int firstValue = 0;
    private int secondValue = 0;

    private int resultado = 0;

    protected override void OnInitialized()
    {
        firstValue = primero != null ? int.Parse(primero) : 0;
        secondValue = segundo != null ? int.Parse(segundo) : 0;
    }

    private void Sumar()
    {
        resultado = firstValue + secondValue;
    }
}

//    //if(parameter.TryGetValue<string>(nameof(currentCountParameter), out var value))
//    //{
//    //    if (value is not null)
//    //    {
//    //        currentCountParameter = value;
//    //    }
//    //}

//}

protected override async Task OnInitializedAsync()
{
    // Usar el parámetro 'username' para obtener los datos del usuario.
    var user = await userService.GetUserByUsername(username);

    if (user != null)
    {
        // Asignar los datos a variables locales para mostrarlos en la página.
        this.displayName = user.DisplayName;
        this.profilePicture = user.ProfilePicture;
        // ... y así sucesivamente
    }
}

@page "/counter/{currentCountParameter:int?}"
```Asi la variable currentCountParameter seria tipo int

```js
public int? currentCountParameter { get; set; }
```Y la funcion OnInitialized queda de esta manera:

```js
protected override void OnInitialized()
    {
        // Initialize the current count with the value from the URL parameter or set it to 0
        currentCount = currentCountParameter.GetValueOrDefault(0);
        Logger.LogInformation("Counter component initialized.");
    }
```La funcion setParameterAsync no es necesaria. Ahora es mas simple

@page "/counter/{counterStartParameter?}"
@inject ILogger<Counter> logger;

<PageTitle>Counter</PageTitle>

<h2>A Counter </h2>

<p role="status">Current count: @currentCount</p>
<p role="status">Secound Descendent Count: @secondCount </p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;
    private int secondCount = 100;

    [Parameter]
    public string? counterStartParameter { get; set; }

    [SupplyParameterFromQuery]
    [Parameter]
    public string? counterStartFromQuery { get; set; }

    public override async Task SetParametersAsync(ParameterView parameters)
    {
        logger.LogInformation("Dentro de SetParametersAsync");

        if (parameters.TryGetValue<string>(nameof(counterStartParameter), out var value)) 
        {
            counterStartParameter = value;
        }

        await base.SetParametersAsync(parameters);
    }

    protected override void OnInitialized()
    {
        int tempInt;
        logger.LogInformation("Dentro de OnInitialized");
        int.TryParse(counterStartParameter ?? currentCount.ToString(), out currentCount);
        var exist = int.TryParse(counterStartFromQuery, out tempInt);
        secondCount = exist ? tempInt : secondCount;
    }

    protected override void OnAfterRender(bool firstRender)
    {
        logger.LogInformation("Dentro de OnAfterRenderAsync");
    }

    protected override void OnParametersSet()
    {
        logger.LogInformation("Recibiendo parametros");
    }
    
    private void IncrementCount()
    {
        currentCount++;
        secondCount--;
    }
}

if (parameters.TryGetValue<string>nameof(currentCountParameter), out var parameter)
{
    currentCountParameter = parameter; // Se asigna manualmente antes de Blazor
}

await base.SetParametersAsync(parameters);

public override async Task SetParametersAsync(ParameterView parameters)
{
    Logger.LogInformation("Se envían los parámetros");
    await base.SetParametersAsync(parameters);
}

protected override void OnParametersSet()
{
    Logger.LogInformation("Se asignan los parámetros");
    if (!int.TryParse(currentCountParameter, out currentCount))
    {
        currentCount = 0; // Si no se puede convertir, asigna 0
        Logger.LogWarning($"Valor inválido para currentCountParameter: '{currentCountParameter}', se asigna 0.");
    }
}

Ciclo de vida en componentes y parámetros

Introducción

Presentación

Prerrequisitos

¿Qué es WebAssembly y Blazor?

Creando un proyecto de Blazor en Visual Studio

Creando un proyecto de Blazor con el CLI

Analizando extensiones de Visual code para blazor

Componentes de Blazor

Estructura de componentes y arquitectura en Blazor

Ciclo de vida en componentes y parámetros

Creando componentes compartidos

Creando archivo de configuración

Conectando Blazor a Backend

Configurando conexión al backend para el proyecto

Creando componentes para conexión a la API

Mostrando lista de productos

Creando Menú y CSS para la lista de productos

Creando formulario para agregar registros

Integrando formulario con servicios

Usando Librerías de Blazor

Creando funcionalidad de eliminar usando JavaScript

Usando Librerías de Blazor

Cierre

Conclusión y cierre