ASP.NET Parameter percikan atribut core Blazor dan arbitrer

Komponen dapat menangkap dan merender atribut tambahan selain parameter dan bidang komponen yang dideklarasikan. Atribut tambahan dapat diambil dalam kamus dan kemudian diterapkan ke elemen, yang disebut splatting, ketika komponen dirender menggunakan atribut direktif @attributesRazor . Skenario ini berguna untuk menentukan komponen yang menghasilkan elemen markup yang mendukung berbagai kustomisasi. Misalnya, bisa jadi melelahkan untuk menentukan atribut secara terpisah untuk <input> yang mendukung banyak parameter atau bidang.

Percikan atribut

Dalam komponen Splat berikut:

• Elemen pertama <input> (id="useIndividualParams") menggunakan bidang komponen individual.
• Elemen <input> kedua (id="useAttributesDict") menggunakan 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" }
        };
}

Kecuali untuk id, elemen yang dirender <input> di halaman web memiliki atribut yang identik:

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

Meskipun contoh sebelumnya menggunakan bidang untuk elemen pertama <input> (id="useIndividualParams"), perilaku yang sama berlaku saat parameter komponen digunakan.

Atribut arbitrer

Untuk menerima atribut arbitrer, tentukan parameter komponen dengan properti CaptureUnmatchedValues diatur ke true:

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

Properti CaptureUnmatchedValues di [Parameter] memungkinkan parameter untuk mencocokkan semua atribut yang tidak cocok dengan parameter lainnya. Sebuah komponen hanya dapat menentukan satu parameter dengan CaptureUnmatchedValues. Jenis properti yang digunakan dengan CaptureUnmatchedValues harus dapat ditetapkan dari Dictionary<string, object> dengan kunci string. Penggunaan IEnumerable<KeyValuePair<string, object>> atau IReadOnlyDictionary<string, object> juga merupakan opsi dalam skenario ini.

Posisi @attributes yang relatif terhadap posisi atribut elemen sifatnya penting. Ketika @attributes ditempatkan pada elemen yang dirender, atribut diproses dari kanan ke kiri (terakhir ke pertama) dengan atribut pertama yang akan berlaku untuk atribut umum apa pun. Pertimbangkan contoh komponen induk berikut yang mengonsumsi komponen anak, di mana anak menetapkan atribut "extra" dan komponen induk memercikkan atribut "extra" pada komponen anak.

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 AttributeOrderChild1 komponen extra diatur ke sebelah kanan @attributes. Komponen AttributeOrderParent1 yang dirender <div> berisi extra="5" ketika diteruskan melalui atribut tambahan karena atribut diproses dari kanan ke kiri (terakhir ke pertama) dengan atribut "extra" pertama dalam urutan itu yang berlaku, yang merupakan atribut HTML yang dikodekan secara permanen sebagai extra dari komponen AttributeOrderParent1.

<div extra="5" />

Dalam contoh berikut, urutan extra dan @attributes dibalik dalam komponen <div> anak. Dalam skenario ini, bagian komponen AttributeOrderParent2 yang dirender <div> berisi extra="10" saat diteruskan melalui atribut tambahan karena atribut "extra" pertama yang diproses adalah atribut HTML yang disebarkan extra dari komponen induk.

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>

Di halaman web yang dirender oleh komponen induk, <div> berisi extra="10":

<div extra="10" />