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 ardından @attributesRazor yönerge özniteliği kullanılarak bileşen işlendiğinde bir öğeye topluca geçirilebilir. 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" />