Динамически отображаемые компоненты ASP.NET Core Razor

Автор: Дейв Брок (Dave Brock)

Используйте встроенный компонент DynamicComponent для отображения компонентов по типу.

Динамические компоненты

DynamicComponent может использоваться для отображения компонентов без перебора возможных типов или использования условной логики. Например, DynamicComponent может отображать компонент на основе пользовательского выбора из раскрывающегося списка.

В следующем примере :

• componentType указывает тип.
• parameters указывает дополнительные параметры компонента, передаваемые в компонент componentType.

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

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

Дополнительные сведения о передаче значений параметров см. в разделе Передача параметров далее в этой статье.

Пример

В следующем примере компонент Razor отображает компонент на основе выбора пользователя из раскрывающегося списка с четырьмя возможными значениями.

Выбор компании, занимающейся космическими перевозками, для пользователя	Общий компонент Razor для отображения
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;
        }
    }
}

В предыдущем примере:

• Используется Dictionary<TKey,TValue> для управления компонентами для отображения.
• Имена служат ключами словаря и предоставляются в качестве параметров выбора.
• Типы компонентов хранятся в виде значений typeof словаря с помощью оператора.

Передача параметров

Если у динамически отображаемых компонентов есть параметры компонента, передайте их в DynamicComponent как IDictionary<string, object>. string — это имя параметра, а object — значение параметра.

В следующем примере объект метаданных компонента (ComponentMetadata) настраивается для передачи значений параметров динамически отображаемым компонентам на основе имени типа. В этом примере показан лишь один из подходов, которые можно использовать. Данные параметров также могут быть получены из веб-API, из базы данных или из метода. Единственное требование заключается в том, чтобы подход возвращал 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; } = [];
}

Следующий компонент RocketLabWithWindowSeat (RocketLabWithWindowSeat.razor) был обновлен из предыдущего примера так, чтобы включать параметр компонента с именем WindowSeat для указания того, предпочитает ли пассажир в своем полете место у иллюминатора.

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

В следующем примере :

• Значение флажка Window Seat получает только параметр компонента RocketLabWithWindowSeat для места у иллюминатора (WindowSeat).
• Имена компонентов используются в качестве ключей словаря с помощью nameof оператора, который возвращает имена компонентов в виде константных строк.
• Динамически отрисованные компоненты являются общими компонентами:
  • Они показаны в этом разделе статьи: RocketLabWithWindowSeat (RocketLabWithWindowSeat.razor)
  • Компоненты, показанные в разделе "Пример " ранее в этой статье:
    • 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;
        }
    }
}

Обратные вызовы событий (EventCallback)

Обратные вызовы событий (EventCallback) можно передать в DynamicComponent в словаре параметров.

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

Реализуйте параметр обратного вызова события (EventCallback) в каждом динамически выводимом компоненте.

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

В следующем примере родительского компонента метод ShowDTMessage назначает строку с текущим временем объекту message и выводится значение message.

Родительский компонент передает метод обратного вызова ShowDTMessage в словаре параметров:

• Ключ string — это имя метода обратного вызова (OnClickCallback).
• Значение object создается методом EventCallbackFactory.Create для родительского метода обратного вызова (ShowDTMessage). Обратите внимание, что ключевое this слово не поддерживается в инициализации полей C#, поэтому свойство C# используется для словаря параметров.

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

Избегайте использования параметров catch-all

Избегайте использования параметров catch-all. Если используются параметры catch-all, то каждый явный параметр в DynamicComponent по сути является зарезервированным словом, которое не может быть передано динамическому дочернему элементу. Все новые параметры, передаваемые в DynamicComponent, приводят к критическому изменению, так как они начинают затенять параметры дочернего компонента, имеющие то же имя. Вызывающие объекты не могут иметь информацию о фиксированных наборах имен параметров, передаваемых всем возможным динамическим дочерним объектам.

Доступ к экземпляру компонента динамического создания

Instance Используйте свойство для доступа к экземпляру компонента динамического создания.

Создайте интерфейс для описания динамически созданного экземпляра компонента с любыми методами и свойствами, к которым необходимо получить доступ из родительского компонента при динамической загрузке компонента. В следующем примере указывается Log метод реализации в компонентах.

Interfaces/ILoggable.cs:

using Microsoft.AspNetCore.Components;

namespace BlazorSample.Interfaces;

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

Каждое определение компонента реализует интерфейс. В следующем примере представлен измененный компонент Rocket Lab® из раздела Example, который регистрирует строку с помощью метода 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!");
}

Остальные три общих компонента (VirginGalactic3, UnitedLaunchAlliance3, SpaceX3) получают аналогичное лечение:

• Следующие директивы добавляются в компоненты, где {COMPONENT TYPE} заполнитель является типом компонента:

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

• Каждый компонент реализует Log метод. Категория журнала, написанная средством ведения журнала, включает полное имя типа компонента при LogInformation вызове:

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

Родительский компонент вызывает динамически загруженный экземпляр компонента в качестве ILoggable доступа к членам интерфейса. В следующем примере метод загруженного компонента Log вызывается при выборе кнопки в пользовательском интерфейсе:

...
@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();
}

Рабочую демонстрацию предыдущего примера см DynamicComponent4 . в Blazor примере приложения.

Товарные знаки

Rocket Lab является зарегистрированной торговой маркой Rocket Lab USA Inc. SpaceX является зарегистрированной торговой маркой Space Exploration Technologies Corp. United Launch Alliance и ULA являются зарегистрированными торговыми марками United Launch Alliance, LLC. Virgin Galactic является зарегистрированной торговой маркой Galactic Enterprises, LLC.

Дополнительные ресурсы

• Обработка событий Blazor в ASP.NET Core
• DynamicComponent