ASP.NET Core Blazor – Attributsplatting und arbiträre Parameter

Komponenten können zusätzlich zu den deklarierten Parametern der Komponente weitere Attribute erfassen und rendern. Zusätzliche Attribute können in einem Wörterbuch erfasst und dann für ein Element gesplattet werden, wenn die Komponente mithilfe des Razor-Anweisungsattributs @attributes gerendert wird. Diese Option ist nützlich, um eine Komponente zu definieren, die ein Markupelement erzeugt, das viele verschiedene Anpassungen unterstützt. Beispielsweise kann es mühsam sein, Attribute für ein <input>-Element separat zu definieren, das viele Parameter unterstützt.

Attributsplatting

In der folgenden Splat-Komponente:

• Das erste <input>-Element (id="useIndividualParams") verwendet einzelne Komponentenparameter.
• Das zweite <input>-Element (id="useAttributesDict") verwendet Attributsplatting.

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

Die gerenderten <input>-Elemente auf der Webseite sind identisch:

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

Beliebige Attribute

Definieren Sie einen Komponentenparameter, bei dem die CaptureUnmatchedValues-Eigenschaft auf true festgelegt ist, damit beliebige Attribute akzeptiert werden:

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

Wenn die CaptureUnmatchedValues-Eigenschaft auf [Parameter] festgelegt ist, kann der Parameter alle Attribute abgleichen, die keinem anderen Parameter entsprechen. Eine Komponente kann nur einen einzelnen Parameter mit CaptureUnmatchedValues definieren. Der mit CaptureUnmatchedValues verwendete Eigenschaftentyp muss von Dictionary<string, object> mit Zeichenfolgenschlüsseln zugewiesen werden können. Die Verwendung von IEnumerable<KeyValuePair<string, object>> oder IReadOnlyDictionary<string, object> ist in diesem Szenario ebenfalls möglich.

Die Position von @attributes relativ zur Position der Elementattribute ist wichtig. Wenn @attributes-Anweisungen für das Element gesplattet werden, werden die Attribute von rechts nach links (letztes bis erstes) verarbeitet. Sehen Sie sich das folgende Beispiel für eine übergeordnete Komponente an, die eine untergeordnete Komponente verwendet:

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>

Das extra-Attribut der AttributeOrderChild1-Komponente ist rechts von @attributes festgelegt. Das gerenderte <div>-Element der AttributeOrderParent1-Komponente enthält extra="5", wenn dieses über das zusätzliche Attribut weitergeleitet wird, da die Attribute von rechts nach links (letztes bis erstes) verarbeitet werden:

<div extra="5" />

Im folgenden Beispiel wird die Reihenfolge von extra und @attributes im <div>-Element der untergeordneten Komponente umgekehrt:

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>

Das <div>-Element auf der gerenderten Webseite der übergeordneten Komponente enthält extra="10", wenn es über das zusätzliche Attribut übergeben wird:

<div extra="10" />