ASP.NET Parameter percikan atribut core Blazor dan arbitrer
Catatan
Ini bukan versi terbaru dari artikel ini. Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.
Peringatan
Versi ASP.NET Core ini tidak lagi didukung. Untuk informasi selengkapnya, lihat Kebijakan Dukungan .NET dan .NET Core. Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.
Penting
Informasi ini berkaitan dengan produk pra-rilis yang mungkin dimodifikasi secara substansial sebelum dirilis secara komersial. Microsoft tidak memberikan jaminan, tersirat maupun tersurat, sehubungan dengan informasi yang diberikan di sini.
Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.
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 @attributes
Razor. 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" }
};
}
@page "/splat"
<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" }
};
}
@page "/splat"
<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" }
};
}
@page "/splat"
<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" }
};
}
@page "/splat"
<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 Dictionary<string, object>()
{
{ "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; }
}
<div @attributes="AdditionalAttributes" extra="5" />
@code {
[Parameter(CaptureUnmatchedValues = true)]
public IDictionary<string, object>? AdditionalAttributes { get; set; }
}
<div @attributes="AdditionalAttributes" extra="5" />
@code {
[Parameter(CaptureUnmatchedValues = true)]
public IDictionary<string, object>? AdditionalAttributes { get; set; }
}
<div @attributes="AdditionalAttributes" extra="5" />
@code {
[Parameter(CaptureUnmatchedValues = true)]
public IDictionary<string, object> AdditionalAttributes { get; set; }
}
<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>
AttributeOrderParent1.razor
:
@page "/attribute-order-parent-1"
<AttributeOrderChild1 extra="10" />
AttributeOrderParent1.razor
:
@page "/attribute-order-parent-1"
<AttributeOrderChild1 extra="10" />
AttributeOrderParent1.razor
:
@page "/attribute-order-parent-1"
<AttributeOrderChild1 extra="10" />
AttributeOrderParent1.razor
:
@page "/attribute-order-parent-1"
<AttributeOrderChild1 extra="10" />
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; }
}
<div extra="5" @attributes="AdditionalAttributes" />
@code {
[Parameter(CaptureUnmatchedValues = true)]
public IDictionary<string, object>? AdditionalAttributes { get; set; }
}
<div extra="5" @attributes="AdditionalAttributes" />
@code {
[Parameter(CaptureUnmatchedValues = true)]
public IDictionary<string, object>? AdditionalAttributes { get; set; }
}
<div extra="5" @attributes="AdditionalAttributes" />
@code {
[Parameter(CaptureUnmatchedValues = true)]
public IDictionary<string, object> AdditionalAttributes { get; set; }
}
<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>
AttributeOrderParent2.razor
:
@page "/attribute-order-parent-2"
<AttributeOrderChild2 extra="10" />
AttributeOrderParent2.razor
:
@page "/attribute-order-parent-2"
<AttributeOrderChild2 extra="10" />
AttributeOrderParent2.razor
:
@page "/attribute-order-parent-2"
<AttributeOrderChild2 extra="10" />
AttributeOrderParent2.razor
:
@page "/attribute-order-parent-2"
<AttributeOrderChild2 extra="10" />
<div>
di halaman web yang dirender komponen induk berisi extra="10"
saat diteruskan melalui atribut tambahan:
<div extra="10" />
ASP.NET Core