• 6 minutes

Examinons comment définir la logique de rendu des composants et gérer les événements d’interface utilisateur.

Afficher les valeurs d’expression C#

Quand vous voulez afficher la valeur d’une expression C# dans Razor, vous utilisez un caractère de début @. Par exemple, un composant Counter peut afficher la valeur de son champ currentCount de la façon suivante :

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

Razor peut généralement déterminer quand une expression C# se termine et que vous écrivez de nouveau en HTML. Toutefois, vous pouvez également explicitement marquer le début et la fin de l’expression en utilisant des parenthèses.

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

Ajouter un flux de contrôle

Vous pouvez ajouter un flux de contrôle à votre logique de rendu de composant en utilisant des instructions C# normales. Par exemple, vous pouvez afficher de manière conditionnelle du contenu en utilisant une instruction if C#, de la façon suivante :

@if (currentCount > 3)
{
    <p>You win!</p>
}

Vous pouvez également utiliser C# pour parcourir les données et afficher une liste d’éléments :

<ul>
    @foreach (var item in items)
    {
        <li>@item.Name</li>
    }
</ul>

Gérez les événements

Les composants Blazor gèrent souvent les événements d’interface utilisateur. Si vous voulez spécifier un rappel d’événement pour un événement d’élément d’interface utilisateur, vous utilisez un attribut commençant par @on et se terminant par le nom de l’événement. Par exemple, vous pouvez spécifier la méthode IncrementCount comme gestionnaire d’un événement de clic sur un bouton en utilisant l’attribut @onclick, de la façon suivante :

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

Vous pouvez également spécifier des gestionnaires d’événements C# pour d’autres événements HTML, comme @onchange, @oninput, etc. Les méthodes de gestion d’événements peuvent être synchrones ou asynchrones. Vous pouvez également définir des gestionnaires d’événements inline avec des expressions lambda C# :

<button class="btn btn-primary" @onclick="() => currentCount++">Click me</button>

Les méthodes de gestionnaire d’événements peuvent éventuellement prendre un argument d’événement avec des informations sur l’événement. Par exemple, vous pouvez accéder à la valeur d’un élément d’entrée qui a changé, comme suit :

<input @onchange="InputChanged" />
<p>@message</p>

@code {
    string message = "";

    void InputChanged(ChangeEventArgs e)
    {
        message = (string)e.Value;
    }
}

Après l’exécution d’un gestionnaire d’événements, Blazor affiche automatiquement le composant avec son nouvel état, de sorte que le message s’affiche après les changements de l’entrée.

Liaison de données

Souvent, vous voulez que la valeur d’un élément d’interface utilisateur soit liée à une valeur particulière dans le code. Quand la valeur de l’élément d’interface utilisateur change, la valeur du code doit changer, et quand la valeur du code change, l’élément d’interface utilisateur doit afficher la nouvelle valeur. La prise en charge par Blazor de la liaison de données facilite la configuration de ce type de liaison de données bidirectionnelle.

Vous liez un élément d’interface utilisateur à une valeur particulière dans le code en utilisant l’attribut @bind. Par exemple :

<input @bind="text" />
<button @onclick="() => text = string.Empty">Clear</button>
<p>@text</p>

@code {
    string text = "";
}

Quand vous changez la valeur de l’entrée, le champ text est mis à jour avec la nouvelle valeur. Quand vous changez la valeur du champ text en cliquant sur le bouton Effacer, la valeur de l’entrée est également effacée.

Directives Razor

Les directives Razor sont des mots clés réservés dans la syntaxe Razor qui influencent la compilation d’un fichier Razor. Les directives Razor commencent toujours par le caractère @. Certaines directives Razor apparaissent au début d’une nouvelle ligne, comme @page et @code, tandis que d’autres sont des attributs qui peuvent être appliqués à des éléments, comme @bind. La liste complète des directives Razor se trouve dans les informations de référence sur la syntaxe Razor.

Activer l’interactivité

Pour gérer les événements d’interface utilisateur d’un composant et pour utiliser la liaison de données, le composant doit être interactif. Par défaut, les composants Blazor s’affichent de manière statique à partir du serveur, ce qui signifie qu’ils génèrent du code HTML en réponse aux demandes et ne peuvent pas gérer les événements d’interface utilisateur. Vous rendez un composant interactif en appliquant un mode de rendu interactif avec la directive @rendermode.

Vous pouvez appliquer la directive @rendermode à une définition de composant :

@rendermode InteractiveServer

Ou à une instance de composant :

<Counter @rendermode="InteractiveServer" />

Le composant Counter est actuellement le seul composant interactif de notre application et il utilise le rendu interactif du serveur. Le rendu interactif du serveur gère les événements d’interface utilisateur du serveur via une connexion WebSocket avec le navigateur. Blazor envoie des événements d’interface utilisateur au serveur via cette connexion pour que les composants de l’application puissent les traiter. Blazor gère ensuite la mise à jour du DOM du navigateur avec les mises à jour affichées.

Les composants Blazor peuvent également utiliser le mode de rendu InteractiveWebAssembly pour un rendu interactif à partir du client. Dans ce mode, le code du composant est téléchargé dans le navigateur et s’exécute côté client avec un runtime .NET basé sur WebAssembly.

Le mode de rendu interactif que vous choisissez d’utiliser dépend des exigences de votre application. Actuellement, notre projet Blazor est configuré seulement pour le rendu basé sur le serveur : pour ce module, nous nous limitons donc au rendu statique et interactif du serveur.