Vous trouverez ci-dessous le contenu du fichier FetchData.razor de Blazor Templates

• Notez que le fichier contient deux parties: HTML mélangé avec C # (Razor) et code C # dans le bloc @code, dans lequel nous définissons un tableau d'objets WeatherForecast qui est appelé prévisions. Ce tableau contiendra les objets WeatherForecast renvoyés par l'appel http, effectué dans la méthode OnInitAsync, vers le serveur.

  • Notez que l'instruction if ( @if (forecasts == null) ) vérifie si les objets WeatherForecast ont déjà été récupérés. Tant que la variable prévisions est nulle, le html <p><em>Loading...</em></p> est affiché. Vous pouvez ajouter ici autant de Html que vous le souhaitez, y compris des images, des spinners, etc.

  • Une fois les prévisions attribuées aux objets WeatherForecast, un tableau Html s'affiche avec les données récupérées

  J'espère que cela t'aides...

 @page "/fetchdata"
 @using BlazorHosted_CSharp.Shared
 @inject HttpClient Http

 <h1>Weather forecast</h1>

 <p>This component demonstrates fetching data from the server.</p>

 @if (forecasts == null)
 {
     <p><em>Loading...</em></p>
 }
 else
 {
     <table class="table">
         <thead>
             <tr>
                 <th>Date</th>
                 <th>Temp. (C)</th>
                 <th>Temp. (F)</th>
                 <th>Summary</th>
             </tr>
         </thead>
         <tbody>
             @foreach (var forecast in forecasts)
             {
                 <tr>
                     <td>@forecast.Date.ToShortDateString()</td>
                     <td>@forecast.TemperatureC</td>
                     <td>@forecast.TemperatureF</td>
                     <td>@forecast.Summary</td>
                 </tr>
             }
         </tbody>
     </table>
 }

 @code {
     WeatherForecast[] forecasts;

     protected override async Task OnInitAsync()
     {
         forecasts = await Http.GetJsonAsync<WeatherForecast[]>("api/SampleData/WeatherForecasts");
     }
 }

Option 1: Utilisation de Task.Delay (1)

• Utilisez une méthode asynchrone.
• Utilisez await Task.Delay(1) ou await Task.Yield(); pour vider les modifications

    // Don't do this
    //protected override async Task OnInitializedAsync()
    //{
    //    await LongOperation();
    //}

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {            
            await Task.Run(()=> LongOperation());//<--or Task.Delay(0) without Task.Run
            StateHasChanged();
        }
    }

L'option 1 est une solution simple qui fonctionne bien mais qui ressemble à une astuce.

Option 2: Utilisation de Task.Run () (pas pour WebAssembly)

En janvier 2020. @Ed Charbeneau a publié le projet BlazorPro.Spinkit englobant de longs processus dans une tâche pour ne pas bloquer le thread:

Assurez-vous que votre LongOperation() est une Task , si ce n'est pas le cas, placez-la dans une Task et attendez-la:

async Task AsyncLongOperation()    // this is an async task
{
    spinning=true;
    await Task.Run(()=> LongOperation());  //<--here!
    currentCount++;
    spinning=false;
}

Effet

Prérendu côté serveur et spinner

Étant donné que les applications Blazor Server utilisent le pré-rendu, la double flèche n'apparaîtra pas, pour afficher la double flèche, l' opération longue doit être effectuée dans OnAfterRender .

Utilisez OnAfterRenderAsync sur OnInitializeAsync pour éviter un rendu côté serveur retardé

private async Task AsyncLongFunc()    // this is an async task
{
    spinning=true;
    await Task.Delay(1);      // flushing changes. The trick!!
    LongFunc();               // non-async code
    currentCount++;
    spinning=false;
    await Task.Delay(1);      // changes are flushed again    
}

Plus d'échantillons

Apprenez-en plus sur la façon d'écrire un joli spinner que vous pouvez apprendre du projet open source BlazorPro.Spinkit , il contient des exemples intelligents.

Plus d'informations

Voir la réponse de Henk Holterman avec l'explication interne de Blazor.

Ne faites pas la même erreur que moi en testant wait spinner en utilisant Thread.Sleep (n).

protected override async Task OnInitializedAsync()
{
    // Thread.Sleep(3000); // By suspending current thread the browser will freeze.
    await Task.Delay(3000); // This is your friend as dani herrera pointed out. 
                      // It creates a new task that completes 
                      // after a specified number of milliseconds.

    forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
}

Pour répondre à l'avis dans la solution de @ daniherrera , trois solutions plus élégantes sont proposées ici .

En bref :

• Implémentez INotifyPropertyChanged au modèle et StateHasChanged() sur une PropertyChangedEventHandler événement PropertyChangedEventHandler partir du modèle.
• Utilisez des délégués pour appeler StateHasChanged() sur le modèle.
• Ajoutez un EventCallBack<T> au composant ou à la page de la vue et affectez-le à la fonction qui doit changer le rendu du composant et de ses parents. ( StateHasChanged() n'est pas nécessaire dans celui-ci`)

La dernière option est la plus simple, la plus flexible et la plus élevée, mais choisissez à votre convenance.

Dans l'ensemble, je conseillerai d'utiliser l'une de ces solutions présentées plus que l' await Task.Delay(1); un si la sécurité de votre application est un problème.

Edit: Après plus de lecture, ce lien fournit une explication solide sur la façon de gérer les événements en C #, principalement avec EventCallBack .

Blazor Serverside - J'avais besoin d'appeler StateHasChanged () pour forcer le frontend à se mettre à jour afin que le spinner s'affiche avant que le code ne passe à l'appel ajax.

/* Show spinner */
carForm.ShowSpinner = true;

/* Force update of front end */
StateHasChanged();

/* Start long running API/Db call */
await _carRepository.Update(item);