Data binding ed eventi in Blazor Hybrid
È stata definita l'interfaccia utente per l'app Web. Verrà ora illustrato come aggiungere la logica all'app. In un'app Blazor è possibile aggiungere il codice C# necessario in file CS separati o inline nei componenti Razor.
C# inline nei componenti
Una pratica comune consiste nel combinare codice HTML e C# in un unico file di componente Razor. Per componenti semplici caratterizzati da requisiti di codice limitati, questo approccio funziona correttamente. Per aggiungere codice in un file Razor, si usa la sintassi Razor.
Che cosa sono le direttive Razor?
Le direttive Razor sono costituite dal markup dei componenti usato per integrare C# inline con HTML. Con le direttive gli sviluppatori possono definire singole istruzioni, metodi o blocchi di codice più grandi.
Direttive di codice
Le direttive di codice dovrebbero risultare familiari agli sviluppatori che hanno già usato Razor in MVC o Pages.
È possibile usare @expression() per aggiungere un'istruzione C# inline con HTML. Se è necessario altro codice, usare la direttiva @code per aggiungere più istruzioni racchiuse tra parentesi.
È anche possibile aggiungere al modello una sezione @functions per metodi e proprietà. Viene aggiunta all'inizio della classe generata, dove il documento può farvi riferimento.
Data binding di Razor
Nei componenti Razor è possibile associare elementi HTML a dati in campi C#, proprietà e valori di espressioni Razor. Il data binding consente la sincronizzazione bidirezionale tra HTML e il codice.
Quando viene eseguito il rendering di un componente, viene effettuato il push dei dati da HTML a .NET. Il rendering dei componenti viene eseguito automaticamente dopo l'esecuzione del codice del gestore eventi. È per questo motivo che gli aggiornamenti delle proprietà vengono riflessi nell'interfaccia utente immediatamente dopo l'attivazione di un gestore eventi.
Usare il markup @bind per associare una variabile C# a un input HTML. Nell'esercizio seguente verrà illustrato un esempio di associazione dati.