Una delle caratteristiche più interessanti di Blazor è la gestione delle operazioni asincrone. Immaginiamo di avere una form di registrazione utente simile alla seguente, che invoca un metodo SubmitAsync al click sul pulsante submit.
<EditForm Model="this.NewUser" OnValidSubmit="this.SubmitAsync" class="col-6"> ... <button type="submit" class="btn btn-primary">Save</button> </EditForm> @code { public User NewUser { get; set; } public async Task SubmitAsync() { // .. logica per memorizzare l'utente qui ... await Task.Delay(5000); } }
In presenza di un metodo asincrono, Blazor esegue il rendering del componente due volte: una prima volta appena termina l'esecuzione della parte sincrona del metodo (fino al primo await), e una seconda volta al termine dell'esecuzione del Task restituito, quando cioé tutte le operazioni asincrone sono terminate.
Questo ci permette di modificare una variabile per indicare che l'operazione è in progress, e sfruttarla poi all'interno del nostro template:
<EditForm Model="this.User" OnValidSubmit="this.SubmitAsync" class="col-6"> ... <button type="submit" disabled="@_inProgress" class="btn btn-primary"> @if (_inProgress) { <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span>Saving</span> } else { <span>Save</span> } </button> </EditForm> @code { public User User { get; set; } public async Task SubmitAsync() { try { _inProgress = true; // .. logica per memorizzare l'utente qui ... await Task.Delay(5000); } finally { _inProgress = false; } } }
Nell'esempio abbiamo impostato la variabile _inProgress all'interno di un blocco try..finally, e poi l'abbiamo sfruttata nel markup in due diversi modi:
- disabilitando il pulsante di submit quando l'operazione è già in corso;
- visualizzando uno spinner sul bottone stesso, tramite Bootstrap.
Nel prossimo script vedremo come combinare questo concetto e la validazione custom che abbiamo visto nello script precedente (https://www.aspitalia.com/script/1362/Implementare-Logiche-Validazione-Complesse-EditForm-Blazor.aspx), per effettuare validazioni lato server delle nostre form.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Utilizzare un service principal per accedere a Azure Container Registry
L'evoluzione di Blazor in .NET 8
Gestione degli environment per il deploy con un workflow di GitHub
Evitare il flickering dei componenti nel prerender di Blazor 8
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Limitare le richieste lato server con l'interactive routing di Blazor 8
Gestire i null nelle reactive form tipizzate di Angular
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Effettuare il binding di date in Blazor
Creare gruppi di client per Event Grid MQTT
Effettuare delete massive con Entity Framework Core 7
I più letti di oggi
- Evitare il flickering dei componenti nel prerender di Blazor 8
- Rilasciata la Beta 2 di Visual Studio 2008
- tra pochi minuti inizia la keynote della seconda giornata. seguila live su http://aspitalia.com/mix-11 #mix11
- .@dbochicchio ora su #aspnetcore 2 a #netconfit https://aspit.co/netconf-17
- Utilizzare angular-cli per creare una direttiva in Angular 2
- Windows Vista: il ritorno di WinFS con la beta1
- .@CristianCivera tra poco su #azure con i suoi tips&tricks per lo sviluppatore web: https://aspit.co/web15-live #aspilive
- Le novità di C# 10