Créer une interface utilisateur avec des composants Blazor

• 7 minutes

Les composants Blazor vous permettent de définir des pages web ou des parties de code HTML qui incluent du contenu dynamique utilisant du code .NET. Dans Blazor, vous pouvez formuler du contenu dynamique avec C#, au lieu de JavaScript.

Supposons que vous travailliez pour une entreprise de livraison de pizzas pour créer un nouveau site web moderne. Vous commencez avec une page d’accueil qui devient la page de destination pour la plupart des utilisateurs du site. Vous souhaitez afficher des offres spéciales et des pizzas populaires sur cette page.

Dans cette leçon, vous allez apprendre à créer des composants dans Blazor et à écrire du code qui affiche du contenu dynamique sur ces composants.

Comprendre les composants Blazor

Blazor est une infrastructure que les développeurs peuvent utiliser pour créer une interface utilisateur (IU) interactive riche en écrivant du code C#. Avec Blazor, vous pouvez utiliser le même langage pour l’ensemble de votre code, côté serveur et côté client, et l’afficher dans de nombreux navigateurs différents, y compris des navigateurs sur appareils mobiles.

Dans Blazor, vous générez l’interface utilisateur à partir de parties de code autonomes appelées des composants. Chaque composant peut contenir un mélange de code HTML et C#. Les composants sont écrits à l’aide de syntaxe Razor, dans laquelle le code est marqué avec la directive @code. D’autres directives peuvent être utilisées pour accéder aux variables, effectuer une liaison à des valeurs et réaliser d’autres tâches de rendu. Lorsque l’application est compilée, le HTML et le code sont compilés dans une classe de composant. Les composants sont écrits sous forme de fichiers avec l’extension .razor.

Voici un exemple simple d’un composant Blazor :

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them blazing fast!";
}

Dans cet exemple, le code définit la valeur d’une variable de chaîne nommée welcomeMessage. Cette variable est rendue dans des balises <p> dans le HTML. Nous examinerons des exemples plus complexes plus loin dans cette leçon.

Créer des composants Blazor

Lorsque vous créez une application Blazor, grâce au modèle blazorserver dans l’interface de ligne de commande (CLI) dotnet, plusieurs composants sont inclus par défaut :

dotnet new blazorserver -o BlazingPizzaSite -f net6.0

Les composants par défaut incluent la page d’accueil Index.razor et le composant de démonstration Counter.razor . Ces deux composants sont placés dans le dossier Pages. Vous pouvez modifier ces affichages en fonction de vos besoins ou les supprimer et les remplacer par de nouveaux composants.

Pour ajouter un nouveau composant à une application web existante, utilisez la commande suivante :

dotnet new razorcomponent -n PizzaBrowser -o Pages -f net6.0

• L’option -n spécifie le nom du composant à ajouter. Cet exemple ajoute un nouveau fichier nommé PizzaBrowser.razor.
• L'option -o spécifie le dossier qui contiendra le nouveau composant.
• L’option -f force la génération de l’application avec l’infrastructure .NET version 6.

Une fois que vous avez créé le composant, vous pouvez l’ouvrir pour le modifier avec Visual Studio Code :

code Pages/PizzaBrowser

Écrire du code dans un composant Blazor

Lorsque vous créez une interface utilisateur dans Blazor, vous mélangez le balisage HTML et CSS statique avec du code C#, souvent dans le même fichier. Pour différencier ces types de code, vous utilisez la syntaxe Razor. La syntaxe Razor comprend des directives, précédées du symbole @, qui délimitent le code C#, les paramètres de routage, les données liées, les classes importées et d’autres fonctionnalités.

Examinons à nouveau cet exemple de composant :

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them fast!";
}

Vous reconnaissez le balisage HTML avec les balises <h1> et <p>. Ce balisage correspond à l’infrastructure statique de la page, dans laquelle votre code insèrera du contenu dynamique. Le balisage Razor se compose des éléments suivants :

• La directive @page : Cette directive fournit un modèle de route à Blazor. Au moment de l’exécution, Blazor localise une page à afficher en faisant correspondre ce modèle à l’URL demandée par l’utilisateur. Dans ce cas, il peut correspondre à une URL au format http://yourdomain.com/index.
• La directive @code : Cette directive déclare que le texte dans le bloc suivant est du code C#. Vous pouvez placer autant de blocs de code que nécessaire dans un composant. Vous pouvez définir des membres de classe de composant dans ces blocs de code et définir leurs valeurs à partir de calculs, d’opérations de recherche de données ou d’autres sources. Dans ce cas, le code définit un membre de composant unique appelé welcomeMessage et définit sa valeur de chaîne.
• Directives d’accès membre : Si vous souhaitez inclure la valeur d’un membre dans votre logique de rendu, utilisez le symbole @ suivi d’une expression C#, telle que le nom du membre. Dans ce cas, la directive @welcomeMessage est utilisée pour afficher la valeur du membre welcomeMessage dans les balises <p>.