Estate atento ya que en este enunciado vas a hallar la solución que buscas.

Solución:

Opción 1: Uso de Task.Delay(1)

• Utilice un método asíncrono.
• Utilizar await Task.Delay(1) o await Task.Yield(); para vaciar los cambios

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    

La opción 1 es una solución simple que funciona bien pero parece un truco.

Opción 2: Usar Task.Run() (no para WebAssembly)

En enero de 2020. @Ed Charbeneau publicó el proyecto BlazorPro.Spinkit que incluye procesos largos en tareas para no bloquear el hilo:

Asegúrese de que su LongOperation() es un Tasksi no lo es, enciérrelo en un Task y espéralo:

async Task AsyncLongOperation()    // this is an async task

    spinning=true;
    await Task.Run(()=> LongOperation());  //<--here!
    currentCount++;
    spinning=false;

---

Efecto

Prerenderizado del lado del servidor y spinner

Debido a que las aplicaciones de Blazor Server utilizan la representación previa, la rueda giratoria no aparecerá, para mostrar la rueda giratoria, la operación larga debe realizarse en OnAfterRender.

Use OnAfterRenderAsync sobre OnInitializeAsync para evitar una representación retrasada del lado del servidor

    // 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();
        
    

Más muestras

Obtenga más información sobre cómo escribir un buen spinner que puede aprender del proyecto de código abierto BlazorPro.Spinkit, contiene ejemplos inteligentes.

Más información

Vea la respuesta de Henk Holterman con la explicación interna de blazor.

A continuación se muestra el contenido del archivo FetchData.razor de Blazor Templates

• Tenga en cuenta que el archivo contiene dos partes: HTML combinado con C# (Razor) y código C# dentro del bloque @code, en el que definimos un array del objeto WeatherForecast que se llama pronósticos. Esta array retendrá los objetos WeatherForecast devueltos desde la llamada http, realizada en el método OnInitAsync, al servidor.

  • Tenga en cuenta que la sentencia if (@if (forecasts == null)) está comprobando si los objetos WeatherForecast ya se han recuperado. Siempre que las previsiones variables sean null el html

    Loading...

    
    se visualiza. Puede agregar aquí tanto Html como desee, incluidas imágenes, ruletas, etc.

  • Una vez que se asignan los pronósticos a los objetos WeatherForecast, se muestra una tabla Html con los datos recuperados

  Espero que esto ayude...

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

 
Weather forecast

 
This component demonstrates fetching data from the server.

 @if (forecasts == null)
 
     
Loading...
 
 else
 
     
             @foreach (var forecast in forecasts)
             
                 

         

             

                 
Date
                 
Temp. (C)
                 
Temp. (F)
                 
Summary
             
         
         

                     
@forecast.Date.ToShortDateString()
                     
@forecast.TemperatureC
                     
@forecast.TemperatureF
                     
@forecast.Summary
                 
             
         
     
 

 @code 
     WeatherForecast[] forecasts;

     protected override async Task OnInitAsync()
     
         forecasts = await Http.GetJsonAsync("api/SampleData/WeatherForecasts");
     
 

Para responder al aviso en la solución de @daniherrera, aquí se proponen tres soluciones más elegantes.

En breve :

• ImplementarINotifyPropertyChangedal Modelo e invocarStateHasChanged()en unPropertyChangedEventHandlerpropiedad de evento del Modelo.
• Usar delegados para invocarStateHasChanged()en el Modelo.
• Agrega unEventCallBackparámetro al componente o página de la Vista y asígnelo a la función que debería cambiar el renderizado del componente y sus padres.(StateHasChanged()no es necesario en este`)

La última opción es la más sencilla, flexible y de alto nivel, pero elige a tu conveniencia.

En general, recomendaré usar una de esas soluciones presentadas más que la await Task.Delay(1); uno si la seguridad de su aplicación es una preocupación.

Editar: Después de leer más, este enlace proporciona una explicación sólida sobre cómo manejar eventos en C#, principalmente con EventCallBack.

Comentarios y calificaciones

Eres capaz de añadir valor a nuestro contenido tributando tu experiencia en las notas.

---

---

Utiliza Nuestro Buscador