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
Effettuare update massivi con Entity Framework Core 7
Effettuare test di carico con Azure Load Testing
Le novità di .NET 7 e C# 11
Sottoscrizione agli eventi sul contenitore in JavaScript
Sfruttare la local cache del browser tramite gli ETag in ASP.NET Core
Organizzare il codice JavaScript utilizzando i moduli
Linting di un Dockerfile con un workflow di GitHub
Utilizzare l'attributo HTML inert per disabilitare gli eventi
Utilizzare parametri a livello di controller nel routing di ASP.NET Core
Intercettare gli eventi di creazione degli oggetti con Entity Framework 7
Terraform, Vue.js e Aws CloudFront
Mostrare una preview durante l'upload di un'immagine in Blazor
I più letti di oggi
- Ricevere avvisi su metriche dei server Azure Arc
- Workflow di continuous deployment tramite pull request label in GitHub
- Effettuare update massivi con Entity Framework Core 7
- Sottoscrizione agli eventi sul contenitore in JavaScript
- Effettuare l'upload di un file via FTP con la libreria FluentFTP di .NET
- Catturare la telemetria degli eventi di output cache in ASP.NET Core
- .NET Conference Italia 2022 - Milano e Online
- Monitorare i server on-premises con Azure Arc