Projection d’attributs et paramètres arbitraires ASP.NET Core Blazor

Les composants peuvent capturer et afficher des attributs supplémentaires en plus des paramètres et champs déclarés du composant. Les attributs supplémentaires peuvent être capturés dans un dictionnaire, puis appliqués à un élément (cela s'appelle une projection) lorsque le composant est rendu avec l’attribut de directive @attributesRazor. Ce scénario est utile pour définir un composant qui produit un élément de balisage prenant en charge des personnalisations diverses. Par exemple, il peut être fastidieux de définir des attributs séparément pour un <input> qui prend en charge de nombreux paramètres ou champs.

Projection d’attributs

Dans le composant Splat suivant :

• Le premier <input> élément (id="useIndividualParams") utilise des champs de composant individuels.
• Le deuxième élément <input> (id="useAttributesDict") utilise la projection d’attributs.

Splat.razor :

@page "/splat"

<PageTitle>SPLAT!</PageTitle>

<h1>Splat Parameters Example</h1>

<input id="useIndividualParams"
       maxlength="@maxlength"
       placeholder="@placeholder"
       required="@required"
       size="@size" />

<input id="useAttributesDict"
       @attributes="InputAttributes" />

@code {
    private string maxlength = "10";
    private string placeholder = "Input placeholder text";
    private string required = "required";
    private string size = "50";

    private Dictionary<string, object> InputAttributes { get; set; } =
        new()
        {
            { "maxlength", "10" },
            { "placeholder", "Input placeholder text" },
            { "required", "required" },
            { "size", "50" }
        };
}

À l’exception de id, les éléments rendus <input> de la page web ont des attributs identiques :

<input id="useIndividualParams"
       maxlength="10"
       placeholder="Input placeholder text"
       required="required"
       size="50">

<input id="useAttributesDict"
       maxlength="10"
       placeholder="Input placeholder text"
       required="required"
       size="50">

Bien que l’exemple précédent utilise des champs pour le premier <input> élément (id="useIndividualParams"), le même comportement s’applique lorsque les paramètres de composant sont utilisés.

Attributs arbitraires

Pour accepter des attributs arbitraires, définissez un paramètre de composant avec la propriété CaptureUnmatchedValues définie sur true :

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object>? InputAttributes { get; set; }
}

La propriété CaptureUnmatchedValues sur [Parameter] permet au paramètre de capturer tous les attributs qui ne correspondent à aucun autre paramètre. Un composant ne peut définir qu’un seul paramètre avec CaptureUnmatchedValues. Le type de propriété utilisé avec CaptureUnmatchedValues doit pouvoir être affecté à partir de Dictionary<string, object> avec des clés de chaîne. Il également possible d’utiliser IEnumerable<KeyValuePair<string, object>> ou IReadOnlyDictionary<string, object> dans ce scénario.

La position de @attributes par rapport à la position des attributs d’élément est importante. Lorsque des @attributes sont projetés sur l’élément rendu, les attributs sont traités de droite à gauche (du dernier au premier), le premier attribut l'emportant pour tous les attributs communs. Prenons l’exemple suivant d’un composant parent qui consomme un composant enfant, où l’enfant définit un attribut «extra » et le composant parent splate un attribut «extra » sur le composant enfant.

AttributeOrderChild1.razor :

<div @attributes="AdditionalAttributes" extra="5" />

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public IDictionary<string, object>? AdditionalAttributes { get; set; }
}

AttributeOrder1.razor :

@page "/attribute-order-1"

<PageTitle>Attribute Order 1</PageTitle>

<h1>Attribute Order Example 1</h1>

<AttributeOrderChild1 extra="10" />

<p>
    View the HTML markup in your browser to inspect the attributes on
    the AttributeOrderChild1 component.
</p>

L’attribut AttributeOrderChild1 du composant extra est défini à droite de @attributes. La représentation AttributeOrderParent1 du composant <div> contient extra="5" lorsqu’il passe par l’attribut supplémentaire, car les attributs sont traités de droite à gauche (du dernier au premier), le premier attribut « extra » l'emportant, qui est l’attribut HTML extra codé en dur du composant AttributeOrderParent1 :

<div extra="5" />

Dans l'exemple suivant, l'ordre de extra et @attributes est inversé dans le <div> du composant enfant. Dans ce scénario, le AttributeOrderParent2 rendu du composant <div> contient extra="10" lorsqu'il est passé par l'attribut supplémentaire, car le premier attribut «extra» traité est l'attribut HTML éclaté du composant parent extra.

AttributeOrderChild2.razor :

<div extra="5" @attributes="AdditionalAttributes" />

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public IDictionary<string, object>? AdditionalAttributes { get; set; }
}

AttributeOrder2.razor :

@page "/attribute-order-2"

<PageTitle>Attribute Order 2</PageTitle>

<h1>Attribute Order Example 2</h1>

<AttributeOrderChild2 extra="10" />

<p>
    View the HTML markup in your browser to inspect the attributes on
    the AttributeOrderChild2 component.
</p>

Le <div> rendu dans le composant parent contient extra="10" :

<div extra="10" />