Componentes Razor de ASP.NET Core representados dinámicamente

De Dave Brock

Usa 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, consulta la sección Paso de parámetros más adelante en este artículo.

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ásalos 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; } = [];
}

Implementa 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. Ten en cuenta que la palabra clave this no se admite en la inicialización de campos 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

Evita 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.

Acceso a la instancia del componente creada dinámicamente

Usa la propiedad Instance para acceder a la instancia del componente creada dinámicamente.

Crea una interfaz para describir la instancia de componente creada dinámicamente con los métodos y propiedades a los que necesitas acceder desde el componente primario cuando el componente se carga dinámicamente. En el ejemplo siguiente se especifica un método Log para la implementación en componentes.

Interfaces/ILoggable.cs:

using Microsoft.AspNetCore.Components;

namespace BlazorSample.Interfaces;

public interface ILoggable : IComponent
{
    public void Log();
}

Cada definición de componente implementa la interfaz. El ejemplo siguiente es un componente de Rocket Lab® modificado de la sección Ejemplo que registra una cadena a través de su método Log.

RocketLab3.razor:

@using BlazorSample.Interfaces
@implements ILoggable
@inject ILogger<RocketLab3> Logger
    
<h2>Rocket Lab®</h2>

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

@code {
    public void Log() => Logger.LogInformation("Woot! I logged this call!");
}

Los tres componentes compartidos restantes (VirginGalactic3, UnitedLaunchAlliance3, SpaceX3) reciben un tratamiento similar:

• Las siguientes directivas se agregan a los componentes, donde el marcador de posición {COMPONENT TYPE} es el tipo de componente:

  @using BlazorSample.Interfaces
  @implements ILoggable
  @inject ILogger<{COMPONENT TYPE}> Logger
  

• Cada componente implementa un método Log. La categoría de registro escrita por el registrador incluye el nombre completo del tipo de componente cuando se llama a LogInformation:

  @code {
      public void Log()
      {
          Logger.LogInformation("Woot! I logged this call!");
      }
  }
  

El componente primario convierte la instancia de componente cargada dinámicamente como ILoggable para acceder a los miembros de la interfaz. En el ejemplo siguiente, se llama al método Log del componente cargado cuando se selecciona un botón en la interfaz de usuario:

...
@using BlazorSample.Interfaces

...

<DynamicComponent Type="..." @ref="dc" />

...

<button @onclick="LogFromLoadedComponent">Log from loaded component</button>

@code {
    private DynamicComponent? dc;

    ...

    private void LogFromLoadedComponent() => (dc?.Instance as ILoggable)?.Log();
}

Para obtener una demostración en funcionamiento del ejemplo anterior, consulta el componente DynamicComponent4 de la aplicación Blazor de ejemplo.

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