Componentes do Razor do ASP.NET Core renderizados dinamicamente

Por Dave Brock

Use o componente DynamicComponent interno para renderizar componentes por tipo.

Componentes dinâmicos

Um DynamicComponent é útil para renderizar componentes sem iterar por meio de tipos possíveis ou usar lógica condicional. Por exemplo, DynamicComponent pode renderizar um componente com base em uma seleção de usuário de uma lista suspensa.

No exemplo a seguir:

• componentType especifica o tipo.
• parameters especifica os parâmetros de componente a serem passados para o componente componentType.

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

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

Para saber mais sobre como passar valores de parâmetro, confira a seção Parâmetros de passagem mais adiante neste artigo.

Exemplo

No exemplo a seguir, um componente Razor renderiza um componente com base na seleção do usuário de uma lista suspensa de quatro valores possíveis.

Seleção da operadora de voo espacial do usuário	Componente do Razor compartilhado a ser renderizado
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;
        }
    }
}

No exemplo anterior:

• Um Dictionary<TKey,TValue> é usado para gerenciar componentes a serem exibidos.
• Os nomes servem como chaves de dicionário e são fornecidos como opções de seleção.
• Os tipos de componente são armazenados como valores de dicionário usando o operador typeof.

Passar parâmetros

Se os componentes renderizados dinamicamente tiverem parâmetros de componente, passe-os para o DynamicComponent como um IDictionary<string, object>. string é o nome do parâmetro e object é o valor do parâmetro.

O exemplo a seguir configura um objeto de metadados de componente (ComponentMetadata) para fornecer valores de parâmetro para componentes renderizados dinamicamente com base no nome do tipo. O exemplo é apenas uma das várias abordagens que você pode adotar. Os dados de parâmetro também podem ser fornecidos de uma API Web, um banco de dados ou um método. O único requisito é que a abordagem retorne um 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; } = [];
}

O componente RocketLabWithWindowSeat a seguir (RocketLabWithWindowSeat.razor) foi atualizado do exemplo anterior para incluir um parâmetro de componente chamado WindowSeat a fim de especificar se o passageiro prefere um assento de janela em seu voo:

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

No exemplo a seguir:

• Somente o parâmetro do componente RocketLabWithWindowSeat para um assento de janela (WindowSeat) recebe o valor da caixa de seleção Window Seat.
• Os nomes dos componentes são usados como chaves de dicionário usando o operador nameof, que retorna nomes de componente como cadeias de caracteres constantes.
• Os componentes renderizados dinamicamente são componentes compartilhados:
  • Mostrado nesta seção do artigo: RocketLabWithWindowSeat (RocketLabWithWindowSeat.razor)
  • Componentes mostrados na seção Exemplo anteriormente neste artigo:
    • 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;
        }
    }
}

Retornos de chamada de evento (EventCallback)

Os retornos de chamada de evento (EventCallback) podem ser passados para um DynamicComponent em seu dicionário 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 um parâmetro de retorno de chamada de evento (EventCallback) em cada componente renderizado dinamicamente.

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

No exemplo de componente pai a seguir, o método ShowDTMessage atribui uma cadeia de caracteres com a hora atual a message e o valor de message é renderizado.

O componente pai passa o método de retorno de chamada, ShowDTMessage no dicionário de parâmetros:

• A chave string é o nome do método de retorno de chamada, OnClickCallback.
• O valor de object é criado pelo EventCallbackFactory.Create para o método de retorno de chamada pai, ShowDTMessage. Observe que a palavra-chave this não tem suporte na inicialização de campo C#, portanto, uma propriedade C# é usada para o dicionário 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}.";
}

Evitar parâmetros catch-all

Evite o uso de parâmetros catch-all. Se parâmetros catch-all forem usados, cada parâmetro explícito em DynamicComponent efetivamente será uma palavra reservada que você não pode passar para um filho dinâmico. Todos os novos parâmetros passados para DynamicComponent são uma alteração interruptiva, pois começam a sombrear parâmetros de componente filho que têm o mesmo nome. É improvável que o chamador sempre conheça um conjunto fixo de nomes de parâmetros para passar para todos os filhos dinâmicos possíveis.

Acesse a instância de componente criada dinamicamente

Use a propriedade Instance para acessar a instância de componente criada dinamicamente.

Crie uma interface para descrever a instância do componente criada dinamicamente com todos os métodos e propriedades que você precisa acessar pelo componente pai quando o componente é carregado de forma dinâmica. O exemplo a seguir especifica um Log método para implementação em componentes.

Interfaces/ILoggable.cs:

using Microsoft.AspNetCore.Components;

namespace BlazorSample.Interfaces;

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

Cada definição do componente implementa a interface. O exemplo a seguir é um componente modificado do Rocket Lab® da seção Exemplo que registra uma cadeia de caracteres por meio de seu 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!");
}

Os três componentes compartilhados restantes (VirginGalactic3, UnitedLaunchAlliance3, SpaceX3) recebem tratamento semelhante:

• As seguintes diretivas são adicionadas aos componentes, em que o espaço reservado {COMPONENT TYPE} é o tipo de componente:

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

• Cada componente implementa um método Log. A categoria de log gravada pelo agente inclui o nome totalmente qualificado do tipo de componente quando LogInformation é chamado:

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

O componente pai converte a instância do componente carregado dinamicamente como um ILoggable para acessar membros da interface. No exemplo a seguir, o método Log do componente carregado é chamado quando um botão é selecionado na interface do usuário:

...
@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 ver uma demonstração funcional do exemplo anterior, consulte o componente DynamicComponent4 no aplicativo de exemplo Blazor.

Marcas comerciais

Rocket Lab é uma marca registrada da Rocket Lab USA Inc. SpaceX é uma marca registrada da Space Exploration Technologies Corp. United Launch Alliance e ULA são marcas registradas da United Launch Alliance, LLC. Virgin Galactic é uma marca registrada da Galactic Enterprises, LLC.

Recursos adicionais

• Manipulação de eventos do ASP.NET CoreBlazor
• DynamicComponent