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
Reactive form tipizzati con FormBuilder in Angular
Eseguire query verso tipi non mappati in Entity Framework Core
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Usare lo spread operator con i collection initializer in C#
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Utilizzare i primary constructor di C# per inizializzare le proprietà
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Miglioramenti agli screen reader e al contrasto in Angular
Eseguire attività basate su eventi con Azure Container Jobs
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Evitare la script injection nelle GitHub Actions