ASP.NET Core Blazor özniteliğinin sıçraması ve rastgele parametreler

Bileşenler, bileşenin bildirilen parametrelerinin yanı sıra ek öznitelikleri de yakalayabilir ve işleyebilir. Ek öznitelikler bir sözlükte yakalanabilir ve bileşen yönerge özniteliği kullanılarak işlendiğinde, splatting adlı bir öğeye @attributesRazor uygulanabilir. Bu senaryo çeşitli özelleştirmelerin desteklendiği bir işaretleme öğesi oluşturan bileşenleri tanımlamak için kullanışlı bir senaryodur. Örneğin birçok parametreyi destekleyen bir <input> için öznitelikleri ayrı ayrı tanımlamak yorucu olabilir.

Öznitelik sıçraması

Aşağıdaki Splat bileşeninde:

• İlk <input> öğesi (id="useIndividualParams") tek tek bileşen parametrelerini kullanır.
• İkinci <input> öğesi (id="useAttributesDict") öznitelikleri topluca geçirmeyi kullanır.

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

Web sayfasındaki işlenmiş <input> öğeleri aynıdır:

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

Rastgele öznitelikler

Rastgele öznitelikleri kabul etmek için CaptureUnmatchedValues özelliği true olarak ayarlanmış bir bileşen parametresi tanımlayın:

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

[Parameter] için CaptureUnmatchedValues özelliği, parametrenin diğer hiçbir parametreyle eşleşmeyen tüm öznitelikleri eşleştirmesine olanak tanır. Bir bileşen CaptureUnmatchedValues özelliğine sahip tek bir parametre tanımlayabilir. CaptureUnmatchedValues ile kullanılan özellik türü Dictionary<string, object> sınıfından dize anahtarlarıyla atanabilmelidir. Bu senaryoda IEnumerable<KeyValuePair<string, object>> veya IReadOnlyDictionary<string, object> seçenekleri de kullanılabilir.

@attributes öğesinin öğe özniteliklerine göre konumu önemlidir. Öğede @attributes topluca geçirildiğinde öznitelikler sağdan sola (sondan başa doğru) işlenir. Aşağıdaki bir alt bileşen kullanan üst bileşen örneğini düşünün:

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>

AttributeOrderChild1 bileşeninin extra özniteliği @attributes öğesinin sağ tarafında ayarlanmıştır. AttributeOrderParent1 bileşeninin işlenen <div> öğesi, ek öznitelikten geçirildiğinde extra="5" özniteliğini içerir çünkü öznitelikler sağdan sola (sondan başa doğru) işlenir:

<div extra="5" />

Aşağıdaki örnekte, alt bileşenin <div> öğesinde extra ile @attributes öğelerinin sırası tersine çevrilmiştir:

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>

Üst bileşenin işlenen web sayfasındaki <div>, ek öznitelikten geçirildiğinde extra="10" içerir:

<div extra="10" />