Saltar al contenido

En Blazor, ¿cómo llamar a una función en Page Load (nombre del evento)?

Solución:

Hay dos formas principales de hacer esto, y cualquiera de las dos funcionará. Tiendo a preferir el primero, pero el segundo también hace el trabajo.

La primera forma, está en tu @code bloquear, puede anular el OnInitialized método. Utilizo la versión asincrónica ya que puede iniciar su tarea y dejar que se carguen los conceptos básicos de la página, y luego se actualizará cuando se configure.

@code {

void SomeStartupMethod()
{
    // Do Some Work
}

Task SomeStartupTask()
{
    // Do some task based work
    return Task.CompletedTask;
}

protected override async Task OnInitializedAsync()
{
    SomeStartupMethod();
    await SomeStartupTask();
}

Esto funcionará en la carga de la página, como una llamada de servicio inicial para completar datos, completar listas condicionalmente, lo que sea que necesite hacer. Por cierto, un truco que encontré es que si pones await Task.Delay(1); como la primera línea del cuerpo del método OnInitializedAsync, liberará la ejecución restante de la representación de la página, por lo que puede obtener una página inicial y receptiva mientras la carga inicial aún se está procesando en segundo plano. Solo algo para que su página responda más rápido.

La segunda forma es anular el OnAfterRender , que permite que la página 1 se renderice por completo y luego se ejecute. También tiene una entrada predeterminada de bool firstRender que puede utilizar como condición para cargas de datos y otras cosas.

protected override void OnAfterRender(bool firstRender)
{
    // execute conditionally for loading data, otherwise this will load
    // every time the page refreshes
    if(firstRender)
    {
        // Do work to load page data and set properties
    }
}

Lo importante que debe recordar para este método es que se ejecutará cada vez que el motor Blazor detecte la necesidad de actualizar la interfaz de usuario, así que use eso firstRender parámetro sabiamente.

Dependiendo de lo que necesite hacer, diferentes métodos de ciclo de vida pueden ser útiles en diferentes momentos, y hay algunos más que no he mencionado. Para obtener más información, consulte los documentos oficiales. He podido llegar muy lejos por mi cuenta con solo usar lo que me han proporcionado los documentos, y este enlace lo ayudará a comenzar con los métodos del ciclo de vida.

¡Espero que esto ayude!

[Parameter]
public int StartValue { get; set; }

private int currentCount = 0;

protected override void OnInitialized() // = On Page Load
{   
    currentCount = StartValue;
    IncrementCount();
}

private void IncrementCount()
{
    currentCount++;
}

o si no desea el primer StartValue simplemente:

[Parameter]
public int StartValue { get; set; } = 0;

protected override void OnInitialized() // = On Page Load
{   
    currentCount++;
}

si desea inicializarlo después de que el componente haya terminado de renderizarse (tal vez desee esperar a que se cargue DOM):

[Parameter]
public int StartValue { get; set; }

private int currentCount = 0;

protected override void OnAfterRender() 
{   
  if (firstRender)
 {
    currentCount = StartValue;
    IncrementCount();
  }
}

private void IncrementCount()
{
    currentCount++;
}

Una cosa importante a tener en cuenta con OnInitializedAsync, es que el evento puede dispararse más de una vez.

Dependiendo de su aplicación, probablemente esto no sea algo que quiera disparar una y otra vez.

// variable in your page or component
public bool Initialized { get; set; }

// if not initialized
if (!Initialized)
{
    // Do your initializations

    // This way it only runs once
    Initialized = true;
}

Y de otra manera es en el constructor de su Componente o Página

Aquí tengo una página llamada Index.razor y un código detrás llamado Index.razor.cs

En el constructor

public void Index()
{
    // Perform your initializations here
}
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *