In uno script precedente (https://www.aspitalia.com/script/1363/Disabilitare-Pulsante-Blazor-Salvataggio.aspx) abbiamo visto un esempio di come possiamo disabilitare un button in Blazor quando avviamo operazioni asincrone. Un comportamento di questo tipo è molto utile in molteplici casi, e pertanto può aver senso crearne un componente riutilizzabile.
Iniziamo a dare un'occhiata ai requisiti. Il nostro componente si chiamerà BusyButton e vogliamo che sia utilizzabile in maniera del tutto analoga a un normale Button HTML. In buona sostanza, da utilizzatori vogliamo personalizzarne la classe CSS, aggiungere attributi quali Id o Name, specificarne il contenuto e, ovviamente, l'event handler da richiamare al click:
<BusyButton id="mybutton" class="btn btn-primary" style="..." @onclick="this.AddToCart"> Add to cart </BusyButton>
Creiamo allora un componente BusyButton.razor e inseriamo il codice seguente.
<button @attributes="this.AdditionalAttributes" disabled="@IsBusy" @onclick="this.HandleClick"> @if (IsBusy) { <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> } <span>@ChildContent</span> </button> @code { public bool IsBusy { get; set; } [Parameter] public RenderFragment ChildContent { get; set; } [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary<string, object> AdditionalAttributes { get; set; } [Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; } public async Task HandleClick(MouseEventArgs args) { try { IsBusy = true; await this.OnClick.InvokeAsync(args); } finally { IsBusy = false; } } }
Il codice necessario è interessante, perché svela diverse peculiarità sintattiche e del binding di Blazor:
- La sezione di markup consiste sostanzialmente in un Button del tutto simile a quello che abbiamo creato nello script citato all'inizio; quando IsBusy è true, ne impostiamo l'attributo disabled e mostriamo lo spinner di Bootstrap;
- l'innerHTML è in binding con la proprietà ChildContent, di tipo RenderFragment. Questo ci permetterà di ereditare il contenuto da quello specificato all'esterno;
- come indicato nei requisiti, quando utilizziamo questo oggetto vorremmo che eventuali classi CSS, stili o qualsiasi altro attribute sia passato al button interno. Per raggiungere questo risultato, abbiamo aggiunto un parametro di tipo IReadOnlyDictionary chiamata AdditionalAttributes, su cui abbiamo attivato l'opzione CaptureUnmatchedValues. Si tratta in pratica di un catch-all, e ogni attributo di BusyButton non esplicitamente dichiarato finirà all'interno di questo dictionary. Un binding di tipo @attributes farà sì che poi questi vengano replicati nel button interno;
- abbiamo esposto un parametro OnClick di tipo EventCallback, con cui il chiamante potrà specificare l'handler per l'evento click;
- il nostro button non invoca questo handler direttamente, ma utilizza un metodo HandleClick. All'interno di esso, settiamo IsBusy a true, eseguiamo l'handler esterno e poi ripristiniamo il valore a false
In questo modo, abbiamo realizzato un componente flessibile e riutilizzabile in un gran numero di contesti, sia in Blazor Server che in Blazor WebAssembly.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Elencare le container images installate in un cluster di Kubernetes
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Eseguire attività pianificate con Azure Container Jobs
Eseguire operazioni sui blob con Azure Storage Actions
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Cambiare la chiave di partizionamento di Azure Cosmos DB
Disabilitare automaticamente un workflow di GitHub
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Gestire i null nelle reactive form tipizzate di Angular
Reactive form tipizzati con FormBuilder in Angular