Dinamikusan renderelt ASP.NET Core-összetevők Razor

Készítette: Dave Brock

A beépített DynamicComponent összetevővel típus szerint jelenítheti meg az összetevőket.

Dinamikus összetevők

A DynamicComponent hasznos az összetevők renderelésére anélkül, hogy végig kellene menni a lehetséges típusokon vagy feltételes logikát kellene használni. Például, a DynamicComponent megjeleníthet egy összetevőt egy felhasználó által kiválasztott legördülő listából.

Az alábbi példában:

• componentType a típust adja meg.
• parameters az összetevőnek átadni componentType kívánt összetevőparamétereket adja meg.

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

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

A paraméterértékek átadásáról a cikk későbbi részében, a Paraméterek átadása szakaszban talál további információt.

Example

Az alábbi példában egy Razor összetevő egy összetevőt jelenít meg a felhasználó által kiválasztott négy lehetséges értékből álló legördülő listából.

Felhasználói űrrepülés hordozó kiválasztása	Renderelendő megosztott Razor összetevő
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;
        }
    }
}

Az előző példában:

• Az An Dictionary<TKey,TValue> a megjelenítendő összetevők kezelésére szolgál.
• A nevek szótárkulcsként szolgálnak, és kiválasztási lehetőségként szolgálnak.
• Az összetevőtípusok az operátorral szótárértékekként vannak tárolvatypeof.

Paraméterek átadása

Ha a dinamikusan renderelt összetevőknek vannak összetevőparaméterei, adja át őket DynamicComponent-ként egy IDictionary<string, object>-be. A string paraméter neve, a object paraméter értéke.

Az alábbi példa egy összetevő metaadat-objektumát (ComponentMetadata) konfigurálja, hogy paraméterértékeket adjon meg a típusnév alapján dinamikusan renderelt összetevőknek. A példa csak egy a számos megközelítés közül, amelyeket elfogadhat. A paraméteradatok webes API-ból, adatbázisból vagy metódusból is megadhatóak. Az egyetlen követelmény, hogy az eljárás visszaadjon egy 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; } = [];
}

Az előző példából a következő RocketLabWithWindowSeat összetevő (RocketLabWithWindowSeat.razor) frissült, hogy tartalmazzon egy elnevezett WindowSeat összetevőparamétert, amely meghatározza, hogy az utas a járatán az ablak ülését részesíti-e előnyben:

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

Az alábbi példában:

• Csak az RocketLabWithWindowSeat ablaküléshez (WindowSeat) tartozó komponens paramétere kapja meg a Window Seat jelölőnégyzet értékét.
• Az összetevőnevek szótárkulcsként használhatók az nameof operátor használatával, amely állandó sztringekként adja vissza az összetevők nevét.
• A dinamikusan renderelt összetevők megosztott összetevők:
  • A cikk ezen szakaszában látható: RocketLabWithWindowSeat (RocketLabWithWindowSeat.razor)
  • A cikk korábbi , Példa szakaszában látható összetevők:
    • 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;
        }
    }
}

Eseményvisszahívások (EventCallback)

Az eseményvisszahívások (EventCallback) átadhatók egy DynamicComponent paraméterszótárban.

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

Implementáljon egy eseményvisszahívási paramétert (EventCallback) minden dinamikusan renderelt összetevőn belül.

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

A következő szülőkomponens példájában a ShowDTMessage metódus egy karakterláncot rendel a jelenlegi idővel message változóhoz, és a message értéke kerül megjelenítésre.

A szülőösszetevő átadja a visszahívási metódust ShowDTMessage a paraméterszótárban:

• A string kulcs a visszahívási metódus neve. OnClickCallback
• Az object értéket a EventCallbackFactory.Create hozza létre a szülő visszahívási metódus, ShowDTMessage számára. Ne feledje, hogy a this kulcsszó nem támogatott C# mező inicializálásnál, ezért a paraméter szótárhoz C# tulajdonságot használunk.

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

Kerülje a mindenre jellemző paramétereket

Kerülje a catch-all paraméterek használatát. Ha catch-all paramétereket használ, minden explicit paraméter a DynamicComponent egy fenntartott szónak számít, amelyet nem adhat át egy dinamikus gyermeknek. Az új paraméterek átadása a DynamicComponent-nek megszakító változást jelentenek, mivel elkezdenek árnyékolni olyan gyermekösszetevő-paramétereket, amelyek ugyanazzal a névvel rendelkeznek. Nem valószínű, hogy a hívó mindig tud egy rögzített paraméternevet, amelyet az összes lehetséges dinamikus gyermeknek átad.

A dinamikusan létrehozott összetevőpéldány elérése

Instance A tulajdonság használatával elérheti a dinamikusan létrehozott összetevőpéldányt.

Hozzon létre egy felületet a dinamikusan létrehozott összetevőpéldány leírásához minden olyan metódussal és tulajdonságokkal, amelyhez az összetevő dinamikus betöltésekor hozzá kell férnie a szülőösszetevőtől. Az alábbi példa egy metódust Log határoz meg az összetevők implementálásához.

Interfaces/ILoggable.cs:

using Microsoft.AspNetCore.Components;

namespace BlazorSample.Interfaces;

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

Minden összetevődefiníció implementálja az interfészt. Az alábbi példa a Példa szakaszban található egy módosított Rocket Lab® összetevő, amely a Log metódusán keresztül naplóz egy szöveget.

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

A fennmaradó három megosztott összetevő (VirginGalactic3, UnitedLaunchAlliance3, SpaceX3) hasonló kezelést kap:

• A rendszer a következő irányelveket adja hozzá az összetevőkhöz, ahol a {COMPONENT TYPE} helyőrző az összetevő típusa:

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

• Minden összetevő implementál egy metódust Log . Amikor a LogInformation meghívásra kerül, a naplózó által írt naplókategória tartalmazza az összetevő típusának teljes nevét.

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

A szülőösszetevő a dinamikusan betöltött összetevőpéldányt ILoggable típuskonvertálja, hogy hozzáférjen a felület tagjaihoz. Az alábbi példában a rendszer meghívja a betöltött összetevő metódusát Log , amikor egy gomb van kiválasztva a felhasználói felületen:

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

A példa működő bemutatóját a DynamicComponent4 mintaalkalmazás Blazor összetevőjében tekintheti meg.

Védjegyek

A Rocket Lab a Rocket Lab USA Inc. bejegyzett védjegye. A SpaceX a Space Exploration Technologies Corp bejegyzett védjegye. A United Launch Alliance és az ULA a United Launch Alliance, LLC bejegyzett védjegyei. A Virgin Galactic a Galactic Enterprises, LLC bejegyzett védjegye.

További erőforrások

• ASP.NET Alapvető Blazor eseménykezelés
• DynamicComponent