Associare controlli ai dati nelle applicazioni Blazor
Blazor consente di associare controlli HTML alle proprietà in modo che i valori modificati vengano visualizzati automaticamente nell'interfaccia utente.
Si supponga di dover sviluppare una pagina che raccoglie dai clienti informazioni sulle preferenze relative alle pizze. Si vogliono caricare le informazioni da un database e consentire ai clienti di apportare modifiche, ad esempio la registrazione dei condimenti preferiti. In caso di modifica apportata dall'utente o di un aggiornamento nel database, si vuole che i nuovi valori vengano visualizzati nell'interfaccia utente il più rapidamente possibile.
In questa unità si apprenderà come usare il data binding in Blazor per associare gli elementi dell'interfaccia utente a proprietà, espressioni e valori di dati.
Che cos'è il data binding?
Se si vuole che un elemento HTML visualizzi un valore, è possibile scrivere codice per modificare la visualizzazione. Sarà necessario scrivere codice aggiuntivo per aggiornare la visualizzazione in caso di modifica del valore. In Blazor è possibile usare l'associazione dati per connettere un elemento HTML a un campo, una proprietà o un'espressione. In questo modo, in caso di modifica del valore, l'elemento HTML viene aggiornato automaticamente. L'aggiornamento viene eseguito in genere subito dopo la modifica e non è necessario scrivere codice di aggiornamento.
Per associare un controllo, usare la direttiva @bind:
@page "/"
<p>
Your email address is:
<input @bind="customerEmail" />
</p>
@code {
private string customerEmail = "user@contoso.com"
}
Nella pagina precedente ogni volta che la variabile customerEmail ne modifica il relativo valore, il valore <input> viene aggiornato.
Nota
Controlli, come <input>, aggiornano la visualizzazione solo quando viene eseguito il rendering del componente e non quando cambia il valore di un campo. Dal momento che il rendering dei componenti Blazor viene eseguito dopo l'esecuzione del codice del gestore eventi, in pratica gli aggiornamenti vengono in genere visualizzati rapidamente.
Associare elementi a eventi specifici
La direttiva @bind è intelligente e riconosce i controlli usati. Ad esempio, quando si associa un valore a una casella di testo <input>, viene associato l'attributo value. Una casella di controllo HTML <input> presenta un attributo checked anziché un attributo value. L'attributo @bind usa automaticamente questo attributo checked. Per impostazione predefinita, il controllo è associato all'evento DOM onchange. Si consideri, ad esempio, questa pagina:
@page "/"
<h1>My favorite pizza is: @favPizza</h1>
<p>
Enter your favorite pizza:
<input @bind="favPizza" />
</p>
@code {
private string favPizza { get; set; } = "Margherita"
}
Quando viene eseguito il rendering della pagina, il valore predefinito Margherita viene visualizzato sia nell'elemento <h1> che nella casella di testo. Quando si immette una nuova pizza preferita nella casella di testo, l'elemento <h1> non cambia finché non si esce dalla casella di testo o si preme INVIO perché si verifica quando viene generato l'evento DOM onchange.
Spesso, è questo il comportamento desiderato. Si supponga, tuttavia, di voler aggiornare l'elemento <h1> non appena si immette un carattere nella casella di testo. È possibile ottenere questo risultato eseguendo invece l'associazione all'evento DOM oninput. Per eseguire l'associazione a questo evento, è necessario usare le direttive @bind-value e @bind-value:event:
@page "/"
<h1>My favorite pizza is: @favPizza</h1>
<p>
Enter your favorite pizza:
<input @bind-value="favPizza" @bind-value:event="oninput" />
</p>
@code {
private string favPizza { get; set; } = "Margherita"
}
In questo caso, il titolo cambia non appena si digita un carattere nella casella di testo.
Formattare i valori associati
Se si visualizzano date all'utente, è possibile usare un formato di dati localizzato. Si supponga, ad esempio, di scrivere una pagina specificamente per gli utenti del Regno Unito, che preferiscono scrivere date indicando il giorno come primo elemento. È possibile usare la direttiva @bind:format per specificare una singola stringa in formato data:
@page "/ukbirthdaypizza"
<h1>Order a pizza for your birthday!</h1>
<p>
Enter your birth date:
<input @bind="birthdate" @bind:format="dd-MM-yyyy" />
</p>
@code {
private DateTime birthdate { get; set; } = new(2000, 1, 1);
}
Nota
Al momento della stesura di questo argomento, le stringhe di formato sono supportate solo con i valori di data. È possibile che in futuro vengano aggiunti formati di valuta, formati numerici e altri formati. Per controllare le informazioni più recenti sui formati di associazione, vedere Formattare le stringhe nella documentazione di Blazor.
In alternativa all'uso della direttiva @bind:format, è possibile scrivere codice C# per formattare un valore associato. Usare le funzioni di accesso get e set nella definizione del membro, come in questo esempio:
@page "/pizzaapproval"
@using System.Globalization
<h1>Pizza: @PizzaName</h1>
<p>Approval rating: @approvalRating</p>
<p>
<label>
Set a new approval rating:
<input @bind="ApprovalRating" />
</label>
</p>
@code {
private decimal approvalRating = 1.0;
private NumberStyles style = NumberStyles.AllowDecimalPoint | NumberStyles.AllowLeadingSign;
private CultureInfo culture = CultureInfo.CreateSpecificCulture("en-US");
private string ApprovalRating
{
get => approvalRating.ToString("0.000", culture);
set
{
if (Decimal.TryParse(value, style, culture, out var number))
{
approvalRating = Math.Round(number, 3);
}
}
}
}
Nell'unità successiva si applicheranno i concetti appresi.