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

Bileşenler, bileşenin bildirilen parametrelerine ve alanlarına ek öznitelikler yakalayıp 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 veya alanı destekleyen bir <input> için öznitelikleri ayrı olarak tanımlamak yorucu olabilir.

Öznitelik sıçraması

Aşağıdaki Splat bileşeninde:

• İlk <input> öğe (id="useIndividualParams") tek tek bileşen alanlarını 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" }
        };
}

iddışında, web sayfasındaki işlenen <input> öğeler aynı özniteliklere sahiptir:

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

Yukarıdaki örnekte ilk <input> öğeid="useIndividualParams" () için alanlar kullanılıyor olsa da, bileşen parametreleri kullanıldığında aynı davranış uygulanır.

Rastgele öznitelikler

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

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

CaptureUnmatchedValues için [Parameter] ö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. @attributes İşlenen öğeye uygulandığında, öznitelikler sağdan sola (sondan ilk) olacak şekilde işlenir ve ortak öznitelikler söz konusu olduğunda ilk öznitelik öncelikli olur. Alt bileşeni kullanan ve alt bileşenin bir "extra" özniteliği ayarladığı ve üst bileşenin alt bileşene "extra" özniteliğini sıçrattığı aşağıdaki ü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. Ek özniteliklerden geçirilirken bileşenin işlenen AttributeOrderParent1'i <div> içerir çünkü öznitelikler sağdan sola (sondan başa) işlenir ve ilk "extra="5"" özniteliği kazanır, bu da bileşenin sabit kodlanmış extra HTML özniteliğidir extra.

<div extra="5" />

Aşağıdaki örnekte, extra ve @attributes'in sırası alt bileşenin <div> içinde tersine çevrilmiştir. Bu senaryoda, AttributeOrderParent2 bileşeninin işlenen <div> öğesi, ek öznitelik üzerinden geçirildiğinde extra="10" içerir çünkü işlenen ilk "extra" özniteliği, üst bileşenden gelen sıçramış extra HTML özniteliğidir.

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>

Ebeveyn bileşenin işlenen web sayfası <div> ögesini içerirextra="10".

<div extra="10" />