Dinamik olarak işlenmiş ASP.NET Çekirdek Razor bileşenleri

Tarafından Dave Brock

Bileşenleri türe göre işlemek için yerleşik DynamicComponent bileşeni kullanın.

Dinamik bileşenler

, DynamicComponent olası türler arasında yineleme yapmadan veya koşullu mantık kullanmadan bileşenleri işlemek için kullanışlıdır. Örneğin, DynamicComponent açılan listeden kullanıcı seçimini temel alan bir bileşeni işleyebilir.

Aşağıdaki örnekte:

• componentType türünü belirtir.
• parameters , bileşene geçirecek componentType bileşen parametrelerini belirtir.

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

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

Parametre değerlerini geçirme hakkında daha fazla bilgi için bu makalenin devamında yer alan Parametreleri geçirme bölümüne bakın.

Örnek

Aşağıdaki örnekte bir Razor bileşen, dört olası değerden oluşan bir açılan listeden kullanıcının seçimine göre bir bileşeni işler.

Kullanıcı ara çubuğu taşıyıcı seçimi	İşlenmek üzere paylaşılan Razor bileşen
Rocket Lab®	RocketLab.razor
SpaceX®	SpaceX.razor
ULA®	UnitedLaunchAlliance.razor
Virgin Galaktik®	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;
        }
    }
}

Yukarıdaki örnekte:

• , Dictionary<TKey,TValue> görüntülenecek bileşenleri yönetmek için kullanılır.
• Adlar sözlük anahtarları olarak görev alır ve seçim seçenekleri olarak sağlanır.
• Bileşen türleri, işlecitypeof sözlük değerleri olarak depolanır.

Parametre geçirme

Dinamik olarak işlenen bileşenlerin bileşen parametreleri varsa, bunları DynamicComponent içine olarak IDictionary<string, object>geçirin. string parametresinin adıdır ve object parametresinin değeridir.

Aşağıdaki örnekte, tür adına göre dinamik olarak işlenen bileşenlere parametre değerleri sağlamak için bir bileşen meta veri nesnesi (ComponentMetadata) yapılandırılır. Örnek, benimseyebileceğiniz birkaç yaklaşımdan yalnızca biridir. Parametre verileri bir web API'sinden, veritabanından veya yöntemden de sağlanabilir. Tek gereksinim, yaklaşımın bir IDictionary<string, object>döndürmesidir.

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

Aşağıdaki RocketLabWithWindowSeat bileşen (RocketLabWithWindowSeat.razor) önceki örnekten, yolcunun uçuşlarında pencere koltuğunu tercihip tercih etmediğini belirtmek üzere adlı WindowSeat bileşen parametresini içerecek şekilde güncelleştirilmiştir:

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

Aşağıdaki örnekte:

• RocketLabWithWindowSeat Yalnızca pencere koltuğu (WindowSeat) için bileşenin parametresi onay kutusunun değerini Window Seat alır.
• Bileşen adları, bileşen adlarını sabit dizeler olarak döndüren işlecinameof sözlük anahtarları olarak kullanılır.
• Dinamik olarak işlenen bileşenler paylaşılan bileşenlerdir:
  • Bu makale bölümünde gösterilmiştir: RocketLabWithWindowSeat (RocketLabWithWindowSeat.razor)
  • Bu makalenin önceki bölümlerinde yer alan Örnek bölümünde gösterilen bileşenler:
    • 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;
        }
    }
}

Olay geri çağırmaları (EventCallback)

Olay geri çağırmaları (EventCallback) parametresi sözlüğünde öğesine DynamicComponent geçirilebilir.

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

Dinamik olarak işlenen her bileşende bir olay geri çağırma parametresi (EventCallback) uygulayın.

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şağıdaki üst bileşen örneğinde ShowDTMessage , yöntemi geçerli saati messageile bir dize atar ve değeri message işlenir.

Üst bileşen parametre ShowDTMessage sözlüğünde geri çağırma yöntemini geçirir:

• Anahtarstring, geri çağırma yönteminin adıdır. OnClickCallback
• değeriobject, üst geri çağırma yöntemi EventCallbackFactory.Createiçin tarafından ShowDTMessage oluşturulur. Anahtar sözcüğün this C# alanı başlatmada desteklenmediğini, bu nedenle parametre sözlüğü için bir C# özelliğinin kullanıldığını unutmayın.

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

Tümünü yakala parametrelerinden kaçının

Tümünü yakala parametrelerini kullanmaktan kaçının. Tümünü yakala parametreleri kullanılırsa, üzerindeki DynamicComponent her açık parametre dinamik alt öğeye geçirememenize neden olan ayrılmış bir sözcük olur. geçirilen DynamicComponent tüm yeni parametreler, aynı ada sahip olan alt bileşen parametrelerini gölgelendirmeye başladığından, hataya neden olan bir değişikliktir. Çağıranın her zaman tüm olası dinamik alt öğelere geçirmek için sabit bir parametre adları kümesi bilmesi pek olası değil.

Dinamik olarak oluşturulan bileşen örneğine erişme

Instance Dinamik olarak oluşturulan bileşen örneğine erişmek için özelliğini kullanın.

Dinamik olarak oluşturulan bileşen örneğini, bileşen dinamik olarak yüklendiğinde üst bileşenden erişmeniz gereken yöntemler ve özelliklerle açıklamak için bir arabirim oluşturun. Aşağıdaki örnek, bileşenlerde uygulama için bir Log yöntem belirtir.

Interfaces/ILoggable.cs:

using Microsoft.AspNetCore.Components;

namespace BlazorSample.Interfaces;

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

Her bileşen tanımı arabirimini uygular. Aşağıdaki örnek, Yöntemi aracılığıyla bir dizeyi günlüğe kaydeden Örnek bölümünden değiştirilmiş bir Rocket Lab® bileşenidir Log .

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

Kalan üç paylaşılan bileşen (VirginGalactic3, UnitedLaunchAlliance3, SpaceX3) benzer bir işlem alır:

• Yer tutucunun bileşen türü olduğu {COMPONENT TYPE} bileşenlere aşağıdaki yönergeler eklenir:

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

• Her bileşen bir Log yöntem uygular. Günlükçü tarafından yazılan günlük kategorisi, çağrıldığında LogInformation bileşen türünün tam adını içerir:

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

Üst bileşen, arabirimin üyelerine erişmek için dinamik olarak yüklenen bileşen örneğini bir ILoggable olarak atar. Aşağıdaki örnekte, kullanıcı arabiriminde bir düğme seçildiğinde yüklenen bileşenin Log yöntemi çağrılır:

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

Yukarıdaki örneğin çalışan bir gösterimi için örnek uygulamadakiDynamicComponent4Blazor.

Ticari Markalar

Rocket Lab, Rocket Lab USA Inc.'in tescilli ticari markasıdır. SpaceX, Space Exploration Technologies Corp.'un tescilli ticari markasıdır. United Launch Alliance ve ULA, United Launch Alliance, LLC'nin tescilli ticari markalarıdır. Virgin Galactic, Galactic Enterprises, LLC'nin tescilli ticari markasıdır.

Ek kaynaklar

• ASP.NET Core Blazor olay işleme
• DynamicComponent