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

Komponenten können zusätzlich zu den deklarierten Parametern und Feldern der Komponente zusätzliche Attribute erfassen und rendern. Zusätzliche Attribute können in einem Wörterbuch gesammelt und dann auf ein Element angewendet werden, genannt splatting, wenn die Komponente mit dem @attributesRazor Anweisungsattribut 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 separat für ein <input> Attribut zu definieren, das viele Parameter oder Felder unterstützt.

Attributsplatting

In der folgenden Splat-Komponente:

• Das erste <input> Element (id="useIndividualParams") verwendet einzelne Komponentenfelder.
• 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" }
        };
}

Mit Ausnahme von id, haben die gerenderten <input> Elemente auf der Webseite identische Attribute:

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

Obwohl im vorherigen Beispiel Felder für das erste <input> Element (id="useIndividualParams") verwendet werden, gilt das gleiche Verhalten, wenn Komponentenparameter verwendet werden.

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 auf das gerenderte Element gesplattet wird, werden die Attribute von rechts nach links (von zuletzt bis zuerst) verarbeitet, wobei das erste Attribut bei allen gemeinsamen Attributen Vorrang hat. Betrachten Sie das folgende Beispiel einer übergeordneten Komponente, die ein untergeordnetes Element verbraucht, wobei das untergeordnete Element ein „extra“-Attribut setzt und die übergeordnete Komponente ein „extra“-Attribut auf das untergeordnete Element splattet.

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 AttributeOrderChild1-Attribut der extra-Komponente ist rechts von @attributes festgelegt. Die gerenderte AttributeOrderParent1-Komponente enthält <div> im gerenderten extra="5", wenn sie durch das zusätzliche Attribut übergeben wird, da die Attribute von rechts nach links (zuletzt bis zuerst) verarbeitet werden, wobei das erste „extra“-Attribut gewinnt, welches das hartcodierte extra HTML-Attribut der AttributeOrderParent1-Komponente ist:

<div extra="5" />

Im folgenden Beispiel wird die Reihenfolge von extra und @attributes in der untergeordneten Komponente <div> umgekehrt. In diesem Szenario enthält die gerenderte AttributeOrderParent2-Komponente von <div>extra="10", wenn sie durch das zusätzliche Attribut übergeben wird, da das erste verarbeitete "extra"-Attribut das gesplattete extra HTML-Attribut von der übergeordneten Komponente ist.

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> auf der Webseite der gerenderten übergeordneten Komponente enthält extra="10":

<div extra="10" />