ASP.NET Parameter percikan atribut core Blazor dan arbitrer

Komponen dapat mengambil dan merender atribut tambahan selain parameter yang dideklarasikan komponen. Atribut tambahan dapat ditangkap dalam kamus dan kemudian di-splatting ke elemen saat komponen dirender menggunakan atribut arahan @attributesRazor. Skenario ini berguna untuk menentukan komponen yang menghasilkan elemen markup yang mendukung berbagai kustomisasi. Misalnya, mungkin menjemukan jika harus mendefinisikan atribut secara terpisah untuk <input> yang mendukung banyak parameter.

Percikan atribut

Dalam komponen Splat berikut:

• Elemen <input> pertama (id="useIndividualParams") menggunakan parameter 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" }
        };
}

Elemen <input> yang dirender di halaman web 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">

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 di-splatting pada elemen, atribut diproses dari kanan ke kiri (terakhir ke pertama). Pertimbangkan contoh berikut dari komponen induk yang menggunakan komponen turunan:

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 komponen AttributeOrderChild1 diatur ke sebelah kanan @attributes. <div> yang dirender dari komponen AttributeOrderParent1 berisi extra="5" saat diteruskan melalui atribut tambahan karena atribut diproses dari kanan ke kiri (terakhir ke pertama):

<div extra="5" />

Dalam contoh berikut, urutan extra dan @attributes dibalik dalam <div> komponen turunan:

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>

<div> di halaman web yang dirender komponen induk berisi extra="10" saat diteruskan melalui atribut tambahan:

<div extra="10" />