Dynamisch gerenderte ASP.NET Core-Razor-Komponenten

Von Dave Brock

Verwenden Sie die integrierte DynamicComponent-Komponente, um Komponenten nach Typ zu rendern.

Dynamische Komponenten

Eine DynamicComponent-Komponente ist für das Rendern von Komponenten nützlich, ohne durch mögliche Typen zu iterieren oder Bedingungslogik anzuwenden. Beispielsweise kann DynamicComponent eine Komponente basierend auf einer Benutzerauswahl aus einer Dropdownliste rendern.

Im folgenden Beispiel:

• componentType gibt den Typ an.
• parameters gibt Komponentenparameter an, die an die Komponente componentType übergeben werden.

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

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

Weitere Informationen zum Übergeben von Parameterwerten finden Sie im Abschnitt Übergeben von Parametern weiter unten in diesem Artikel.

Beispiel

Im folgenden Beispiel rendert eine Razor-Komponente eine Komponente basierend auf der Benutzerauswahl aus einer Dropdownliste mit vier möglichen Werten.

Ausgewähltes Raumfahrtunternehmen	Zu rendernde freigegebene Razor-Komponente
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;
        }
    }
}

Im vorherigen Beispiel:

• Ein Dictionary<TKey,TValue> wird verwendet, um anzuzeigende Komponenten zu verwalten.
• Namen dienen als Wörterbuchschlüssel und werden als Auswahloptionen bereitgestellt.
• Komponententypen werden mithilfe des typeof-Operators als Wörterbuchwerte gespeichert.

Übergeben von Parametern

Wenn dynamisch gerenderte Komponenten Komponentenparameter aufweisen, übergeben Sie diese als IDictionary<string, object> an DynamicComponent. Dabei steht string für den Namen und object für den Wert des Parameters.

Im folgenden Beispiel wird ein Komponenten-Metadatenobjekt (ComponentMetadata) dafür konfiguriert, Parameterwerte basierend auf dem Typnamen an dynamisch gerenderte Komponenten zu übergeben. Das Beispiel stellt nur einen von mehreren möglichen Ansätzen dar, die Sie übernehmen können. Parameterdaten können auch über eine Web-API, eine Datenbank oder eine Methode bereitgestellt werden. Die einzige Voraussetzung ist, dass der Ansatz IDictionary<string, object> zurückgibt.

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

Die folgende RocketLabWithWindowSeat-Komponente (RocketLabWithWindowSeat.razor) wurde von dem vorherigen Beispiel aktualisiert und enthält einen Komponentenparameter namens WindowSeat, um anzugeben, ob der Fluggast während des Flugs einen Fensterplatz bevorzugt:

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

Siehe folgendes Beispiel:

• Nur der Parameter der Komponente RocketLabWithWindowSeat für einen Fensterplatz (WindowSeat) empfängt den Wert des Window Seat-Kontrollkästchens.
• Komponentennamen werden als Wörterbuchschlüssel mit dem nameof-Operator verwendet, der Komponentennamen als konstante Zeichenfolgen zurückgibt.
• Die dynamisch gerenderten Komponenten sind freigegebene Komponenten:
  • In diesem Artikelabschnitt: RocketLabWithWindowSeat (RocketLabWithWindowSeat.razor)
  • Komponenten im vorherigen Abschnitt Beispiel dieses Artikels:
    • 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;
        }
    }
}

Ereignisrückrufe (EventCallback)

Ereignisrückrufe (EventCallback) können an ein DynamicComponent in dessen Parameterwörterbuch übergeben werden.

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

Implementieren Sie innerhalb jeder dynamisch gerenderten Komponente einen Ereignisrückrufparameter (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; }
}

Im folgenden Beispiel der übergeordneten Komponente weist die ShowDTMessage-Methode message eine Zeichenfolge mit der aktuellen Uhrzeit zu, und der Wert von message wird gerendert.

Die übergeordnete Komponente übergibt die Rückrufmethode ShowDTMessage an das Parameterwörterbuch:

• Der Schlüssel string ist der Name der Rückrufmethode OnClickCallback.
• Der Wert object wird von EventCallbackFactory.Create für die übergeordnete Rückrufmethode ShowDTMessage erstellt. Beachten Sie, dass das this-Schlüsselwort in der C#-Feldinitialisierung nicht unterstützt wird. Daher wird eine C#-Eigenschaft für das Parameterwörterbuch verwendet.

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

Vermeiden von Catch-All-Parametern

Vermeiden Sie die Verwendung von Catch-All-Parametern. Wenn Catch-All-Parameter verwendet werden, ist jeder explizite Parameter in DynamicComponent effektiv ein reserviertes Wort, das Sie nicht an ein dynamisches untergeordnetes Element übergeben können. Alle neuen Parameter, die an DynamicComponent übergeben werden, werden zum Breaking Change, da sie untergeordnete Schattenkomponentenparameter mit dem gleichen Namen erstellen. Es ist unwahrscheinlich, dass dem Caller immer feste Parameternamen bekannt sind, die an alle möglichen dynamischen untergeordneten Elemente übergeben werden sollen.

Zugriff auf die dynamisch erstellte Komponenteninstanz

Verwenden Sie die Instance-Eigenschaft, um auf die dynamisch erstellte Komponenteninstanz zuzugreifen.

Erstellen Sie eine Schnittstelle, um die dynamisch erstellte Komponenteninstanz mit allen Methoden und Eigenschaften zu beschreiben, auf die Sie von der übergeordneten Komponente zugreifen müssen, wenn die Komponente dynamisch geladen wird. Das folgende Beispiel spezifiziert eine Log-Methode zur Implementierung in Komponenten.

Interfaces/ILoggable.cs:

using Microsoft.AspNetCore.Components;

namespace BlazorSample.Interfaces;

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

Jede Komponentendefinition implementiert die Schnittstelle. Das folgende Beispiel ist eine modifizierte Rocket Lab®-Komponente aus dem Abschnitt Beispiel, die eine Zeichenfolge über ihre Log-Methode protokolliert.

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

Die übrigen drei gemeinsamen Komponenten (VirginGalactic3, UnitedLaunchAlliance3, SpaceX3) werden ähnlich behandelt:

• Die folgenden Anweisungen werden zu den Komponenten hinzugefügt, wobei der Platzhalter {COMPONENT TYPE} der Komponententyp ist:

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

• Jede Komponente implementiert eine Log-Methode. Die von der Protokollierung geschriebene Protokollkategorie enthält den vollqualifizierten Namen des Komponententyps, wenn LogInformation aufgerufen wird:

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

Die übergeordnete Komponente gibt die dynamisch geladene Komponenteninstanz als ILoggable aus, um auf die Elemente der Schnittstelle zuzugreifen. Im folgenden Beispiel wird die Log-Methode der geladenen Komponente aufgerufen, wenn eine Schaltfläche in der Benutzeroberfläche ausgewählt wird:

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

Eine funktionierende Demonstration des vorherigen Beispiels finden Sie in der DynamicComponent4-Komponente in der Blazor-Beispiel-App.

Marken

Rocket Lab ist eine registrierte Marke von Rocket Lab USA Inc. SpaceX ist eine registrierte Marke von Space Exploration Technologies Corp. United Launch Alliance und ULA sind registrierte Marken von United Launch Alliance, LLC. Virgin Galactic ist eine registrierte Marke von Galactic Enterprises, LLC.

Zusätzliche Ressourcen

• ASP.NET Core Blazor-Ereignisbehandlung
• DynamicComponent