Créer une interface utilisateur avec des composants Blazor

Effectué

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

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

Dans cette unité, vous allez apprendre à créer des composants dans Blazor et à écrire du code qui restitue 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 interactive enrichie en écrivant du code C#. Avec Blazor, vous pouvez utiliser la même langue pour tout votre code, côté serveur et côté client. Vous pouvez l’afficher dans de nombreux navigateurs différents, y compris les navigateurs sur les appareils mobiles.

Note

Il existe deux modèles d’hébergement pour le code dans les applications Blazor :

• Blazor Server : dans ce modèle, l’application est exécutée sur le serveur web au sein d’une application ASP.NET Core. Côté client, les mises à jour de l’interface utilisateur, les événements et les appels JavaScript sont envoyés via une connexion SignalR entre le client et le serveur. Dans ce module, nous abordons et codeons ce modèle.
• Blazor WebAssembly : Dans ce modèle, l’application Blazor, ses dépendances et le runtime .NET sont téléchargés et exécutés sur le navigateur.

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

Note

La syntaxe Razor est utilisée pour incorporer du code .NET dans des pages web. Vous pouvez l’utiliser dans ASP.NET applications MVC (Model-View-Controller), où les fichiers ont une .cshtml extension. La syntaxe Razor est utilisée dans Blazor pour écrire des composants. Ces composants ont plutôt l’extension .razor , et il n’existe aucune séparation stricte entre les contrôleurs et les vues.

Voici un exemple simple de 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 les balises <p> du code HTML. Nous examinons des exemples plus complexes plus loin dans cette unité.

Créer des composants Blazor

Lorsque vous créez une application Blazor à l’aide du blazor modèle dans l’interface de ligne de commande dotnet (CLI), plusieurs composants sont inclus par défaut :

dotnet new blazor -o BlazingPizzaSite

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 vues 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 cette commande :

dotnet new razorcomponent -n PizzaBrowser -o Pages

• L’option -n spécifie le nom du composant à ajouter. Cet exemple montre comment ajouter un nouveau fichier nommé PizzaBrowser.razor.
• L’option -o spécifie le dossier que vous souhaitez contenir le nouveau composant.

Important

Le nom d’un composant Blazor doit commencer par un caractère majuscule.

Après avoir créé le composant, vous pouvez l’ouvrir pour être modifié avec Visual Studio Code :

code Pages/PizzaBrowser

Écrire du code dans un composant Blazor

Lorsque vous générez une interface utilisateur dans Blazor, vous mélangez le balisage HTML statique et CSS 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 inclut 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 pouvez reconnaître le balisage HTML avec <h1> et <p> les balises. Ce balisage est l’infrastructure statique de la page, dans laquelle votre code insère du contenu dynamique. Le balisage Razor se compose des éléments suivants :

• La @page directive : cette directive fournit un modèle d’itinéraire vers Blazor. Au moment de l’exécution, Blazor localise une page à afficher en correspondant à ce modèle à l’URL demandée par l’utilisateur. Dans ce cas, il peut correspondre à une URL du formulaire http://yourdomain.com/index.
• La @code directive : cette directive déclare que le texte du 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 des opérations de calcul, de recherche de données ou d’autres sources. Dans ce cas, le code définit un seul membre de composant appelé welcomeMessage et définit sa valeur de chaîne.
• Directives d’accès aux membres : 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 @welcomeMessage directive est utilisée pour afficher la valeur du welcomeMessage membre dans les <p> balises.