Il sistema di data binding di Blazor è incredibilmente potente e versatile. Grazie a esso, possiamo non solo collegare componenti visuali a proprietà della pagina, ma anche eseguire una semplice logica quando il valore di una delle proprietà venga modificato.

Per esempio possiamo facilmente creare una somma di due numeri sfruttando un'opportuna proprietà:

<h1>Sum</h1>

<input type="text" @bind="@first" @bind:event="oninput" /> +
<input type="text" @bind="@second" @bind:event="oninput" />
=
<span>@Sum</span>

@code {
    private int? first = 0;
    private int? second = 0;

    private int Sum
    {
        get
        {
            return first.GetValueOrDefault() + second.GetValueOrDefault();
        }
    }
}

In questo caso, i due text input sono in binding con due field, first e second, mentre la somma è calcolata tramite una proprietà readonly Sum. Se configuriamo il binding come nell'esempio, vedremo il valore della somma aggiornarsi in real time mentre digitiamo l'input. Il motore di rendering, infatti, si accorgerà che anche il contenuto dello Span è cambiato e pertanto aggiornerà il corrispondente elemento in pagina.

Questo sistema, tuttavia, presenta un grosso limite: non possiamo eseguire operazioni asincrone. Le proprietà infatti sono sincrone e non supportano il pattern async/await.

Immaginiamo per esempio di avere una pagina di settings, e di voler salvare il contenuto automaticamente ogni volta che una proprietà viene modificata. Questa operazione richiederà una chiamata ad API, per sua natura asincrona. Come possiamo procedere?

La soluzione è quella di impostare un callback sull'after binding:

<PageTitle>Options</PageTitle>

<h1>Option</h1>

<p>Option 1: <input type="text" @bind="@opt1" @bind:after="SaveSettingsAsync" /></p>
<p>Option 2: <input type="checkbox" @bind="@opt2" @bind:after="SaveSettingsAsync" /></p>
<p>@message</p>

@code {
    private string opt1 = string.Empty;
    private bool opt2 = true;
    private string message = string.Empty;

    private async Task SaveSettingsAsync()
    {
        message = $"Save in progress...";

        // simula una chiamata ad API
        await Task.Delay(2000);

        message = $"Saved {opt1} and {opt2}";
    }
}

In questo caso, abbiamo un metodo SaveSettingsAsync, che simula la chiamata ad API e poi mostra un messaggio di salvataggio ottenuto. Tutto ciò che dobbiamo fare è impostarlo tramite l'attributo bind:after in corrispondenza dei controlli in data binding, così che venga chiamato automaticamente dopo che il binding abbia impostato il nuovo valore. Il motore di rendering, come nel caso di ogni esecuzione asincrona, effettuerà due refresh del markup, uno fino al primo await, mostrando il messaggio "Save in progress", e uno al termine, confermando il completamento dell'operazione.