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
Creare attributi generici in C#
Health monitoring con Azure Container App
Impostare dinamicamente il nome di una run di un workflow di GitHub
Condividere i workflow tra più repository in GitHub
Raggruppare i parametri di una minimal API in un singolo oggetto in ASP.NET Core
Utilizzare la parola chiave file nel codice C#
Taggare la output cache in base al routing in ASP.NET Core
Ottimizzare la persistenza che coinvolge un solo oggetto con Entity Framework Core 7
Mostrare una preview durante l'upload di un'immagine in Blazor
Installazione di una PWA Blazor
Q# for Quantum Programming, an "only for the brave" session
Creare automaticamente una pipeline YAML da una sua definizione in Azure DevOps
I più letti di oggi
- Sfruttare la local cache del browser tramite gli ETag in #aspnetcore https://aspit.co/cfc di @crad77 #webapi #aspnetmvc #blazor #cache
- Annunciati .NET 2015, ASP.NET 5 e Visual Studio 2015: open source, per Windows, Linux e MacOSX
- Sottoscrizione agli eventi sul contenitore in JavaScript
- Catturare la telemetria degli eventi di output cache in ASP.NET Core