Dynamiskt renderade ASP.NET Core-komponenter Razor

Av Dave Brock

Använd den inbyggda DynamicComponent komponenten för att återge komponenter efter typ.

Dynamiska komponenter

En DynamicComponent är användbar för att återge komponenter utan att iterera genom möjliga typer eller använda villkorsstyrd logik. Till exempel kan DynamicComponent rendera en komponent baserat på ett användarval från en listruta.

I följande exempel:

• componentType anger typen.
• parameters anger komponentparametrar som ska skickas till komponenten componentType .

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

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

Mer information om hur du skickar parametervärden finns i avsnittet Skicka parametrar senare i den här artikeln.

Example

I följande exempel renderar en Razor komponent en komponent baserat på användarens val från en listruta med fyra möjliga värden.

Val av operatör för användarutrymmesflyg	Delad Razor komponent som ska renderas
Raketlabb®	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;
        }
    }
}

I föregående exempel:

• En Dictionary<TKey,TValue> används för att hantera komponenter som ska visas.
• Namn fungerar som ordlistenycklar och tillhandahålls som urvalsalternativ.
• Komponenttyper lagras som ordlistevärden med operatorntypeof .

Skicka parametrar

Om dynamiskt renderade komponenter har komponentparametrar skickar du dem till DynamicComponent som en IDictionary<string, object>. string är namnet på parametern och object är parameterns värde.

I följande exempel konfigureras ett komponentmetadataobjekt (ComponentMetadata) för att ange parametervärden till dynamiskt renderade komponenter baserat på typnamnet. Exemplet är bara en av flera metoder som du kan använda. Parameterdata kan också tillhandahållas från ett webb-API, en databas eller en metod. Det enda kravet är att metoden returnerar en 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; } = [];
}

Följande RocketLabWithWindowSeat komponent (RocketLabWithWindowSeat.razor) har uppdaterats från föregående exempel för att inkludera en komponentparameter med namnet WindowSeat för att ange om passageraren föredrar en fönsterplats på sin flygning:

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

I följande exempel:

• Endast komponentens RocketLabWithWindowSeat parameter för en fönsterplats (WindowSeat) tar emot värdet för kryssrutan Window Seat .
• Komponentnamn används som ordlistenycklar med operatornnameof, som returnerar komponentnamn som konstanta strängar.
• De dynamiskt renderade komponenterna är delade komponenter:
  • Visas i det här artikelavsnittet: RocketLabWithWindowSeat (RocketLabWithWindowSeat.razor)
  • Komponenter som visas i avsnittet Exempel tidigare i den här artikeln:
    • 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;
        }
    }
}

Återanropsfunktioner för händelser (EventCallback)

Händelseåteranrop (EventCallback) kan skickas till en DynamicComponent i parameterordlistan.

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

Implementera en händelseåteranropsparameter (EventCallback) i varje dynamiskt renderad komponent.

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

I följande exempel på en överordnad komponent tilldelar metoden ShowDTMessage en sträng med aktuell tid till message, och värdet message återges.

Den överordnade komponenten skickar återanropsmetoden ShowDTMessage i parameterordlistan:

• Namnet på nyckeln string är återkallningsmetodens, OnClickCallback.
• Värdet object skapas av EventCallbackFactory.Create för den överordnade återanropsmetoden, ShowDTMessage. Observera att nyckelordetthis inte stöds i initieringen av C#-fältet, så en C#-egenskap används för parameterordlistan.

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

Undvik universella parametrar

Undvik att använda catch-all-parametrar. Om catch-all-parametrar används, fungerar varje explicit parameter i DynamicComponent i praktiken som ett reserverat ord som du inte kan skicka till ett dynamiskt underordnat. Alla nya parametrar som skickas till DynamicComponent är en brytande förändring eftersom de börjar överlappa underordnade komponentparametrar som råkar ha samma namn. Det är osannolikt att anroparen alltid känner till en fast uppsättning parameternamn som ska skickas till alla möjliga dynamiska underordnade objekt.

Få åtkomst till den dynamiskt skapade komponentinstansen

Använd egenskapen Instance för att komma åt den dynamiskt skapade komponentinstansen.

Skapa ett gränssnitt för att beskriva den dynamiskt skapade komponentinstansen med alla metoder och egenskaper som du behöver komma åt från den överordnade komponenten när komponenten läses in dynamiskt. I följande exempel anges en Log metod för implementering i komponenter.

Interfaces/ILoggable.cs:

using Microsoft.AspNetCore.Components;

namespace BlazorSample.Interfaces;

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

Varje komponentdefinition implementerar gränssnittet. Följande exempel är en modifierad Rocket Lab-komponent® från avsnittet Exempel som loggar en sträng via dess Log metod.

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

De återstående tre delade komponenterna (VirginGalactic3, UnitedLaunchAlliance3, SpaceX3) får liknande behandling:

• Följande direktiv läggs till i komponenterna, där {COMPONENT TYPE} platshållaren är komponenttypen:

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

• Varje komponent implementerar en Log metod. Loggkategorin som skrivs av loggaren innehåller det fullständigt kvalificerade namnet på komponenttypen när LogInformation den anropas:

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

Den överordnade komponenten omvandlar den dynamiskt inlästa komponentinstansen som en ILoggable för åtkomst till medlemmar i gränssnittet. I följande exempel anropas den inlästa komponentens metod när en knapp väljs Log i användargränssnittet:

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

En fungerande demonstration av föregående exempel finns i komponentenDynamicComponent4 i exempelappenBlazor.

Varumärken

Rocket Lab är ett registrerat varumärke som tillhör Rocket Lab USA Inc. SpaceX är ett registrerat varumärke som tillhör Space Exploration Technologies Corp. United Launch Alliance och ULA är registrerade varumärken som tillhör United Launch Alliance, LLC. Virgin Galactic är ett registrerat varumärke som tillhör Galactic Enterprises, LLC.

Ytterligare resurser

• ASP.NET Core-händelsehantering Blazor
• DynamicComponent