Dynamicky vykreslené komponenty ASP.NET Core Razor

Autor: Dave Brock

K vykreslení komponent podle typu použijte integrovanou DynamicComponent komponentu.

Dynamické komponenty

Funkce DynamicComponent je užitečná pro vykreslování komponent bez iterace prostřednictvím možných typů nebo použití podmíněné logiky. Například DynamicComponent může vykreslit komponentu na základě výběru uživatele z rozevíracího seznamu.

V následujícím příkladu:

• componentType určuje typ.
• parameters určuje parametry komponenty, které se mají předat komponentě componentType .

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

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

Další informace o předávání hodnot parametrů naleznete v části Předávací parametry dále v tomto článku.

Instance Použijte vlastnost pro přístup k dynamicky vytvořené instanci komponenty:

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

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

@code {
    private DynamicComponent? dc;

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

V předchozím příkladu:

• Zástupný {COMPONENT} symbol je dynamicky vytvořený typ komponenty.
• IRefreshable je ukázkové rozhraní, které poskytuje vývojář pro instanci dynamické komponenty.

Příklad

V následujícím příkladu Razor vykresluje komponenta na základě výběru uživatele z rozevíracího seznamu čtyř možných hodnot.

Výběr testovacího letadla uživatele	Sdílená komponenta Razor pro vykreslení
Raketová laboratoř®	RocketLab.razor
® Mezerník	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;
        }
    }
}

V předchozím příkladu:

• Slouží Dictionary<TKey,TValue> ke správě komponent, které se mají zobrazit.
• Názvy slouží jako klíče slovníku a jsou k dispozici jako možnosti výběru.
• Typy komponent se ukládají jako hodnoty slovníku pomocí operátorutypeof.

Parametry předání

Pokud dynamicky vykreslené komponenty mají parametry komponenty, předejte je jako DynamicComponent .IDictionary<string, object> Jedná se string o název parametru a object jedná se o hodnotu parametru.

Následující příklad nakonfiguruje objekt metadat komponenty (ComponentMetadata) pro zadání hodnot parametrů dynamicky vykreslovaným komponentám na základě názvu typu. Příkladem je jen jeden z několika přístupů, které můžete přijmout. Data parametrů lze také poskytnout z webového rozhraní API, databáze nebo metody. Jediným požadavkem je, aby přístup vrátil hodnotu 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; } = [];
}

RocketLabWithWindowSeat Následující komponenta (RocketLabWithWindowSeat.razor) byla aktualizována z předchozího příkladu tak, aby zahrnovala parametr komponenty s názvemWindowSeat, který určuje, jestli cestující dává přednost sedadlu okna v letu:

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

V následujícím příkladu:

• RocketLabWithWindowSeat Hodnotu zaškrtávacího Window Seat políčka obdrží pouze parametr komponenty pro sedadlo okna (WindowSeat).
• Názvy komponent se používají jako klíče slovníku pomocí operátorunameof, který vrací názvy součástí jako konstantní řetězce.
• Dynamicky vykreslené komponenty jsou sdílené komponenty:
  • Zobrazeno v této části článku: RocketLabWithWindowSeat (RocketLabWithWindowSeat.razor)
  • Komponenty uvedené v části Příklad výše v tomto článku:
    • 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;
        }
    }
}

Zpětná volání událostí (EventCallback)

Zpětné volání událostí (EventCallback) lze předat do slovníku DynamicComponent parametrů.

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

Implementujte parametr zpětného volání události (EventCallback) v rámci každé dynamicky vykreslené komponenty.

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

V následujícím příkladu ShowDTMessage nadřazené komponenty metoda přiřadí řetězec s aktuálním časem messagea hodnota message je vykreslena.

Nadřazená komponenta předává metodu ShowDTMessage zpětného volání ve slovníku parametrů:

• Klíč string je název metody zpětného volání, OnClickCallback.
• Hodnota object je vytvořena EventCallbackFactory.Create pro nadřazenou metodu zpětného volání, ShowDTMessage. Všimněte si, že this inicializace polí jazyka C# není podporována, takže se pro slovník parametrů používá vlastnost jazyka 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}.";
}

Vyhněte se parametrům catch-all

Vyhněte se použití parametrů catch-all. Pokud se použijí parametry catch-all, každý explicitní parametr pro DynamicComponent efektivní použití je vyhrazené slovo, které nemůžete předat dynamickému podřízení. Všechny nové parametry předané DynamicComponent jsou zásadní změnou, protože začínají stínovat podřízené parametry komponent, které mají stejný název. Je nepravděpodobné, že volající vždy zná pevnou sadu názvů parametrů, která se má předat všem možným dynamickým podřízeným položkě.

Ochranné známky

Rocket Lab je registrovaná ochranná známka společnosti Rocket Lab USA Inc. SpaceX je registrovaná ochranná známka společnosti Space Exploration Technologies Corp. United Launch Alliance a ULA jsou registrované ochranné známky společnosti United Launch Alliance, LLC. Virgin Panic je registrovaná ochranná známka společnosti Enterprises, LLC.

Další materiály

• zpracování událostí ASP.NET Core Blazor
• DynamicComponent