web-dev-qa-db-fra.com

Est-il possible de charger des pages Blazor côté serveur HTML avant l'exécution du code?

La page HTML précédemment s'afficherait avant/pendant l'exécution de la partie "@code" de la page Blazor (le message "Loading ..." qui se trouve dans le projet par défaut) sur l'implémentation côté client de Blazor dans .Net Core 2.2. Cependant, cela ne se produit plus pour moi en utilisant .NET Core 3.0 avec Blazor sur une implémentation côté serveur.

Par exemple, une page avec une table qui a récupéré des données de la base de données chargerait toujours tous les autres éléments de la page (en-tête, étiquettes, en-têtes de tableau, etc.) mais maintenant la page ne se charge qu'APRÈS que toutes les données ont été extraites à partir de la base de données/l'opération dans la méthode "OnInitAsync" est terminée. En plus de cela, il n'y a pas de signal de "chargement" pour l'utilisateur que cliquer sur une page est en train de charger quoi que ce soit. Ils doivent attendre 10 à 15 secondes pour que toutes les données soient chargées (pas de curseur/invites en rotation).

En bref, je veux soit faire en sorte que l'utilisateur sache que la page se charge, mais idéalement, je voudrais que les pages HTML soient rendues et que toutes les données/opérations qui ne sont pas encore terminées apparaissent quand elles sont prêtes (comment cela fonctionne dans l'implémentation côté client).

Je suis nouveau dans le développement Web/Blazor, donc je suis plutôt perplexe ici. J'ai essayé de chercher partout des indices, mais vu sa nouveauté, il n'y a pas grand-chose. J'ai même essayé de le faire fonctionner avec le projet par défaut (WeatherForecaseService) mais même là, cela n'a pas fonctionné.

<html> a bunch of HTML </html>

@if (data == null)
{
    <div class="spinner-border text-primary" role="status">
        <span class="sr-only">Loading...</span>
    </div>
}

@code
{
    Data[] data;
    protected override async Task OnInitAsync()
    {
        data = await TaskService.GetDataAsync();
    }
}

Ce qui est attendu dans l'exemple ci-dessus, c'est qu'il y a un spinner montrant que les données se chargent, mais ce qui se passe, c'est que la page ne se charge pas du tout tant que les données ne sont pas réellement chargées (les données ne sont jamais nulles) dans lesquelles tous les éléments apparaissent en même temps . Est-ce juste ainsi que fonctionne l'implémentation côté serveur?

5
Dan

Vous pouvez utiliser de nouvelles modifications dans

OnAfterRenderAsync (bool firstRender) Comme ceci:

protected override Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        //Your code
    }

    return base.OnAfterRenderAsync(firstRender);
}
0
Amirhossein Yari