Dynamiczne renderowanie składników ASP.NET Core Razor

Autor: Dave Brock

Użyj wbudowanego DynamicComponent składnika do renderowania składników według typu.

Składniki dynamiczne

Element jest DynamicComponent przydatny do renderowania składników bez iterowania za pośrednictwem możliwych typów lub używania logiki warunkowej. Na przykład DynamicComponent może renderować składnik na podstawie wyboru użytkownika z listy rozwijanej.

W poniższym przykładzie:

• componentType określa typ.
• parameters określa parametry składnika, które mają być przekazywane do componentType składnika.

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

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

Aby uzyskać więcej informacji na temat przekazywania wartości parametrów, zobacz sekcję Przekazywanie parametrów w dalszej części tego artykułu.

Użyj właściwości , Instance aby uzyskać dostęp do dynamicznie utworzonego wystąpienia składnika:

<DynamicComponent Type="typeof({COMPONENT})" @ref="dc" />

<button @onclick="Refresh">Refresh</button>

@code {
    private DynamicComponent? dc;

    private Task Refresh()
    {
        return (dc?.Instance as IRefreshable)?.Refresh();
    }
}

W powyższym przykładzie:

• Symbol {COMPONENT} zastępczy jest dynamicznie utworzonym typem składnika.
• IRefreshable to przykładowy interfejs udostępniany przez dewelopera dla wystąpienia składnika dynamicznego.

Przykład

W poniższym przykładzie Razor składnik renderuje składnik na podstawie wyboru użytkownika z listy rozwijanej czterech możliwych wartości.

Wybór operatora spaceflight użytkownika	Składnik udostępniony Razor do renderowania
Laboratorium® rakietowe	RocketLab.razor
Spacex®	SpaceX.razor
ULA®	UnitedLaunchAlliance.razor
Dziewica Galaktyka®	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;
        }
    }
}

W powyższym przykładzie:

• Element Dictionary<TKey,TValue> służy do zarządzania składnikami do wyświetlania.
• Nazwy służą jako klucze słownika i są udostępniane jako opcje wyboru.
• Typy składników są przechowywane jako wartości słownika typeof przy użyciu operatora .

Przekazywanie parametrów

Jeśli składniki renderowane dynamicznie mają parametry składnika, przekaż je do DynamicComponent elementu jako IDictionary<string, object>. Jest string to nazwa parametru, a object parametr jest wartością parametru.

Poniższy przykład umożliwia skonfigurowanie obiektu metadanych składnika (ComponentMetadata) w celu dostarczania wartości parametrów do składników renderowanych dynamicznie na podstawie nazwy typu. Przykład to tylko jedno z kilku podejść, które można zastosować. Dane parametrów można również dostarczyć z internetowego interfejsu API, bazy danych lub metody. Jedynym wymaganiem jest to, że metoda zwraca IDictionary<string, object>wartość .

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

Poniższy RocketLabWithWindowSeat składnik (RocketLabWithWindowSeat.razor) został zaktualizowany z poprzedniego przykładu w celu uwzględnienia parametru składnika o nazwie WindowSeat w celu określenia, czy pasażer preferuje miejsce w locie:

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

W poniższym przykładzie:

• RocketLabWithWindowSeat Tylko parametr składnika dla siedzenia okna (WindowSeat) otrzymuje wartość Window Seat pola wyboru.
• Nazwy składników są używane jako klucze słownika nameof przy użyciu operatora, który zwraca nazwy składników jako ciągi stałe.
• Składniki renderowane dynamicznie są składnikami udostępnionymi:
  • Pokazano w tej sekcji artykułu: RocketLabWithWindowSeat (RocketLabWithWindowSeat.razor)
  • Składniki pokazane w sekcji Przykład we wcześniejszej części tego artykułu:
    • 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;
        }
    }
}

Wywołania zwrotne zdarzeń (EventCallback)

Wywołania zwrotne zdarzeń (EventCallback) można przekazać do DynamicComponent elementu w słowniku parametrów.

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

Zaimplementuj parametr wywołania zwrotnego zdarzeń (EventCallback) w każdym składniku renderowany dynamicznie.

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

W poniższym przykładzie ShowDTMessage składnika nadrzędnego metoda przypisuje ciąg z bieżącym czasem do message, a wartość message jest renderowana.

Składnik nadrzędny przekazuje metodę ShowDTMessage wywołania zwrotnego w słowniku parametrów:

• Kluczem string jest nazwa metody wywołania zwrotnego, OnClickCallback.
• Wartość jest tworzona object przez EventCallbackFactory.Create dla metody wywołania zwrotnego nadrzędnego, ShowDTMessage. Należy pamiętać, że this słowo kluczowe nie jest obsługiwane w inicjowaniu pól języka C#, dlatego dla słownika parametrów jest używana właściwość języka 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}.";
}

Unikanie parametrów catch-all

Unikaj używania parametrów catch-all. Jeśli są używane parametry catch-all, każdy jawny parametr DynamicComponent na efektywnie jest zastrzeżonym słowem, którego nie można przekazać do dynamicznego elementu podrzędnego. Wszystkie nowe przekazane DynamicComponent parametry są zmianą powodującą niezgodność, ponieważ zaczynają w tle parametry składnika podrzędnego, które mają taką samą nazwę. Jest mało prawdopodobne, że obiekt wywołujący zawsze wie stały zestaw nazw parametrów do przekazania do wszystkich możliwych elementów podrzędnych dynamicznych.

Znaki towarowe

Rocket Lab jest zastrzeżonym znakiem towarowym Rocket Lab USA Inc. SpaceX jest zastrzeżonym znakiem towarowym Space Exploration Technologies Corp. United Launch Alliance i ULA są zastrzeżonymi znakami towarowymi United Launch Alliance, LLC. Virgin Galactic jest zastrzeżonym znakiem towarowym Firmy Galactic Enterprises, LLC.

Dodatkowe zasoby

• obsługa zdarzeń ASP.NET Core Blazor
• DynamicComponent