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
Assegnare un valore di default a un parametro di una lambda in C#
Usare un KeyedService di default in ASP.NET Core 8
Creare gruppi di client per Event Grid MQTT
Specificare il versioning nel path degli URL in ASP.NET Web API
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Usare il versioning con i controller di ASP.NET Core Web API
Eseguire operazioni con timeout in React
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Verificare la provenienza di un commit tramite le GitHub Actions
Utilizzare Model as a Service su Microsoft Azure
Effettuare il binding di date in Blazor
I più letti di oggi
- Utilizzare Docker Compose con Azure App Service
- Utilizzare QuickGrid di Blazor con Entity Framework
- Modernizzare le applicazioni WPF e Windows Forms con Blazor
- ASP 3 per esempi
- annunciato #netstandard 2.1. .NET Core lo supporterà a partire da #netcore3, così come le prossime versione di #xamarin, #mono e #unity.il supporto per #netfx 4.8, invece, non ci sarà. https://aspit.co/bq2