7
votes

Dans Blazor, comment appeler une fonction au chargement de la page (nom de l'événement)?

première fois dans Blazor.

Dans le modèle de démarrage, je vois comment fonctionne l'événement ButtonPressed / Clicked.

Je veux créer des données pour un chartdiagram à "l'événement de chargement de page" et non à l'événement Buttonclick.

Pour l'événement Button, c'est ceci

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

private int currentCount = 0;

protected override void OnParametersSet()
{
    base.OnParametersSet();

    currentCount = StartValue;
}

private void IncrementCount()
{
    currentCount++;
}

@code {

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

}

De quelle ligne de code s'agit-il lorsque je veux appeler IncementCount sans cliquer sur le bouton

mais lors de "l'événement de page de chargement" ou comment cet événement s'appelle-t-il?

Merci pour l'aide


1 commentaires

OnInitialized ? Mais ce sera bizarre d'attendre la page jusqu'à ce que les données soient chargées. Peut-être sera-t-il préférable d'utiliser après le premier rendu.


3 Réponses :


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

private int currentCount = 0;

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

private void IncrementCount()
{
    currentCount++;
}

3 commentaires

Merci beaucoup pour avoir donné des informations! J'ai cliqué pour vous donner +1 (je n'ai toujours pas 15 points, donc cela ne s'affiche pas maintenant)


C'est ce que je cherchais: protected override void OnInitialized () {} ---- ou wat je ne savais pas. Merci


Je cherchais quelque chose comme ça pour définir les couleurs d'arrière-plan par défaut sur les lignes de tableau dans l'assemblage Web Blazor. Cela a parfaitement fonctionné, merci.



16
votes

Il existe deux façons principales de le faire, et l'une ou l'autre fonctionnera. J'ai tendance à préférer le premier, mais le second fait aussi le travail.

La première façon , est dans votre bloc @code , vous pouvez remplacer la méthode OnInitialized . J'utilise la version asynchrone, car vous pouvez lancer votre tâche et laisser les bases de la page se charger, puis elle s'actualisera lorsqu'elle sera configurée.

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

Cela fonctionnera lors du chargement de la page, comme un appel de service initial pour remplir les données, en remplissant les listes de manière conditionnelle, tout ce que vous devez faire. BTW, une astuce que j'ai trouvée est que si vous mettez en await Task.Delay(1); en tant que première ligne du corps de la méthode OnInitializedAsync, il interrompra l'exécution restante du rendu de la page, afin que vous puissiez obtenir une page initiale et réactive pendant que le chargement initial est toujours en cours de traitement en arrière-plan. Juste quelque chose pour rendre votre page plus réactive.

La deuxième méthode consiste à remplacer la méthode OnAfterRender , qui permet le rendu complet de la page 1, puis s'exécute. Il a également une entrée par défaut de bool firstRender que vous pouvez utiliser comme condition pour les chargements de données et d'autres choses.

@code {

void SomeStartupMethod()
{
    // Do Some Work
}

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

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

La chose importante à retenir pour cette méthode est qu'elle s'exécutera chaque fois que le moteur Blazor détectera la nécessité d'actualiser l'interface utilisateur, utilisez donc ce paramètre firstRender bon escient.

En fonction de ce que vous devez faire, différentes méthodes de cycle de vie peuvent être utiles à différents moments, et il y en a quelques autres que je n'ai pas abordées. Pour plus d'informations, consultez la documentation officielle . J'ai pu aller très loin par moi-même en utilisant simplement ce que les documents ont fourni, et ce lien vous permettra de démarrer avec les méthodes du cycle de vie.

J'espère que cela t'aides!


1 commentaires

Merci. Le OnInitialized est ce que je cherchais mais je ne savais pas ...;)



4
votes

Une chose importante à noter avec OnInitializedAsync, est que l'événement peut se déclencher plus d'une fois.

Selon votre application, ce n'est probablement pas quelque chose que vous voulez déclencher encore et encore.

public void Index()
{
    // Perform your initializations here
}

Et l'autre manière est dans le constructeur de votre composant ou page

Ici, j'ai une page nommée Index.razor et un code derrière nommé Index.razor.cs

Dans le constructeur

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


0 commentaires