Composants Razor

Maintenant que votre environnement de développement est configuré, nous allons explorer la structure d’un projet Blazor et découvrir comment fonctionnent les composants Blazor.

Page d’accueil

La page d’accueil de l’application est définie par le fichier Home.razor situé dans le répertoire Components/Pages . Home.razor contient le code suivant :

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

La @page directive en haut spécifie l’itinéraire de cette page afin que le Home composant s’affiche lorsque l’utilisateur accède à la racine de l’application. La PageTitle balise est un composant Blazor qui définit le titre de la page active afin qu’elle s’affiche sous l’onglet du navigateur. Le reste du fichier est html normal qui définit le contenu de la page.

Qu’est-ce que Razor ?

Razor est une syntaxe de balisage basée sur HTML et C#. Un fichier Razor (.razor) contient du code HTML brut, puis C# pour définir n’importe quelle logique de rendu, comme pour les conditions, le flux de contrôle et l’évaluation d’expression. Les fichiers Razor sont ensuite compilés en classes C# qui encapsulent la logique d’affichage du composant.

Quels sont les composants Razor ?

Si vous explorez les fichiers dans le projet Blazor, vous remarquerez que la plupart des fichiers qui composent le projet sont des fichiers .razor . Dans Blazor, un fichier Razor définit un composant réutilisable qui compose une partie de l’interface utilisateur de l’application. Les composants définissent le code HTML à afficher et comment gérer les événements utilisateur.

Au moment de la compilation, chaque composant Razor est intégré à une classe C#. La classe peut inclure des éléments d’interface utilisateur courants tels que l’état, la logique de rendu, les méthodes de cycle de vie et les gestionnaires d’événements. Étant donné que les composants Blazor créés dans Razor sont uniquement des classes C#, vous pouvez utiliser du code .NET arbitraire à partir de vos composants.

Utilisation de composants

Pour utiliser un composant à partir d’un autre composant, vous ajoutez une balise de style HTML avec un nom qui correspond au nom du composant. Par exemple, si vous avez un composant nommé MyButton.razor, vous pouvez ajouter un MyButton composant à un autre composant en ajoutant une <MyButton /> balise.

Paramètres de composant

Les composants peuvent également avoir des paramètres, ce qui vous permet de transmettre des données au composant lorsqu’il est utilisé. Les paramètres de composant sont définis en ajoutant une propriété C# publique au composant qui a également un [Parameter] attribut. Vous pouvez ensuite spécifier une valeur pour un paramètre de composant à l’aide d’un attribut de style HTML qui correspond au nom de la propriété. La valeur du paramètre peut être n’importe quelle expression C#.

Le bloc @code

Le @code bloc d’un fichier Razor est utilisé pour ajouter des membres de classe C# (champs, propriétés et méthodes) à un composant. Vous pouvez utiliser la méthode pour suivre l’état @code du composant, ajouter des paramètres de composant, implémenter des événements de cycle de vie des composants et définir des gestionnaires d’événements.

Essayer le compteur

Dans l’application en cours d’exécution, accédez à la page Compteur en sélectionnant l’onglet Compteur dans la barre latérale située à gauche. La page suivante doit alors être affichée :

Sélectionnez le bouton Click me pour incrémenter le compteur sans actualisation de la page. L’incrémentation d’un compteur dans une page web nécessite normalement l’écriture de JavaScript, mais avec Blazor, vous pouvez utiliser C#.

Vous pouvez trouver l’implémentation du composant Counter sur Components/Pages/Counter.razor.

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Une demande de /counter dans le navigateur, comme spécifié par la directive @page en haut, fait que le composant Counter effectue le rendu de son contenu. La @rendermode directive active le rendu interactif du serveur pour le composant, afin qu’il puisse gérer les événements d’interface utilisateur à partir du navigateur.

Chaque fois que vous sélectionnez le bouton Cliquer ici :

• L’événement onclick est déclenché.
• La méthode IncrementCount est appelée.
• La valeur currentCount est incrémentée.
• Le composant est affiché pour montrer le nombre mis à jour.