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.