Créer des composants d’interface utilisateur réutilisables avec Blazor

Article
06/08/2023

Conseil

Ce contenu est un extrait du livre électronique, Blazor pour les développeurs ASP NET Web Forms pour Azure, disponible dans la documentation .NET ou au format PDF à télécharger gratuitement pour le lire hors connexion.

Télécharger le PDF

L’un des avantages de ASP.NET Web Forms est qu’il permet d’encapsuler des éléments de code d’interface utilisateur (IU) réutilisables dans des contrôles IU réutilisables. Des contrôles utilisateur personnalisés peuvent être définis par balisage à l’aide de fichiers .ascx. Vous pouvez également créer des contrôles serveur élaborés dans le code avec prise en charge complète du concepteur.

Blazor prend également en charge l’encapsulation de l’interface utilisateur par le biais de composants. Un composant :

Est un segment autonome de l’interface utilisateur.
Conserve son propre état et sa logique de rendu.
Peut définir des gestionnaires d’événements d’interface utilisateur, lier des données d’entrée et gérer son propre cycle de vie.
Est généralement défini dans un fichier .razor à l’aide de la syntaxe Razor.

Présentation de Razor

Razor est un langage de balisage léger basé sur HTML et C#. Avec Razor, vous pouvez effectuer une transition transparente entre le balisage et le code C# pour définir votre logique de rendu de composant. Lorsque le fichier .razor est compilé, la logique de rendu est capturée de manière structurée dans une classe .NET. Le nom de la classe compilée est extrait du nom de fichier .razor. L’espace de noms est extrait de l’espace de noms par défaut pour le projet et du chemin du dossier, ou vous pouvez spécifier explicitement l’espace de noms à l’aide de la directive @namespace (plus d’informations sur les directives Razor ci-dessous).

La logique de rendu d’un composant est créée à l’aide du balisage HTML normal avec une logique dynamique ajoutée à l’aide de C#. Le caractère @ est utilisé pour passer à C#. Razor est généralement intelligent pour savoir quand vous êtes revenu au HTML. Par exemple, le composant suivant affiche une balise <p> avec l’heure actuelle :

<p>@DateTime.Now</p>

Pour spécifier explicitement le début et la fin d’une expression C#, utilisez des parenthèses :

<p>@(DateTime.Now)</p>

Razor facilite également l’utilisation du flux de contrôle C# dans votre logique de rendu. Par exemple, vous pouvez afficher du code HTML de manière conditionnelle comme suit :

@if (value % 2 == 0)
{
    <p>The value was even.</p>
}

Vous pouvez également générer une liste d’éléments à l’aide d’une boucle C# foreach normale comme suit :

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

Les directives Razor, comme les directives dans ASP.NET Web Forms, contrôlent de nombreux aspects de la compilation d’un composant Razor. Les exemples incluent les éléments suivants du composant :

Espace de noms
Classe de base
Interfaces implémentées
Paramètres génériques
Espaces de noms importés
Itinéraires

Les directives Razor commencent par le caractère @ et sont généralement utilisées au début d’une nouvelle ligne au début du fichier. Par exemple, la directive @namespace définit l’espace de noms du composant :

@namespace MyComponentNamespace

Le tableau suivant récapitule les différentes directives Razor utilisées dans Blazor et leurs équivalents ASP.NET Web Forms, s’ils existent.

Directive	Description	Exemple	Équivalent Web Forms
`@attribute`	Ajoute un attribut au niveau de la classe au composant	`@attribute [Authorize]`	Aucun
`@code`	Ajoute des membres de classe au composant	`@code { ... }`	`<script runat="server">...</script>`
`@implements`	Implémente l’interface spécifiée	`@implements IDisposable`	Utiliser code-behind
`@inherits`	Hérite de la classe de base spécifiée	`@inherits MyComponentBase`	`<%@ Control Inherits="MyUserControlBase" %>`
`@inject`	Injecte un service dans le composant	`@inject IJSRuntime JS`	Aucun
`@layout`	Spécifie un composant de disposition pour le composant	`@layout MainLayout`	`<%@ Page MasterPageFile="~/Site.Master" %>`
`@namespace`	Définit l’espace de noms du composant	`@namespace MyNamespace`	Aucun
`@page`	Spécifie l’itinéraire du composant	`@page "/product/{id}"`	`<%@ Page %>`
`@typeparam`	Spécifie un paramètre de type générique pour le composant	`@typeparam TItem`	Utiliser code-behind
`@using`	Spécifie un espace de noms à insérer dans l’étendue	`@using MyComponentNamespace`	Ajouter un espace de noms dans web.config

Les composants Razor utilisent également largement les attributs de directive sur les éléments pour contrôler différents aspects de la façon dont les composants sont compilés (gestion des événements, liaison de données, références d’éléments et composants, etc.). Les attributs de directive suivent tous une syntaxe générique commune où les valeurs entre parenthèses sont facultatives :

@directive(-suffix(:name))(="value")

Le tableau suivant récapitule les différents attributs des directives Razor utilisés dans Blazor.

Attribut	Description	Exemple
`@attributes`	Génère le rendu d’un dictionnaire d’attributs	`<input @attributes="ExtraAttributes" />`
`@bind`	Crée une liaison de données bidirectionnelle	`<input @bind="username" @bind:event="oninput" />`
`@on{event}`	Ajoute un gestionnaire d’événements pour l’événement spécifié	`<button @onclick="IncrementCount">Click me!</button>`
`@key`	Spécifie une clé à utiliser par l’algorithme différentiel pour conserver des éléments dans une collection	`<DetailsEditor @key="person" Details="person.Details" />`
`@ref`	Capture une référence au composant ou à l’élément HTML	`<MyDialog @ref="myDialog" />`

Les différents attributs de directive utilisés par Blazor (@onclick, @bind, @ref et ainsi de suite) sont couverts dans les sections ci-dessous et les chapitres ultérieurs.

La plupart des syntaxes utilisées dans les fichiers .aspx et .ascx ont des syntaxes parallèles dans Razor. Vous trouverez ci-dessous une comparaison simple des syntaxes pour ASP.NET Web Forms et Razor.

Fonctionnalité	Web Forms	Syntaxe	Razor	Syntaxe
Directives	`<%@ [directive] %>`	`<%@ Page %>`	`@[directive]`	`@page`
Blocs de code	`<% %>`	`<% int x = 123; %>`	`@{ }`	`@{ int x = 123; }`
Expressions (HTML-encoded)	`<%: %>`	`<%:DateTime.Now %>`	Implicite : `@` Explicite : `@()`	`@DateTime.Now` `@(DateTime.Now)`
Commentaires	`<%-- --%>`	`<%-- Commented --%>`	`@* *@`	`@* Commented *@`
Liaison de données	`<%# %>`	`<%# Bind("Name") %>`	`@bind`	`<input @bind="username" />`

Pour ajouter des membres à la classe de composant Razor, utilisez la directive @code. Cette technique est similaire à l’utilisation d’un bloc <script runat="server">...</script> dans un contrôle utilisateur ou une page ASP.NET Web Forms.

@code {
    int count = 0;

    void IncrementCount()
    {
        count++;
    }
}

Étant donné que Razor est basé sur C#, il doit être compilé à partir d’un projet C# (.csproj). Vous ne pouvez pas compiler les fichiers .razor à partir d’un projet Visual Basic (.vbproj). Vous pouvez toujours référencer des projets Visual Basic à partir de votre projet Blazor. L’inverse est également vrai.

Pour obtenir une référence complète de syntaxe Razor, consultez la Référence de syntaxe Razor pour ASP.NET Core.

Utiliser des composants

Outre le code HTML normal, les composants peuvent également utiliser d’autres composants dans le cadre de leur logique de rendu. La syntaxe d’utilisation d’un composant dans Razor est similaire à l’utilisation d’un contrôle utilisateur dans une application ASP.NET Web Forms. Les composants sont spécifiés à l’aide d’une balise d’élément qui correspond au nom de type du composant. Par exemple, vous pouvez ajouter un composant Counter comme suit :

<Counter />

Contrairement à ASP.NET Web Forms, les composants dans Blazor :

N’utilisez pas de préfixe d’élément (par exemple asp:).
N’exigez pas besoin d’inscription sur la page ou dans le web.config.

Pensez aux composants Razor comme vous le feriez pour les types .NET, car c’est exactement ce qu’ils sont. Si l’assembly contenant le composant est référencé, le composant est disponible pour utilisation. Pour placer l’espace de noms du composant dans l’étendue, appliquez la directive @using :

@using MyComponentLib

<Counter />

Comme indiqué dans les projets Blazor par défaut, il est courant de placer des directives @using dans un fichier _Imports.razor afin de les importer dans tous les fichiers .razor dans le même répertoire et dans les répertoires enfants.

Si l’espace de noms d’un composant n’est pas dans l’étendue, vous pouvez spécifier un composant à l’aide de son nom de type complet, comme vous pouvez le faire en C# :

<MyComponentLib.Counter />

Modifier le titre de la page à partir des composants

Lors de la création d’applications de style SPA, il est courant que les parties d’une page se rechargent sans recharger la page entière. Malgré cela, il peut être utile de faire en sorte que le titre de la page change en fonction du composant actuellement chargé. Pour ce faire, incluez la balise <PageTitle> dans la page Razor du composant :

@page "/"
<PageTitle>Home</PageTitle>

Le contenu de cet élément peut être dynamique, par exemple en montrant le nombre actuel de messages :

<PageTitle>@MessageCount messages</PageTitle>

Notez que si plusieurs composants d’une page particulière incluent des balises <PageTitle>, seul le dernier sera affiché (car chacun remplacera le précédent).

Paramètres de composant

Dans ASP.NET Web Forms, vous pouvez envoyer des paramètres et des données vers des contrôles à l’aide de propriétés publiques. Ces propriétés peuvent être définies dans le balisage à l’aide d’attributs ou définies directement dans le code. Les composants Razor fonctionnent de manière similaire, bien que les propriétés des composants doivent également être marquées avec l’attribut [Parameter] pour être considérés comme des paramètres de composant.

Le composant Counter suivant définit un paramètre de composant appelé IncrementAmount qui peut être utilisé pour spécifier la quantité par laquelle Counter doit être incrémenté à chaque clic sur le bouton.

<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    int currentCount = 0;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

    void IncrementCount()
    {
        currentCount+=IncrementAmount;
    }
}

Pour spécifier un paramètre de composant dans Blazor, utilisez un attribut comme vous le feriez dans ASP.NET Web Forms :

<Counter IncrementAmount="10" />

Paramètres de chaîne de requête

Les composants Razor peuvent également tirer parti des valeurs de la chaîne de requête de la page sur laquelle ils sont rendus en tant que source de paramètre. Pour activer cela, ajoutez l’attribut [SupplyParameterFromQuery] au paramètre. Par exemple, la définition de paramètre suivante obtient sa valeur à partir de la requête sous la forme ?IncBy=2 :

[Parameter]
[SupplyParameterFromQuery(Name = "IncBy")]
public int IncrementAmount { get; set; } = 1;

Si vous ne fournissez pas de code personnalisé Name dans l’attribut [SupplyParameterFromQuery], par défaut, il correspondra au nom de la propriété (IncrementAmount dans ce cas).

Composants et limites d’erreur

Par défaut, les applications Blazor détectent les exceptions non gérées et affichent un message d’erreur en bas de la page sans détails supplémentaires. Pour limiter les parties de l’application qui sont affectées par une erreur non gérée, par exemple pour limiter l’impact à un seul composant, la balise <ErrorBoundary> peut être encapsulée autour des déclarations de composant.

Par exemple, pour vous protéger contre les exceptions possibles levées à partir du composant Counter, déclarez-le dans un <ErrorBoundary> et spécifiez éventuellement un message à afficher s’il existe une exception :

<ErrorBoundary>
    <ChildContent>
        <Counter />
    </ChildContent>
    <ErrorContent>
        Oops! The counter isn't working right now; please try again later.
    </ErrorContent>
</ErrorBoundary>

Si vous n’avez pas besoin de spécifier de contenu d’erreur personnalisé, vous pouvez simplement encapsuler le composant directement :

<ErrorBoundary>
  <Counter />
</ErrorBoundary>

Un message par défaut indiquant « Une erreur s’est produite » s’affiche si une exception non gérée se produit dans le composant encapsulé.

Gestionnaires d’événements

ASP.NET Web Forms et Blazor fournissent tous deux un modèle de programmation basé sur les événements pour gérer les événements d’interface utilisateur. Les exemples de ces événements incluent les clics de bouton et l’entrée de texte. Dans ASP.NET Web Forms, vous utilisez des contrôles de serveur HTML pour gérer les événements d’interface utilisateur exposés par le DOM, ou vous pouvez gérer les événements exposés par les contrôles de serveur web. Les événements sont exposés sur le serveur via des demandes de publication de formulaire. Prenons l’exemple de clic sur le bouton Web Forms suivant :

Counter.ascx

<asp:Button ID="ClickMeButton" runat="server" Text="Click me!" OnClick="ClickMeButton_Click" />

Counter.ascx.cs

public partial class Counter : System.Web.UI.UserControl
{
    protected void ClickMeButton_Click(object sender, EventArgs e)
    {
        Console.WriteLine("The button was clicked!");
    }
}

Dans Blazor, vous pouvez inscrire des gestionnaires pour les événements d’interface utilisateur DOM directement à l’aide d’attributs de directive de la forme @on{event}. L’espace réservé {event} représente le nom de l’événement. Par exemple, vous pouvez écouter les clics de bouton comme suit :

<button @onclick="OnClick">Click me!</button>

@code {
    void OnClick()
    {
        Console.WriteLine("The button was clicked!");
    }
}

Les gestionnaires d’événements peuvent accepter un argument facultatif spécifique à l’événement pour fournir plus d’informations sur l’événement. Par exemple, les événements de souris peuvent prendre un argument MouseEventArgs, mais il n’est pas obligatoire.

<button @onclick="OnClick">Click me!</button>

@code {
    void OnClick(MouseEventArgs e)
    {
        Console.WriteLine($"Mouse clicked at {e.ScreenX}, {e.ScreenY}.");
    }
}

Au lieu de faire référence à un groupe de méthodes pour un gestionnaire d’événements, vous pouvez utiliser une expression lambda. Une expression lambda vous permet de fermer d’autres valeurs dans l’étendue.

@foreach (var buttonLabel in buttonLabels)
{
    <button @onclick="() => Console.WriteLine($"The {buttonLabel} button was clicked!")">@buttonLabel</button>
}

Les gestionnaires d’événements peuvent s’exécuter de manière synchrone ou asynchrone. Par exemple, le gestionnaire d’événements OnClick suivant s’exécute de manière asynchrone :

<button @onclick="OnClick">Click me!</button>

@code {
    async Task OnClick()
    {
        var result = await Http.GetAsync("api/values");
    }
}

Une fois qu’un événement est géré, le composant est rendu pour tenir compte des modifications d’état du composant. Avec les gestionnaires d’événements asynchrones, le composant est rendu immédiatement une fois l’exécution du gestionnaire terminée. Le composant est rendu à nouveau une fois l’opération asynchrone Task terminée. Ce mode d’exécution asynchrone permet d’afficher une interface utilisateur appropriée alors que le Task asynchrone est toujours en cours.

<button @onclick="ShowMessage">Get message</button>

@if (showMessage)
{
    @if (message == null)
    {
        <p><em>Loading...</em></p>
    }
    else
    {
        <p>The message is: @message</p>
    }
}

@code
{
    bool showMessage = false;
    string message;

    public async Task ShowMessage()
    {
        showMessage = true;
        message = await MessageService.GetMessageAsync();
    }
}

Les composants peuvent également définir leurs propres événements en définissant un paramètre de composant de type EventCallback<TValue>. Les rappels d’événements prennent en charge toutes les variantes des gestionnaires d’événements d’interface utilisateur DOM : arguments facultatifs, synchrones ou asynchrones, groupes de méthodes ou expressions lambda.

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

@code {
    [Parameter]
    public EventCallback<MouseEventArgs> OnClick { get; set; }
}

Liaison de données

Blazor fournit un mécanisme simple pour lier des données d’un composant d’interface utilisateur à l’état du composant. Cette approche diffère des fonctionnalités d’ASP.NET Web Forms pour lier des données de sources de données aux contrôles d’interface utilisateur. Nous aborderons la gestion des données provenant de différentes sources de données dans la section Gestion des données.

Pour créer une liaison de données bidirectionnelle d’un composant d’interface utilisateur à l’état du composant, utilisez l’attribut de directive @bind. Dans l’exemple suivant, la valeur de la case à cocher est liée au champ isChecked.

<input type="checkbox" @bind="isChecked" />

@code {
    bool isChecked;
}

Lorsque le composant est rendu, la valeur de la case à cocher est définie sur la valeur du champ isChecked. Lorsque l’utilisateur bascule la case à cocher, l’événement onchange est déclenché et le champ isChecked est défini sur la nouvelle valeur. La syntaxe @bind dans ce cas équivaut au balisage suivant :

<input value="@isChecked" @onchange="(UIChangeEventArgs e) => isChecked = e.Value" />

Pour modifier l’événement utilisé pour la liaison, utilisez l’attribut @bind:event.

<input @bind="text" @bind:event="oninput" />
<p>@text</p>

@code {
    string text;
}

Les composants peuvent également prendre en charge la liaison de données sur leurs paramètres. Pour lier des données, définissez un paramètre de rappel d’événement portant le même nom que le paramètre pouvant être lié. Le suffixe « Changed » est ajouté au nom.

PasswordBox.razor

Password: <input
    value="@Password"
    @oninput="OnPasswordChanged"
    type="@(showPassword ? "text" : "password")" />

<label><input type="checkbox" @bind="showPassword" />Show password</label>

@code {
    private bool showPassword;

    [Parameter]
    public string Password { get; set; }

    [Parameter]
    public EventCallback<string> PasswordChanged { get; set; }

    private Task OnPasswordChanged(ChangeEventArgs e)
    {
        Password = e.Value.ToString();
        return PasswordChanged.InvokeAsync(Password);
    }
}

Pour chaîner une liaison de données à un élément d’interface utilisateur sous-jacent, définissez la valeur et gérez l’événement directement sur l’élément d’interface utilisateur au lieu d’utiliser l’attribut @bind.

Pour établir une liaison à un paramètre de composant, utilisez un attribut @bind-{Parameter} pour spécifier le paramètre auquel vous souhaitez vous lier.

<PasswordBox @bind-Password="password" />

@code {
    string password;
}

Modifications d'état

Si l’état du composant a changé en dehors d’un événement d’interface utilisateur normal ou d’un rappel d’événement, le composant doit signaler manuellement qu’il doit être rendu à nouveau. Pour signaler que l’état d’un composant a changé, appelez la méthode StateHasChanged sur le composant.

Dans l’exemple ci-dessous, un composant affiche un message provenant d’un service AppState qui peut être mis à jour par d’autres parties de l’application. Le composant inscrit sa méthode StateHasChanged avec l’événement AppState.OnChange afin que le composant soit rendu chaque fois que le message est mis à jour.

public class AppState
{
    public string Message { get; }

    // Lets components receive change notifications
    public event Action OnChange;

    public void UpdateMessage(string message)
    {
        Message = message;
        NotifyStateChanged();
    }

    private void NotifyStateChanged() => OnChange?.Invoke();
}

@inject AppState AppState

<p>App message: @AppState.Message</p>

@code {
    protected override void OnInitialized()
    {
        AppState.OnChange += StateHasChanged
    }
}

Cycle de vie des composants

Le framework ASP.NET Web Forms a des méthodes de cycle de vie bien définies pour les modules, les pages et les contrôles. Par exemple, le contrôle suivant implémente des gestionnaires d’événements pour les événements de cycle de vie Init, Load et UnLoad :

Counter.ascx.cs

public partial class Counter : System.Web.UI.UserControl
{
    protected void Page_Init(object sender, EventArgs e) { ... }
    protected void Page_Load(object sender, EventArgs e) { ... }
    protected void Page_UnLoad(object sender, EventArgs e) { ... }
}

Les composants Razor possèdent aussi un cycle de vie bien défini. Le cycle de vie d’un composant peut être utilisé pour initialiser l’état du composant et implémenter des comportements de composant avancés.

Toutes les méthodes de cycle de vie des composants de Blazor ont des versions synchrones et asynchrones. Le rendu des composants est synchrone. Vous ne pouvez pas exécuter de logique asynchrone dans le cadre du rendu du composant. Toute logique asynchrone doit s’exécuter dans le cadre d’une méthode de cycle de vie async.

OnInitialized

Les méthodes OnInitialized et OnInitializedAsync sont utilisées pour initialiser le composant. Un composant est généralement initialisé après son rendu. Une fois qu’un composant est initialisé, il peut être rendu plusieurs fois avant qu’il ne soit finalement supprimé. La méthode OnInitialized est similaire à l’événement Page_Load dans les pages et contrôles ASP.NET Web Forms.

protected override void OnInitialized() { ... }
protected override async Task OnInitializedAsync() { await ... }

OnParametersSet

Les méthodes OnParametersSet et OnParametersSetAsync sont appelées lorsqu’un composant a reçu des paramètres de son parent et que la valeur est affectée aux propriétés. Ces méthodes sont exécutées après l’initialisation des composants et chaque fois que le composant est rendu.

protected override void OnParametersSet() { ... }
protected override async Task OnParametersSetAsync() { await ... }

OnAfterRender

Les méthodes OnAfterRender et OnAfterRenderAsync sont appelées une fois que le rendu d’un composant est terminé. Les références d’élément et de composant sont remplies à ce stade (plus d’informations sur ces concepts ci-dessous). L’interactivité avec le navigateur est activée à ce stade. Les interactions avec le DOM et l’exécution JavaScript peuvent se produire en toute sécurité.

protected override void OnAfterRender(bool firstRender)
{
    if (firstRender)
    {
        ...
    }
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await ...
    }
}

OnAfterRender et OnAfterRenderAsyncne sont pas appelés lors du prérendu sur le serveur.

Le paramètre firstRender est true la première fois que le composant est rendu ; sinon, sa valeur est false.

IDisposable

Les composants Razor peuvent implémenter IDisposable pour supprimer des ressources lorsque le composant est supprimé de l’interface utilisateur. Un composant Razor peut implémenter IDispose à l’aide de la directive @implements :

@using System
@implements IDisposable

...

@code {
    public void Dispose()
    {
        ...
    }
}

Capturer des références de composant

Dans ASP.NET Web Forms, il est courant de manipuler une instance de contrôle directement dans le code en faisant référence à son ID. Dans Blazor, il est également possible de capturer et de manipuler une référence à un composant, bien que cela soit beaucoup moins courant.

Pour capturer une référence de composant dans Blazor, utilisez l’attribut de directive @ref. La valeur de l’attribut doit correspondre au nom d’un champ réglable avec le même type que le composant référencé.

<MyLoginDialog @ref="loginDialog" ... />

@code {
    MyLoginDialog loginDialog = default!;

    void OnSomething()
    {
        loginDialog.Show();
    }
}

Lors du rendu du composant parent, le champ est rempli avec l’instance du composant enfant. Vous pouvez ensuite appeler des méthodes sur l’instance du composant ou la manipuler autrement.

La manipulation de l’état du composant directement à l’aide de références de composants n’est pas recommandée. Cela empêche le rendu automatique du composant aux moments appropriés.

Capturer des références d’éléments

Les composants Razor peuvent capturer des références à un élément. Contrairement aux contrôles serveur HTML dans ASP.NET Web Forms, vous ne pouvez pas manipuler le DOM directement à l’aide d’une référence d’élément dans Blazor. Blazor gère la plupart des interactions DOM pour vous à l’aide de son algorithme différentiel DOM. Les références d’élément capturées dans Blazor sont opaques. Toutefois, elles sont utilisées pour passer une référence d’élément spécifique dans un appel d’interopérabilité JavaScript. Pour plus d’informations sur l’interopérabilité JavaScript, consultez Interopérabilité entre ASP.NET Core Blazor et JavaScript.

Composants basés sur un modèle

Dans ASP.NET Web Forms, vous pouvez créer des contrôles basés sur un modèle. Les contrôles basés sur un modèle permettent au développeur de spécifier une partie du code HTML utilisée pour rendre un contrôle de conteneur. Les mécanismes de création de contrôles serveur avec modèles sont complexes, mais ils permettent des scénarios puissants pour le rendu des données d’une manière personnalisable par l’utilisateur. Parmi les exemples de contrôles modèles, citons Repeater et DataList.

Les composants Razor peuvent également être utilisés comme modèles en définissant des paramètres de composant de type RenderFragment ou RenderFragment<T>. Un RenderFragment représente un bloc de balisage Razor qui peut ensuite être rendu par le composant. Un RenderFragment<T> est un bloc de balisage Razor qui prend un paramètre qui peut être spécifié lorsque le fragment de rendu est rendu.

Contenu enfant

Les composants Razor peuvent capturer leur contenu enfant en tant que RenderFragment et afficher ce contenu dans le cadre du rendu du composant. Pour capturer le contenu enfant, définissez un paramètre de composant de type RenderFragment et nommez-le ChildContent.

ChildContentComponent.razor

<h1>Component with child content</h1>

<div>@ChildContent</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

Un composant parent peut ensuite fournir du contenu enfant à l’aide de la syntaxe Razor normale.

<ChildContentComponent>
    <ChildContent>
        <p>The time is @DateTime.Now</p>
    </ChildContent>
</ChildContentComponent>

Paramètres de modèle

Un composant Razor basé sur un modèle peut également définir plusieurs paramètres de composant de type RenderFragment ou RenderFragment<T>. Le paramètre d’un RenderFragment<T> peut être spécifié lorsqu’il est appelé. Pour spécifier un paramètre de type générique pour un composant, utilisez la directive Razor @typeparam.

SimpleListView.razor

@typeparam TItem

@Heading

<ul>
@foreach (var item in Items)
{
    <li>@ItemTemplate(item)</li>
}
</ul>

@code {
    [Parameter]
    public RenderFragment Heading { get; set; }

    [Parameter]
    public RenderFragment<TItem> ItemTemplate { get; set; }

    [Parameter]
    public IEnumerable<TItem> Items { get; set; }
}

Lorsque vous utilisez un composant modèle, les paramètres de modèle peuvent être spécifiés à l’aide d’éléments enfants qui correspondent aux noms des paramètres. Les arguments de composant de type RenderFragment<T> transmis en tant qu’éléments ont un paramètre implicite nommé context. Vous pouvez modifier le nom de ce paramètre d’implémentation à l’aide de l’attribut Context sur l’élément enfant. Tous les paramètres de type générique peuvent être spécifiés à l’aide d’un attribut qui correspond au nom du paramètre de type. Le paramètre de type est déduit si possible :

<SimpleListView Items="messages" TItem="string">
    <Heading>
        <h1>My list</h1>
    </Heading>
    <ItemTemplate Context="message">
        <p>The message is: @message</p>
    </ItemTemplate>
</SimpleListView>

La sortie de ce composant ressemble à ceci :

<h1>My list</h1>
<ul>
    <li><p>The message is: message1</p></li>
    <li><p>The message is: message2</p></li>
<ul>

Code-behind

Un composant Razor est généralement créé dans un fichier .razor unique. Toutefois, il est également possible de séparer le code et le balisage à l’aide d’un fichier code-behind. Pour utiliser un fichier de composant, ajoutez un fichier C# qui correspond au nom de fichier du composant, mais avec une extension .cs ajoutée (Counter.razor.cs). Utilisez le fichier C# pour définir une classe de base pour le composant. Vous pouvez nommer la classe de base comme vous le souhaitez, mais il est courant de nommer la classe de façon semblable à la classe de composant, avec une extension Base ajoutée (CounterBase). La classe basée sur le composant doit également dériver de ComponentBase. Ensuite, dans le fichier de composant Razor, ajoutez la directive @inherits pour spécifier la classe de base du composant (@inherits CounterBase).

Counter.razor

@inherits CounterBase

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button @onclick="IncrementCount">Click me</button>

Counter.razor.cs

public class CounterBase : ComponentBase
{
    protected int currentCount = 0;

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

La visibilité des membres du composant dans la classe de base doit être protected ou public pour être visible par la classe de composant.

Ressources supplémentaires

Ce qui précède n’est pas un traitement exhaustif de tous les aspects des composants Razor. Pour plus d’informations sur la façon de Créer et utiliser des composants Razor ASP.NET Core, consultez la documentation Blazor.

Précédent Suivant

Créer des composants d’interface utilisateur réutilisables avec Blazor

Présentation de Razor

Utiliser des composants

Modifier le titre de la page à partir des composants

Paramètres de composant

Paramètres de chaîne de requête

Composants et limites d’erreur

Gestionnaires d’événements

Liaison de données

Modifications d'état

Cycle de vie des composants

OnInitialized

OnParametersSet

OnAfterRender

IDisposable

Capturer des références de composant

Capturer des références d’éléments

Composants basés sur un modèle

Contenu enfant

Paramètres de modèle

Code-behind

Ressources supplémentaires

Commentaires

Ressources supplémentaires