ASP.NET splatting atributu Core Blazor a libovolné parametry

Komponenty můžou kromě deklarovaných parametrů komponent zachycovat a vykreslovat i další atributy. Další atributy je možné zachytávat ve slovníku a pak splattovat na elementy při vykreslování komponent pomocí atributu direktivy Razor@attributes. Tento scénář je vhodný pro definování komponent, které generují elementy kódu HTML podporující různé úpravy. Například může být zdlouhavé definovat zvlášť atributy pro prvek <input>, který podporuje velké množství parametrů.

Splatting atributů

V následující komponentě Splat:

• První element <input> (id="useIndividualParams") používá jednotlivé parametry komponenty.
• Druhý parametr <input> (id="useAttributesDict") využívá splatting atributů.

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" }
        };
}

Vykreslené elementy <input> na webové stránce jsou totožné:

<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">

Libovolné atributy

Pokud chcete přijímat doplňkové atributy, definujte parametr komponenty s vlastností CaptureUnmatchedValues nastavenou na hodnotu true:

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

Vlastnost CaptureUnmatchedValues u parametru [Parameter] umožňuje parametru hledat shodu se všemi atributy, které neodpovídají žádnému jinému parametru. Každá komponenta může definovat pouze jeden parametr s vlastností CaptureUnmatchedValues. Typ vlastnosti použitý u vlastnosti CaptureUnmatchedValues musí být přiřaditelný z třídy Dictionary<string, object> pomocí řetězcových klíčů. V tomto scénáři je možné použít také rozhraní IEnumerable<KeyValuePair<string, object>> nebo IReadOnlyDictionary<string, object>.

Pozice atributu @attributes vzhledem k pozici atributů elementu je důležitá. Když se atribut @attributes splattuje na element, atributy se zpracovávají zprava doleva (od posledního k prvnímu). Podívejte se na následující příklad nadřazené komponenty, která využívá podřízenou komponentu:

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>

Atribut extra komponenty AttributeOrderChild1 je nastavený napravo od atributu @attributes. Vykreslený element <div> komponenty AttributeOrderParent1 bude obsahovat extra="5", když se mu předá další atribut, protože atributy se zpracovávají zprava doleva (od posledního k prvnímu):

<div extra="5" />

V následujícím příkladu je pořadí atributů extra a @attributes v elementu <div> podřízené komponenty obrácené:

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>

Element <div> ve vykreslené webové stránce nadřazené komponenty bude obsahovat extra="10", když se mu předá další atribut:

<div extra="10" />