Liaison de données et événements dans Blazor Hybrid
Vous avez défini l’interface utilisateur de votre application web. Découvrons maintenant comment ajouter une logique à l’application. Dans une application Blazor, vous pouvez ajouter du code C# dans des fichiers .cs distincts ou inline dans vos composants Razor.
C# inclus dans les composants
Il est courant de combiner du code HTML et du code C# dans un même fichier de composant Razor. Cette approche fonctionne bien pour des composants simples moins exigeants en termes de code. Pour ajouter du code à un fichier Razor, vous allez utiliser la syntaxe Razor.
Que sont les directives Razor ?
Les directives Razor sont un balisage de composant utilisé pour inclure du code C# dans le code HTML. Les directives permettent aux développeurs de définir des instructions uniques, des méthodes ou des blocs de code plus volumineux.
Directives de code
Les directives de code doivent être familières aux développeurs qui ont utilisé Razor Pages ou le modèle-vue-contrôleur.
Vous pouvez utiliser @expression() pour ajouter une instruction C# inline avec HTML. Si vous avez besoin de davantage de code, utilisez la directive @code pour ajouter plusieurs instructions entre parenthèses.
Vous pouvez aussi ajouter une section @functions au modèle pour les méthodes et les propriétés. Elles sont ajoutées au début de la classe générée, où le document peut les référencer.
Liaison de données Razor
Dans les composants Razor, vous pouvez lier des éléments HTML à des données dans des champs C#, des propriétés et des valeurs d’expression Razor. La liaison de données permet une synchronisation bidirectionnelle entre le code HTML et le votre.
Les données sont envoyées (push) du code HTML vers .NET quand un composant est affiché. Étant donné que les composants s’affichent après l’exécution du code du gestionnaire d’événements, les mises à jour de propriétés apparaissent dans l’interface utilisateur immédiatement après le déclenchement d’un gestionnaire d’événements.
Utilisez la majoration @bind pour lier une variable C# à une entrée HTML. Vous verrez un exemple de liaison de données dans le prochain exercice.