Dynamisch gerenderde ASP.NET Core-onderdelen Razor

Door Dave Brock

Gebruik het ingebouwde DynamicComponent onderdeel om onderdelen per type weer te geven.

Dynamische onderdelen

Een DynamicComponent is handig voor het weergeven van onderdelen zonder de mogelijke typen te doorlopen of voorwaardelijke logica te gebruiken. DynamicComponent kan bijvoorbeeld een onderdeel weergeven op basis van een gebruikersselectie uit een vervolgkeuzelijst.

In het volgende voorbeeld:

• componentType hiermee geeft u het type.
• parameters geeft onderdeelparameters op die aan het componentType onderdeel moeten worden doorgegeven.

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

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

Zie de sectie Wachtwoordparameters verderop in dit artikel voor meer informatie over het doorgeven van parameterwaarden.

Example

In het volgende voorbeeld wordt een Razor onderdeel weergegeven op basis van de selectie van de gebruiker in een vervolgkeuzelijst met vier mogelijke waarden.

Selectie van de ruimtevluchtprovider van de gebruiker	Gedeeld Razor onderdeel om weergave tot stand te brengen
Raketlab®	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;
        }
    }
}

In het voorgaande voorbeeld:

• Een Dictionary<TKey,TValue> wordt gebruikt om onderdelen te beheren die moeten worden weergegeven.
• Namen fungeren als de woordenlijstsleutels en worden geleverd als selectieopties.
• Onderdeeltypen worden opgeslagen als woordenlijstwaarden met behulp van de typeof operator.

Parameters doorgeven

Als componenten die dynamisch worden gerenderd onderdeelparameters hebben, geef ze dan door aan DynamicComponent als IDictionary<string, object>. Dit string is de naam van de parameter en de object waarde van de parameter.

In het volgende voorbeeld wordt een onderdeelmetagegevensobject (ComponentMetadata) geconfigureerd om parameterwaarden op te geven voor dynamisch gerenderde onderdelen op basis van de typenaam. Het voorbeeld is slechts een van de verschillende benaderingen die u kunt gebruiken. Parametergegevens kunnen ook worden opgegeven vanuit een web-API, een database of een methode. De enige vereiste is dat de benadering een IDictionary<string, object> retourneert.

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

Het volgende RocketLabWithWindowSeat onderdeel (RocketLabWithWindowSeat.razor) is bijgewerkt op basis van het voorgaande voorbeeld om een componentparameter op te nemen waarmee kan worden gespecificeerd of de passagier de voorkeur geeft aan een raamplaats op zijn vlucht.

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

In het volgende voorbeeld:

• Alleen de parameter van het RocketLabWithWindowSeat onderdeel voor een raamstoel (WindowSeat) ontvangt de waarde van het Window Seat selectievakje.
• Onderdeelnamen worden gebruikt als woordenlijstsleutels met behulp van de nameof operator, die onderdeelnamen als constante tekenreeksen retourneert.
• De dynamisch gerenderde onderdelen zijn gedeelde onderdelen:
  • Weergegeven in deze sectie van dit artikel: RocketLabWithWindowSeat (RocketLabWithWindowSeat.razor)
  • Onderdelen die worden weergegeven in de sectie Voorbeeld eerder in dit artikel:
    • 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;
        }
    }
}

Callbacks voor gebeurtenissen (EventCallback)

Callbacks van gebeurtenissen (EventCallback) kunnen in de parameterwoordenlijst aan een DynamicComponent worden doorgegeven.

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

Implementeer een callbackparameter voor gebeurtenissen (EventCallback) binnen elk dynamisch gerenderd onderdeel.

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

In het volgende voorbeeld van de oudercomponent wijst de ShowDTMessage methode een tekenreeks met de huidige tijd toe aan message, en wordt de waarde van message weergegeven.

Het ouderonderdeel geeft de callback-methode ShowDTMessage door in de parameterlijst:

• De string sleutel is de naam van de callback-methode. OnClickCallback
• De object-waarde wordt door EventCallbackFactory.Create gemaakt voor de bovenliggende callback-methode, ShowDTMessage. Houd er rekening mee dat het trefwoord niet wordt ondersteund in de this initialisatie van C#-velden, dus er wordt een C#-eigenschap gebruikt voor de parameterwoordenlijst.

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-parameters voorkomen

Vermijd het gebruik van catch-all-parameters. Als catch-all-parameters worden gebruikt, is elke expliciete parameter, DynamicComponent, feitelijk gezien een gereserveerd woord dat u niet kunt doorgeven aan een dynamische kind. Parameters die nieuw aan DynamicComponent worden toegevoegd, vormen een belangrijke wijziging, omdat ze andere parameters van onderliggende componenten gaan overschaduwen die toevallig dezelfde naam hebben. Het is onwaarschijnlijk dat de aanroeper altijd een vaste set parameternamen kent die moet worden doorgegeven aan alle mogelijke dynamische onderliggende elementen.

Krijg toegang tot het dynamisch gemaakte onderdeelexemplaar

Gebruik de Instance eigenschap om toegang te krijgen tot het dynamisch gemaakte component-exemplaar.

Maak een interface om het dynamisch gemaakte onderdeelexemplaar te beschrijven met de methoden en eigenschappen die u moet benaderen vanuit het bovenliggende component wanneer het component dynamisch wordt geladen. In het volgende voorbeeld wordt een Log methode voor implementatie in onderdelen opgegeven.

Interfaces/ILoggable.cs:

using Microsoft.AspNetCore.Components;

namespace BlazorSample.Interfaces;

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

Elke onderdeeldefinitie implementeert de interface. Het volgende voorbeeld is een aangepast Rocket Lab® onderdeel uit de sectie Voorbeeld dat een string via de Log methode in een logboek opslaat.

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 overige drie gedeelde onderdelen (VirginGalactic3, UnitedLaunchAlliance3, SpaceX3) krijgen een vergelijkbare behandeling:

• De volgende instructies worden toegevoegd aan de onderdelen, waarbij de {COMPONENT TYPE} tijdelijke aanduiding het onderdeeltype is:

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

• Elk onderdeel implementeert een Log methode. De logboekcategorie door de logger geschreven bevat de volledig gekwalificeerde naam van het componenttype wanneer LogInformation wordt aangeroepen.

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

Het ouderonderdeel cast het dynamisch geladen onderdeelexemplaar als een ILoggable om toegang te krijgen tot leden van de interface. In het volgende voorbeeld wordt de methode van Log het geladen onderdeel aangeroepen wanneer een knop is geselecteerd in de gebruikersinterface:

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

Zie het DynamicComponent4 onderdeel in de Blazor voorbeeld-app voor een werkende demonstratie van het voorgaande voorbeeld.

Handelsmerken

Rocket Lab is een gedeponeerd handelsmerk van Rocket Lab USA Inc. SpaceX is een geregistreerd handelsmerk van Space Exploration Technologies Corp. United Launch Alliance en ULA zijn gedeponeerde handelsmerken van United Launch Alliance, LLC. Virgin Galactic is een gedeponeerd handelsmerk van Galactic Enterprises, LLC.

Aanvullende bronnen

• afhandeling van ASP.NET Core-gebeurtenissen Blazor
• DynamicComponent