Parámetros arbitrarios y de expansión de atributos de ASP.NET Core Blazor

Los componentes pueden capturar y representar atributos adicionales además de los parámetros y campos declarados del componente. Los atributos adicionales se pueden capturar en un diccionario y luego expandirse en un elemento cuando el componente se representa por medio del atributo de directiva de @attributesRazor. Este escenario es útil para definir un componente que genera un elemento de marcado que admite diversas personalizaciones. Por ejemplo, puede ser tedioso definir atributos por separado para un <input> que admita muchos parámetros o campos.

Expansión de atributos

En el componente Splat siguiente:

• El primer <input> elemento (id="useIndividualParams") usa campos de componente individuales.
• El segundo elemento <input> (id="useAttributesDict") usa la expansión de atributos.

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

Excepto para id, los elementos representados <input> en la página web tienen atributos idénticos:

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

Aunque en el ejemplo anterior se usan campos para el primer <input> elemento (id="useIndividualParams"), el mismo comportamiento se aplica cuando se usan parámetros de componente.

Atributos arbitrarios

Para aceptar atributos arbitrarios, defina un parámetro de componente con la propiedad CaptureUnmatchedValues establecida en true:

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

La propiedad CaptureUnmatchedValues en [Parameter] permite que el parámetro coincida con todos los atributos que no coinciden con ningún otro parámetro. Un componente solamente puede definir un parámetro con CaptureUnmatchedValues. El tipo de propiedad que se usa con CaptureUnmatchedValues se debe poder asignar desde Dictionary<string, object> con claves de cadena. El uso de IEnumerable<KeyValuePair<string, object>> o IReadOnlyDictionary<string, object> también son opciones en este escenario.

La posición de @attributes relativa a la posición de los atributos de elemento es importante. Cuando @attributes se aplican al elemento renderizado, los atributos se procesan de derecha a izquierda (último a primero), siendo el primer atributo el que prevalece en caso de atributos comunes. Tenga en cuenta el ejemplo siguiente de un componente primario que utiliza un componente secundario, donde el componente secundario establece un atributo "extra" y el componente primario aplica un atributo "extra" en el componente secundario.

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>

El atributo AttributeOrderChild1 del componente de extra se establece a la derecha de @attributes. El componente AttributeOrderParent1 representado <div> contiene extra="5" cuando se pasa a través del atributo adicional porque los atributos se procesan de derecha a izquierda, del último al primero, y el primer atributo "extra" que coincide es el que prevalece, que es el atributo HTML extra codificado de forma rígida del componente AttributeOrderParent1:

<div extra="5" />

En el ejemplo siguiente, el orden de extra y @attributes se invierte en el elemento <div> del componente secundario. En este escenario, el AttributeOrderParent2 componente renderizado <div> contiene extra="10" cuando se pasa a través del atributo adicional, porque el primer atributo "extra" procesado es el atributo HTML desglosado extra del componente primario.

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>

La página web <div> renderizada del componente principal contiene extra="10":

<div extra="10" />