ASP.NET parametri di splatting e arbitrari degli attributi core Blazor

I componenti possono acquisire ed eseguire il rendering di attributi aggiuntivi oltre ai parametri e ai campi dichiarati del componente. È possibile acquisire attributi aggiuntivi in un dizionario e quindi applicarli a un elemento, denominato splatting, quando viene eseguito il rendering del componente usando l'attributo di @attributesRazor direttiva . Questo scenario è utile per definire un componente che produce un elemento di markup che supporta un'ampia gamma di personalizzazioni. Ad esempio, può essere noioso definire gli attributi separatamente per un oggetto <input> che supporta molti parametri o campi.

Splatting degli attributi

Nel componente Splat seguente:

• Il primo <input> elemento (id="useIndividualParams") usa singoli campi componente.
• Il secondo elemento <input> (id="useAttributesDict") usa lo splatting degli attributi.

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

Ad eccezione di id, gli elementi di cui è stato eseguito il rendering <input> nella pagina Web hanno attributi identici.

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

Anche se nell'esempio precedente vengono utilizzati campi per il primo <input> elemento (id="useIndividualParams"), lo stesso comportamento si applica quando vengono usati i parametri del componente.

Attributi arbitrari

Per accettare attributi arbitrari, definire un parametro del componente con la proprietà CaptureUnmatchedValues impostata su true:

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

La proprietà CaptureUnmatchedValues in [Parameter] consente al parametro di associare tutti gli attributi che non corrispondono a nessun altro parametro. Un componente può definire solo un singolo parametro con CaptureUnmatchedValues. Il tipo di proprietà usato con CaptureUnmatchedValues deve essere assegnabile da Dictionary<string, object> con chiavi di stringa. In questo scenario è anche possibile usare IEnumerable<KeyValuePair<string, object>> o IReadOnlyDictionary<string, object>.

La posizione di @attributes rispetto alla posizione degli attributi dell'elemento è importante. Quando @attributes vengono applicati all'elemento renderizzato, gli attributi vengono elaborati da destra a sinistra (dall'ultimo al primo) e per eventuali attributi comuni, viene mantenuto il primo. Si consideri il seguente esempio di un componente padre che consuma un componente figlio, in cui il componente figlio imposta un attributo "extra" e il componente padre applica un attributo "extra" sul componente figlio.

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'attributo AttributeOrderChild1 del componente extra è impostato a destra di @attributes. Il AttributeOrderParent1 rendering <div> del componente contiene extra="5" quando viene passato tramite l'attributo aggiuntivo perché gli attributi vengono elaborati da destra a sinistra (ultimo al primo) con il primo attributo "extra" vincente, ovvero l'attributo HTML hardcoded extra del AttributeOrderParent1 componente:

<div extra="5" />

Nell'esempio seguente, l'ordine di extra e @attributes viene invertito nel <div> del componente figlio. In questo scenario, il AttributeOrderParent2 renderizzato <div> del componente contiene extra="10" quando viene passato tramite l'attributo aggiuntivo perché il primo attributo "extra" elaborato è l'attributo HTML splattato extra dal componente padre.

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>

La <div> nella pagina Web resa dal componente genitore contiene extra="10".

<div extra="10" />