Rendering dinamico dei componenti core Razor ASP.NET

Di Dave Brock

Usare il componente predefinito DynamicComponent per eseguire il rendering dei componenti in base al tipo.

Componenti dinamici

Un DynamicComponent è utile per il rendering dei componenti senza scorrere i tipi possibili o usare la logica condizionale. Ad esempio, DynamicComponent può eseguire il rendering di un componente in base a una selezione utente da un elenco a discesa.

Nell'esempio seguente :

• componentType specifica il tipo.
• parameters specifica i parametri del componente da passare al componentType componente.

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

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

Per altre informazioni sul passaggio dei valori dei parametri, vedere la sezione Pass parameters più avanti in questo articolo.

Usare la Instance proprietà per accedere all'istanza del componente creata in modo dinamico:

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

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

@code {
    private DynamicComponent? dc;

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

Nell'esempio precedente:

• Il {COMPONENT} segnaposto è il tipo di componente creato dinamicamente.
• IRefreshable è un'interfaccia di esempio fornita dallo sviluppatore per l'istanza del componente dinamico.

Esempio

Nell'esempio seguente un Razor componente esegue il rendering di un componente in base alla selezione dell'utente da un elenco a discesa di quattro valori possibili.

Selezione dell'operatore spaceflight dell'utente	Componente condiviso Razor di cui eseguire il rendering
® Laboratorio razzo	RocketLab.razor
SpaceX®	SpaceX.razor
ULA®	UnitedLaunchAlliance.razor
Vergine Galattica®	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;
        }
    }
}

Nell'esempio precedente:

• Viene Dictionary<TKey,TValue> utilizzato per gestire i componenti da visualizzare.
• I nomi fungono da chiavi del dizionario e vengono forniti come opzioni di selezione.
• I tipi di componente vengono archiviati come valori di dizionario usando l'operatore typeof.

Passare parametri

Se i componenti sottoposti a rendering dinamico hanno parametri del componente, passarli a DynamicComponent come IDictionary<string, object>. string è il nome del parametro e object è il valore del parametro.

Nell'esempio seguente viene configurato un oggetto metadati del componente (ComponentMetadata) per fornire i valori dei parametri ai componenti sottoposti a rendering dinamico in base al nome del tipo. L'esempio è solo uno dei diversi approcci che è possibile adottare. I dati dei parametri possono essere forniti anche da un'API Web, da un database o da un metodo. L'unico requisito è che l'approccio restituisce un oggetto 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; } = [];
}

Il componente seguente RocketLabWithWindowSeat (RocketLabWithWindowSeat.razor) è stato aggiornato dall'esempio precedente per includere un parametro componente denominato WindowSeat per specificare se il passeggero preferisce una finestra sul volo:

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

Nell'esempio seguente :

• Solo il RocketLabWithWindowSeat parametro del componente per un sedile finestra (WindowSeat) riceve il valore della casella di Window Seat controllo.
• I nomi dei componenti vengono usati come chiavi del dizionario usando l'operatore nameof, che restituisce i nomi dei componenti come stringhe costanti.
• I componenti sottoposti a rendering dinamico sono componenti condivisi:
  • Illustrato in questa sezione dell'articolo: RocketLabWithWindowSeat (RocketLabWithWindowSeat.razor)
  • Componenti illustrati nella sezione Esempio precedente in questo articolo:
    • 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;
        }
    }
}

Callback degli eventi (EventCallback)

I callback degli eventi (EventCallback) possono essere passati a un oggetto DynamicComponent nel relativo dizionario dei parametri.

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

Implementare un parametro di callback dell'evento (EventCallback) all'interno di ogni componente sottoposto a rendering dinamico.

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

Nell'esempio di componente padre seguente, il ShowDTMessage metodo assegna una stringa con l'ora corrente a messagee viene eseguito il rendering del valore di message .

Il componente padre passa il metodo di callback nel ShowDTMessage dizionario dei parametri:

• La string chiave è il nome del metodo di callback, OnClickCallback.
• Il object valore viene creato da EventCallbackFactory.Create per il metodo di callback padre, ShowDTMessage. Si noti che la this parola chiave non è supportata nell'inizializzazione dei campi C#, quindi viene usata una proprietà C# per il dizionario dei parametri.

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

Evitare parametri catch-all

Evitare l'uso di parametri catch-all. Se vengono usati parametri catch-all, ogni parametro esplicito in DynamicComponent modo efficace è una parola riservata che non è possibile passare a un elemento figlio dinamico. Tutti i nuovi parametri passati a DynamicComponent sono una modifica che causa un'interruzione, in quanto iniziano a nascondere i parametri dei componenti figlio che hanno lo stesso nome. È improbabile che il chiamante conosca sempre un set fisso di nomi di parametri da passare a tutti i possibili elementi figlio dinamici.

Marchi

Rocket Lab è un marchio registrato di Rocket Lab USA Inc. SpaceX è un marchio registrato di Space Exploration Technologies Corp. United Launch Alliance e ULA sono marchi registrati di United Launch Alliance, LLC. Virgin Galactic è un marchio registrato di Galactic Enterprises, LLC.

Risorse aggiuntive

• gestione degli eventi ASP.NET Core Blazor
• DynamicComponent