Cursos Empresas Blog Live Conf Eventos Precios

0:0015:33

Ciclo de vida en componentes y parámetros

Curso de Aplicaciones Web con Blazor WebAssembly y .NET

Clase 8 / 19

Ver clases

Ciclo de vida en componentes y parámetros

Curso de Aplicaciones Web con Blazor WebAssembly y .NET

Clase 8 de 19

Clase 8 / 19

Ciclo de vida en componentes y parámetros

Curso de Aplicaciones Web con Blazor WebAssembly y .NET

Clase 8 / 19

Ver clases

Juan Daniel Diaz Jaramillo

Hace un año

- 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).

Comentarios (20)20 comentarios

Kevin Castellano

Hace 4 años

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

Hace 3 años

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 ramirez

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

Jhonatan Ruiz

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

Javier Sain Osorno Aguirre

Platzi Team

Como puedo obtener esos snippets en visual studio comunity ?

Miguel Teheran

Profesor

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

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

Hace 2 años

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

😊👍

Jairo Alonso Contreras Mateus

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

//}

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

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

Roberto Bravo

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

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

Ulises Flores Gutiérrez

ROMMEL DUAREZ SAENZ

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

Juan David Forero

Cliclo de vida de los componentes de blazor:

SetParametersAsync onInicializedAsync onAfterRenderAsync onParametersSetAsync StateHasChanged

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{ }

BALFRE VAZQUEZ CASTREJON

edward.arroyave

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.

Ciclo de vida en componentes y parámetros

Ciclo de vida en componentes y parámetros

Ciclo de vida en componentes y parámetros

Progreso del curso

Introducción

Componentes de Blazor

Conectando Blazor a Backend

Usando Librerías de Blazor

Cierre

Ciclo de vida en componentes y parámetros

Ciclo de vida en componentes y parámetros

Comentarios

Comentarios