Componentes Razor de ASP.NET Core representados dinámicamente

De Dave Brock

Use el componente integrado DynamicComponent para representar los componentes por tipo.

Componentes dinámicos

Un elemento DynamicComponent es útil para representar componentes sin iterar por los tipos posibles ni usar lógica condicional. Por ejemplo, DynamicComponent puede representar un componente en función de una selección de usuario de una lista desplegable.

En el ejemplo siguiente:

• componentType especifica el tipo.
• parameters Especifica los parámetros de componente para pasarlos al componente componentType.

<DynamicComponent Type="componentType" Parameters="parameters" />

@code {
    private Type componentType = ...;
    private IDictionary<string, object> parameters = ...;
}

Para obtener más información sobre cómo pasar valores de parámetro, vea la sección Paso de parámetros más adelante en este artículo.

Use la propiedad Instance para acceder a la instancia del componente creada dinámicamente:

<DynamicComponent Type="typeof({COMPONENT})" @ref="dc" />

<button @onclick="Refresh">Refresh</button>

@code {
    private DynamicComponent? dc;

    private Task Refresh()
    {
        return (dc?.Instance as IRefreshable)?.Refresh();
    }
}

En el ejemplo anterior:

• El marcador de posición {COMPONENT} es el tipo de componente creado dinámicamente.
• IRefreshable es una interfaz de ejemplo proporcionada por el desarrollador para la instancia de componente dinámico.

Ejemplo

En el ejemplo siguiente, un componente Razor representa un componente determinado en función de la selección del usuario en una lista desplegable de cuatro valores posibles.

Selección del operador de vuelo espacial de usuario	Componente Razor compartido que representar
Rocket Lab®	RocketLab.razor
SpaceX®	SpaceX.razor
ULA®	UnitedLaunchAlliance.razor
Virgin Galactic®	VirginGalactic.razor

RocketLab.razor:

<h2>Rocket Lab®</h2>

<p>
    Rocket Lab is a registered trademark of 
    <a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>

SpaceX.razor:

<h2>SpaceX®</h2>

<p>
    SpaceX is a registered trademark of 
    <a href="https://www.spacex.com/">Space Exploration Technologies Corp.</a>
</p>

UnitedLaunchAlliance.razor:

<h2>United Launch Alliance®</h2>

<p>
    United Launch Alliance and ULA are registered trademarks of
    <a href="https://www.ulalaunch.com/">United Launch Alliance, LLC</a>.
</p>

VirginGalactic.razor:

<h2>Virgin Galactic®</h2>

<p>
    Virgin Galactic is a registered trademark of 
    <a href="https://www.virgingalactic.com/">Galactic Enterprises, LLC</a>.
</p>

DynamicComponent1.razor:

@page "/dynamic-component-1"

<PageTitle>Dynamic Component 1</PageTitle>

<h1>Dynamic Component Example 1</h1>

<p>
    <label>
        Select your transport:
        <select @onchange="OnDropdownChange">
            <option value="">Select a value</option>
            @foreach (var entry in components.Keys)
            {
                <option value="@entry">@entry</option>
            }
        </select>
    </label>
</p>

@if (selectedType is not null)
{
    <div class="border border-primary my-1 p-1">
        <DynamicComponent Type="selectedType" />
    </div>
}

@code {
    private readonly Dictionary<string, Type> components = new()
    {
        ["Rocket Lab"] = typeof(RocketLab),
        ["SpaceX"] = typeof(SpaceX),
        ["ULA"] = typeof(UnitedLaunchAlliance),
        ["Virgin Galactic"] = typeof(VirginGalactic)
    };
    private Type? selectedType;

    private void OnDropdownChange(ChangeEventArgs e)
    {
        if ((e.Value is string dropdownValue) && !String.IsNullOrWhiteSpace(dropdownValue))
        {
            selectedType = components[dropdownValue];
        }
        else
        {
            selectedType = null;
        }
    }
}

En el ejemplo anterior:

• Se usa un Dictionary<TKey,TValue> para administrar los componentes que se van a mostrar.
• Los nombres sirven como claves de diccionario y se proporcionan como opciones de selección.
• Los tipos de componentes se almacenan como valores de diccionario mediante el operador typeof.

Paso de parámetros

Si los componentes representados dinámicamente tienen parámetros de componente, páselos al elemento DynamicComponent de una instancia de IDictionary<string, object>. string es el nombre del parámetro y object, su valor.

En el ejemplo siguiente se configura un objeto de metadatos de componente (ComponentMetadata) para proporcionar valores de parámetro a los componentes representados dinámicamente en función del nombre de tipo. El ejemplo es solo uno de los distintos enfoques que puede adoptar. Los datos de parámetros también se pueden proporcionar a partir de una API web, una base de datos o un método. El único requisito es que el enfoque devuelva un elemento IDictionary<string, object>.

ComponentMetadata.cs:

namespace BlazorSample;

public class ComponentMetadata
{
    public required Type Type { get; init; }
    public required string Name { get; init; }
    public Dictionary<string, object> Parameters { get; } = [];
}

El siguiente componente RocketLabWithWindowSeat (RocketLabWithWindowSeat.razor) se ha actualizado a partir del ejemplo anterior para incluir un parámetro de componente denominado WindowSeat para especificar si el pasajero prefiere un asiento con ventana en su vuelo:

RocketLabWithWindowSeat.razor:

<h2>Rocket Lab®</h2>

<p>
    User selected a window seat: @WindowSeat
</p>

<p>
    Rocket Lab is a trademark of 
    <a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>

@code {
    [Parameter]
    public bool WindowSeat { get; set; }
}

En el ejemplo siguiente:

• Solo el parámetro RocketLabWithWindowSeat del componente para un asiento con ventana (WindowSeat) recibe el valor de la casilla Window Seat.
• Los nombres de componente se usan como claves de diccionario mediante el operador nameof, que devuelve nombres de componente como cadenas constantes.
• Los componentes representados dinámicamente son componentes compartidos:
  • Se muestra en esta sección del artículo: RocketLabWithWindowSeat (RocketLabWithWindowSeat.razor).
  • Los componentes se muestran en la sección Ejemplo que se ha indicado anteriormente en este artículo:
    • SpaceX (SpaceX.razor)
    • UnitedLaunchAlliance (UnitedLaunchAlliance.razor)
    • VirginGalactic (VirginGalactic.razor)

DynamicComponent2.razor:

@page "/dynamic-component-2"

<PageTitle>Dynamic Component 2</PageTitle>

<h1>Dynamic Component Example 2</h1>

<p>
    <label>
        <input type="checkbox" @bind="windowSeat" @bind:after="HandleWindowSeatChanged" />
        Window Seat (Rocket Lab only)
    </label>
</p>

<p>
    <label>
        Select your transport:
        <select @onchange="OnDropdownChange">
            <option value="">Select a value</option>
            @foreach (var c in components)
            {
                <option value="@c.Key">@c.Value.Name</option>
            }
        </select>
    </label>
</p>

@if (selectedComponent is not null)
{
    <div class="border border-primary my-1 p-1">
        <DynamicComponent Type="selectedComponent.Type"
            Parameters="selectedComponent.Parameters" />
    </div>
}

@code {
    private Dictionary<string, ComponentMetadata> components =
        new()
        {
            [nameof(RocketLabWithWindowSeat)] = new ComponentMetadata()
            {
                Type = typeof(RocketLabWithWindowSeat),
                Name = "Rocket Lab with Window Seat",
                Parameters = { [nameof(RocketLabWithWindowSeat.WindowSeat)] = false }
            },
            [nameof(VirginGalactic)] = new ComponentMetadata()
            {
                Type = typeof(VirginGalactic),
                Name = "Virgin Galactic"
            },
            [nameof(UnitedLaunchAlliance)] = new ComponentMetadata()
            {
                Type = typeof(UnitedLaunchAlliance),
                Name = "ULA"
            },
            [nameof(SpaceX)] = new ComponentMetadata()
            {
                Type = typeof(SpaceX),
                Name = "SpaceX"
            }
        };
    private ComponentMetadata? selectedComponent;
    private bool windowSeat;

    private void HandleWindowSeatChanged()
    {
        components[nameof(RocketLabWithWindowSeat)]
            .Parameters[nameof(RocketLabWithWindowSeat.WindowSeat)] = windowSeat;
    }

    private void OnDropdownChange(ChangeEventArgs e)
    {
        if ((e.Value is string dropdownValue) && !String.IsNullOrWhiteSpace(dropdownValue))
        {
            selectedComponent = components[dropdownValue];
        }
        else
        {
            selectedComponent = null;
        }
    }
}

Devoluciones de llamada de eventos (EventCallback)

Las devoluciones de llamada de eventos (EventCallback) se pueden pasar a DynamicComponent en su diccionario de parámetros.

ComponentMetadata.cs:

namespace BlazorSample;

public class ComponentMetadata
{
    public required Type Type { get; init; }
    public required string Name { get; init; }
    public Dictionary<string, object> Parameters { get; } = [];
}

Implemente un parámetro de devolución de llamada de eventos (EventCallback) dentro de cada componente representado dinámicamente.

RocketLab2.razor:

<h2>Rocket Lab®</h2>

<p>
    Rocket Lab is a registered trademark of
    <a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>

<button @onclick="OnClickCallback">
    Trigger a Parent component method
</button>

@code {
    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}

SpaceX2.razor:

<h2>SpaceX®</h2>

<p>
    SpaceX is a registered trademark of
    <a href="https://www.spacex.com/">Space Exploration Technologies Corp.</a>
</p>

<button @onclick="OnClickCallback">
    Trigger a Parent component method
</button>

@code {
    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}

UnitedLaunchAlliance2.razor:

<h2>United Launch Alliance®</h2>

<p>
    United Launch Alliance and ULA are registered trademarks of
    <a href="https://www.ulalaunch.com/">United Launch Alliance, LLC</a>.
</p>

<button @onclick="OnClickCallback">
    Trigger a Parent component method
</button>

@code {
    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}

VirginGalactic2.razor:

<h2>Virgin Galactic®</h2>

<p>
    Virgin Galactic is a registered trademark of
    <a href="https://www.virgingalactic.com/">Galactic Enterprises, LLC</a>.
</p>

<button @onclick="OnClickCallback">
    Trigger a Parent component method
</button>

@code {
    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}

En el siguiente ejemplo de componente primario, el método ShowDTMessage asigna una cadena con la hora actual a message, y el valor de message se representa.

El componente primario pasa el método de devolución de llamada, ShowDTMessage en el diccionario de parámetros:

• La clave string es el nombre del método de devolución de llamada, OnClickCallback.
• El valor object lo crea EventCallbackFactory.Create para el método de devolución de llamada primario, ShowDTMessage. Tenga en cuenta que la palabra clave this no se admite en inicialización de C#, por lo que se usa una propiedad de C# para el diccionario de parámetros.

DynamicComponent3.razor:

@page "/dynamic-component-3"

<PageTitle>Dynamic Component 3</PageTitle>

<h1>Dynamic Component Example 3</h1>

<p>
    <label>
        Select your transport:
        <select @onchange="OnDropdownChange">
            <option value="">Select a value</option>
            @foreach (var c in Components)
            {
                <option value="@c.Key">@c.Value.Name</option>
            }
        </select>
    </label>
</p>

@if (selectedComponent is not null)
{
    <div class="border border-primary my-1 p-1">
        <DynamicComponent Type="selectedComponent.Type"
            Parameters="selectedComponent.Parameters" />
    </div>
}

<p>
    @message
</p>

@code {
    private ComponentMetadata? selectedComponent;
    private string? message;

    private Dictionary<string, ComponentMetadata> Components =>
        new()
        {
            [nameof(RocketLab2)] = new ComponentMetadata()
            {
                Type = typeof(RocketLab2),
                Name = "Rocket Lab",
                Parameters = { [nameof(RocketLab2.OnClickCallback)] =
                    EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
            },
            [nameof(VirginGalactic2)] = new ComponentMetadata()
            {
                Type = typeof(VirginGalactic2),
                Name = "Virgin Galactic",
                Parameters = { [nameof(VirginGalactic2.OnClickCallback)] =
                    EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
            },
            [nameof(UnitedLaunchAlliance2)] = new ComponentMetadata()
            {
                Type = typeof(UnitedLaunchAlliance2),
                Name = "ULA",
                Parameters = { [nameof(UnitedLaunchAlliance2.OnClickCallback)] =
                    EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
            },
            [nameof(SpaceX2)] = new ComponentMetadata()
            {
                Type = typeof(SpaceX2),
                Name = "SpaceX",
                Parameters = { [nameof(SpaceX2.OnClickCallback)] =
                    EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
            }
        };

    private void OnDropdownChange(ChangeEventArgs e)
    {
        if ((e.Value is string dropdownValue) && !String.IsNullOrWhiteSpace(dropdownValue))
        {
            selectedComponent = Components[dropdownValue];
        }
        else
        {
            selectedComponent = null;
        }
    }

    private void ShowDTMessage(MouseEventArgs e) =>
        message = $"The current DT is: {DateTime.Now}.";
}

Evitación de parámetros comodín

Evite usar parámetros comodín. Si se usan parámetros comodín, todos los parámetros explícitos de DynamicComponent efectivamente son una palabra reservada que no se puede pasar a un elemento secundario. Los nuevos parámetros pasados a DynamicComponent son un cambio importante, ya que empiezan a sombrear los parámetros de componentes secundarios que tienen el mismo nombre. Es poco probable que el autor de la llamada siempre conozca un conjunto fijo de nombres de parámetro para pasar a todos los posibles elementos secundarios dinámicos.

Marcas comerciales

Rocket Lab es una marca comercial registrada de Rocket Lab USA Inc. SpaceX es una marca comercial registrada de Space Exploration Technologies Corp. United Launch Alliance y ULA son marcas comerciales registrada de United Launch Alliance, LLC. Virgin Galactic es una marca comercial registrada de Galactic Enterprises, LLC.

Recursos adicionales

• Control de eventos de Blazor en ASP.NET Core
• DynamicComponent