Liaison de données et événements dans Blazor Hybrid

Vous avez défini l’interface utilisateur de votre application web. À présent, examinons 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.

Inline C# dans les composants

Il est courant de combiner HTML et C# dans un seul fichier de composant Razor. Pour les composants simples avec des exigences de code plus légères, cette approche fonctionne bien. Pour ajouter du code dans un fichier Razor, vous allez utiliser la syntaxe Razor.

Qu’est-ce que les directives Razor ?

Les directives Razor sont des balises de composant utilisées pour ajouter C# inline au format HTML. Avec des directives, les développeurs peuvent 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 dans MVC ou Pages.

Vous pouvez utiliser @expression() pour ajouter une instruction C# inline avec HTML. Si vous avez besoin d’un code supplémentaire, utilisez la @code directive pour ajouter plusieurs instructions entre parenthèses.

Vous pouvez également ajouter une @functions section au modèle pour les méthodes et les propriétés. Ils sont ajoutés 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 autorise la synchronisation bidirectionnelle entre HTML et votre code.

Les données sont envoyées de HTML à .NET lorsqu’un composant est rendu. Les composants s’affichent après l’exécution du code du gestionnaire d’événements, c’est pourquoi les mises à jour des propriétés sont reflétées dans l’interface utilisateur immédiatement après le déclenchement d’un gestionnaire d’événements.

Utilisez @bind le balisage pour lier une variable C# à une entrée HTML. Vous verrez un exemple de liaison de données dans l’exercice suivant.