ASP.NET Core Blazor attribútumszórás és tetszőleges paraméterek

Az összetevők az összetevő deklarált paraméterei és mezői mellett további attribútumokat is rögzíthetnek és renderelhetnek. A további attribútumok rögzíthetők egy szótárban, majd alkalmazhatók egy splatting nevű elemre, amikor az összetevőt az @attributesRazor irányelv attribútum használatával renderelik. Ez a forgatókönyv hasznos egy olyan összetevő definiálásához, amely számos testreszabást támogató korrektúraelemet hoz létre. Nehéz lehet például külön definiálni az attribútumokat egy <input> olyanhoz, amely számos paramétert vagy mezőt támogat.

Attribútumszórás

Az alábbi Splat összetevőben:

• Az első <input> elem (id="useIndividualParams") egyéni összetevőmezőket használ.
• A második <input> elem (id="useAttributesDict") attribútumfröccsentést használ.

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

A weblap renderelt id elemei azonban <input>azonos attribútumokkal rendelkeznek:

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

Bár az előző példa az első <input> elem (id="useIndividualParams") mezőit használja, ugyanez a viselkedés érvényes az összetevőparaméterek használatakor.

Tetszőleges attribútumok

Tetszőleges attribútumok elfogadásához adjon meg egy összetevőparamétert a CaptureUnmatchedValues következő tulajdonsággal true:

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

A CaptureUnmatchedValues tulajdonság a [Parameter] lehetővé teszi, hogy a paraméter megfeleljen az összes olyan attribútumnak, amely nem felel meg egyik másik paraméternek sem. Az összetevők csak egyetlen paramétert definiálhatnak a CaptureUnmatchedValues. A CaptureUnmatchedValues típusú tulajdonságnak kompatibilisnek kell lennie a sztringkulcsokkal rendelkező Dictionary<string, object> típussal. A IEnumerable<KeyValuePair<string, object>> vagy a IReadOnlyDictionary<string, object> használata is lehetséges ebben a forgatókönyvben.

Az elemattribútumok helyzetéhez viszonyított pozíció @attributes fontos. Amikor @attributes a renderelt elemre van szórva, az attribútumok feldolgozása jobbról balra (utolsótól az elsőig) történik, és az első attribútum nyer a közös attribútumok esetében. Vegyük például azt a szülőösszetevőt, amely egy gyermekösszetevőt használ, ahol a gyermek beállít egy "extra" attribútumot, és a szülőösszetevő egy "extra" attribútumot helyez el a gyermekösszetevő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>

Az AttributeOrderChild1 összetevő attribútuma extra a jobb oldalon @attributesvan beállítva. Az AttributeOrderParent1 összetevő által renderelt <div> tartalmazza extra="5", amikor a további attribútum átkerül, mert az attribútumok feldolgozása jobbról balra történik (a legutolsótól az elsőig), és az első "extra" attribútum érvényesül, amely az extra HTML-attribútuma az AttributeOrderParent1 összetevőnek.

<div extra="5" />

Az alábbi példában a extra és @attributes sorrendje meg van fordítva a gyermekösszetevő <div>-jében. Ebben a forgatókönyvben az AttributeOrderParent2 összetevő renderelt <div> tartalma akkor jelenik extra="10" meg, ha a további attribútumon halad át, mert az első feldolgozott "extra" attribútum a szülőösszetevőből származó splatted extra HTML attribútum.

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>

A <div> szülőösszetevő renderelt weblapja a következőket tartalmazza extra="10":

<div extra="10" />