Data binding ed eventi
Esaminiamo ora come definire la logica di rendering dei componenti e gestire gli eventi dell'interfaccia utente.
Esegui il rendering dei valori delle espressioni C#
Quando vuoi eseguire il rendering del valore di un'espressione C# in Razor, devi usare un carattere iniziale @. Ad esempio, un Counter componente può eseguire il rendering del valore del relativo currentCount campo nel modo seguente:
<p role="status">Current count: @currentCount</p>
Razor può in genere capire quando termina un'espressione C# e hai effettuato di nuovo il passaggio alla scrittura di codice HTML. Tuttavia, puoi specificare l'inizio e la fine dell'espressione tramite parentesi.
<p role="status">Current count: @(currentCount)</p>
Aggiungi il flusso di controllo
Puoi aggiungere il flusso di controllo alla logica di rendering dei componenti usando le normali istruzioni C#. Ad esempio, puoi eseguire il rendering condizionale di alcuni contenuti usando un'istruzione C# if, come illustrato di seguito:
@if (currentCount > 3)
{
<p>You win!</p>
}
È anche possibile usare C# per eseguire un ciclo sui dati e il rendering di un elenco di elementi:
<ul>
@foreach (var item in items)
{
<li>@item.Name</li>
}
</ul>
Gestire eventi
I componenti Blazor spesso gestiscono gli eventi dell'interfaccia utente. Per specificare un callback di evento per un evento da un elemento dell'interfaccia utente, usare un attributo che inizia con @on e termina con il nome dell'evento. Ad esempio, è possibile specificare il IncrementCount metodo come gestore per un evento click del pulsante usando l'attributo @onclick, come illustrato di seguito:
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
Puoi specificare anche i gestori dell'evento C# per altri eventi HTML, ad esempio @onchange, @oninput e così via. I metodi di gestione degli eventi possono essere sincroni o asincroni. Puoi anche definire gestori eventi inline usando espressioni lambda C#:
<button class="btn btn-primary" @onclick="() => currentCount++">Click me</button>
I metodi del gestore eventi possono facoltativamente accettare un argomento evento con informazioni sull'evento. Ad esempio, puoi accedere al valore di un elemento di input modificato in questo modo:
<input @onchange="InputChanged" />
<p>@message</p>
@code {
string message = "";
void InputChanged(ChangeEventArgs e)
{
message = (string)e.Value;
}
}
Dopo l'esecuzione di un gestore eventi, Blazor eseguirà automaticamente il rendering del componente con il nuovo stato, in modo che il messaggio venga visualizzato dopo le modifiche di input.
Data binding
Spesso si desidera che il valore di un elemento dell'interfaccia utente sia associato a un determinato valore nel codice. Quando il valore dell'elemento dell'interfaccia utente cambia, il valore del codice deve cambiare e quando il valore del codice cambia l'elemento dell'interfaccia utente deve visualizzare il nuovo valore. Il supporto del data binding di Blazor semplifica la configurazione di questo tipo di data binding bidirezionale.
Associa un elemento dell'interfaccia utente a un determinato valore nel codice usando l'attributo @bind. Ad esempio:
<input @bind="text" />
<button @onclick="() => text = string.Empty">Clear</button>
<p>@text</p>
@code {
string text = "";
}
Quando modifichi il valore dell'input, il campo text viene aggiornato con il nuovo valore. Quando modifichi il valore del campo text facendo clic sul pulsante Cancella, viene cancellato anche il valore dell'input.
Direttive Razor
Le direttive Razor sono parole chiave riservate nella sintassi Razor che influiscono sulla modalità di compilazione di un file Razor. Le direttive Razor iniziano sempre con il carattere @. Alcune direttive Razor vengono visualizzate all'inizio di una nuova riga, ad esempio @page e @code, mentre altri sono attributi che possono essere applicati agli elementi come attributi, ad esempio @bind. Puoi trovare un elenco completo delle direttive Razor nel riferimento alla sintassi Razor.
Abilita l'interattività
Per gestire gli eventi dell'interfaccia utente da un componente e per usare il data binding, il componente deve essere interattivo. Per impostazione predefinita, i componenti Blazor eseguono il rendering statico dal server, ovvero generano CODICE HTML in risposta alle richieste e non sono in grado di gestire gli eventi dell'interfaccia utente. Per rendere interattivo un componente, applica una modalità di rendering interattiva usando la direttiva @rendermode.
Puoi applicare la direttiva @rendermode a una definizione di componente:
@rendermode InteractiveServer
Oppure a un'istanza del componente:
<Counter @rendermode="InteractiveServer" />
Il componente Counter è attualmente l'unico componente interattivo nell'app e usa il rendering interattivo del server. Il rendering del server interattivo gestisce gli eventi dell'interfaccia utente dal server tramite una connessione WebSocket con il browser. Blazor invia eventi dell'interfaccia utente al server tramite questa connessione in modo che possano essere gestiti dai componenti dell'app. Blazor gestisce quindi l'aggiornamento del DOM del browser con gli aggiornamenti di cui è stato eseguito il rendering.
In alternativa, i componenti Blazor possono usare la modalità di rendering InteractiveWebAssembly per eseguire il rendering in modo interattivo dal client. In questa modalità, il codice del componente viene scaricato nel browser ed eseguito sul lato client usando un runtime .NET basato su WebAssembly.
La modalità di rendering interattiva che scegli di usare dipende dai requisiti dell'app. Attualmente il progetto Blazor è configurato solo per il rendering basato su server, quindi per questo modulo verrà usato il rendering statico e interattivo del server.