ASP.NET Core Blazor kenmerk splatting en willekeurige parameters

Onderdelen kunnen naast de gedeclareerde parameters en velden van het onderdeel aanvullende kenmerken vastleggen en weergeven. Aanvullende kenmerken kunnen worden vastgelegd in een woordenlijst en vervolgens worden toegepast op een element, splatting genoemd, wanneer het onderdeel wordt weergegeven met behulp van het @attributesRazor instructiekenmerk. Dit scenario is handig voor het definiëren van een onderdeel dat een opmaakelement produceert dat verschillende aanpassingen ondersteunt. Het kan bijvoorbeeld lastig zijn om kenmerken afzonderlijk te definiëren voor een <input> die veel parameters of velden ondersteunt.

Attribuutverdelen

In de volgende Splat component:

• Het eerste <input> element (id="useIndividualParams") maakt gebruik van afzonderlijke onderdeelvelden.
• Het tweede <input> element (id="useAttributesDict") maakt gebruik van attribuutsverspreiding.

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

Behalve id hebben de weergegeven <input> elementen op de webpagina identieke attributen.

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

Hoewel in het voorgaande voorbeeld velden worden gebruikt voor het eerste <input> element (id="useIndividualParams"), geldt hetzelfde gedrag wanneer onderdeelparameters worden gebruikt.

Willekeurige kenmerken

Als u willekeurige kenmerken wilt accepteren, definieert u een onderdeelparameter met de CaptureUnmatchedValues eigenschap ingesteld op true:

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

Met de eigenschap CaptureUnmatchedValues op [Parameter] kan de parameter overeenkomen met alle kenmerken die niet bij een andere parameter passen. Een onderdeel kan slechts één parameter definiëren met CaptureUnmatchedValues. Het eigenschapstype waarmee CaptureUnmatchedValues wordt gebruikt, moet kunnen worden toegewezen vanuit Dictionary<string, object> tekenreekssleutels. Gebruik van IEnumerable<KeyValuePair<string, object>> of IReadOnlyDictionary<string, object> zijn ook opties in dit scenario.

De positie van @attributes relatief ten opzichte van de positie van attribuutkenmerken is belangrijk. Wanneer @attributes op het weergegeven element wordt toegepast, worden de kenmerken van rechts naar links (laatste tot eerste) verwerkt, waarbij het eerste kenmerk voorrang krijgt bij overlappende kenmerken. Bekijk het volgende voorbeeld van een oudercomponent dat een kindcomponent gebruikt, waarbij het kindcomponent een kenmerk 'extra' instelt en de oudercomponent een kenmerk 'extra' op het kindcomponent plaatst.

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>

Het AttributeOrderChild1 onderdeel heeft zijn extra-kenmerk rechts van @attributes ingesteld. De weergegeven AttributeOrderParent1-component bevat <div> wanneer het wordt doorgegeven via het extra kenmerk, omdat de kenmerken van rechts naar links (van laatste naar eerste) worden verwerkt, waarbij het eerste kenmerk "extra="5"" de voorkeur krijgt. Dit is het in de code vastgelegde extra HTML-kenmerk van de extra-component:AttributeOrderParent1

<div extra="5" />

In het volgende voorbeeld wordt de volgorde van extra en @attributes omgekeerd in het onderliggende <div>-onderdeel. In dit scenario bevat de weergegeven AttributeOrderParent2 van de <div>-component extra="10" wanneer het extra kenmerk wordt doorgegeven, omdat het eerste 'extra'-kenmerk dat wordt verwerkt het gespatte HTML-kenmerk van het bovenliggende extra-onderdeel is.

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>

De weergegeven webpagina van het bovenliggende onderdeel bevat <div> en extra="10".

<div extra="10" />