동적으로 렌더링된 ASP.NET Core Razor 구성 요소

작성자: Dave Brock

기본 제공 DynamicComponent 구성 요소를 사용하여 형식별로 구성 요소를 렌더링합니다.

동적 구성 요소

DynamicComponent는 가능한 형식을 반복하거나 조건부 논리를 사용하지 않고 구성 요소를 렌더링하는 데 유용합니다. 예를 들어 DynamicComponent는 드롭다운 목록에서 사용자가 선택한 항목을 기반으로 구성 요소를 렌더링할 수 있습니다.

다음 예제에서

• componentType은 형식을 지정합니다.
• parameters는 componentType 구성 요소에 전달할 구성 요소 매개 변수를 지정합니다.

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

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

매개 변수 값을 전달하는 방법에 대한 자세한 내용은 이 문서의 뒷부분에 나오는 매개 변수 전달 섹션을 참조하세요.

Instance 속성을 사용하여 동적으로 생성된 구성 요소 인스턴스에 액세스합니다.

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

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

@code {
    private DynamicComponent? dc;

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

앞의 예에서:

• {COMPONENT} 자리 표시자는 동적으로 생성된 구성 요소 유형입니다.
• IRefreshable는 개발자가 동적 구성 요소 인스턴스에 제공하는 예제 인터페이스입니다.

예시

다음 예제에서 Razor 구성 요소는 가능한 네 가지 값의 드롭다운 목록에서 사용자의 선택에 따라 구성 요소를 렌더링합니다.

사용자 우주 비행 항공사 선택	렌더링할 공유 Razor 구성 요소
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;
        }
    }
}

앞의 예에서:

• 표시 Dictionary<TKey,TValue> 할 구성 요소를 관리하는 데 사용됩니다.
• 이름은 사전 키로 사용되며 선택 옵션으로 제공됩니다.
• 구성 요소 형식은 연산자를 사용하여 typeof 사전 값으로 저장됩니다.

패스 매개 변수

동적으로 렌더링된 구성 요소에 구성 요소 매개 변수가 있는 경우 IDictionary<string, object>로서 DynamicComponent에 전달합니다. string은 매개 변수의 이름이고, object는 매개 변수의 값입니다.

다음 예제에서는 형식 이름에 따라 동적으로 렌더링된 구성 요소에 매개 변수 값을 제공하도록 구성 요소 메타데이터 개체(ComponentMetadata)를 구성합니다. 이 예제는 채택할 수 있는 몇 가지 방법 중 하나일 뿐입니다. 매개 변수 데이터는 웹 API, 데이터베이스 또는 메서드에서 제공될 수도 있습니다. 유일한 요구 사항은 이 방법이 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 구성 요소(RocketLabWithWindowSeat.razor)는 WindowSeat라는 구성 요소 매개 변수를 포함하도록 이전 예제에서 업데이트되어 승객이 항공편에서 창가쪽 좌석을 선호하는지 여부를 지정합니다.

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

다음 예제에서

• 창가쪽 좌석(WindowSeat)에 대한 RocketLabWithWindowSeat 구성 요소의 매개 변수만 Window Seat 확인란 값을 받습니다.
• 구성 요소 이름은 구성 요소 이름을 상수 문자열로 반환하는 연산자를 사용하여 nameof 사전 키로 사용됩니다.
• 동적으로 렌더링된 구성 요소는 공유 구성 요소입니다.
  • 이 문서 섹션에 나와 있는 구성 요소: RocketLabWithWindowSeat(RocketLabWithWindowSeat.razor)
  • 이 문서의 앞부분에 있는 예제 섹션에 표시된 구성 요소:
    • 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;
        }
    }
}

이벤트 콜백(EventCallback)

이벤트 콜백(EventCallback)은 해당 매개 변수 사전에서 DynamicComponent로 전달될 수 있습니다.

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

동적으로 렌더링된 각 구성 요소 내에서 이벤트 콜백 매개 변수(EventCallback)를 구현합니다.

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

다음 부모 구성 요소 예제에서 ShowDTMessage 메서드는 현재 시간이 포함된 문자열을 message에 할당하며 message의 값이 렌더링됩니다.

부모 구성 요소는 매개 변수 사전에서 콜백 메서드 ShowDTMessage를 전달합니다.

• string 키는 콜백 메서드의 이름(OnClickCallback)입니다.
• object 값은 EventCallbackFactory.Create에서 부모 콜백 메서드 ShowDTMessage에 대해 만듭니다. this C# 필드 초기화에서는 키워드(keyword) 지원되지 않으므로 매개 변수 사전에 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}.";
}

catch-all 매개 변수를 사용하지 않음

catch-all 매개 변수를 사용하지 않습니다. catch-all 매개 변수를 사용하는 경우 DynamicComponent의 모든 명시적 매개 변수가 동적 자식에 전달할 수 없는 예약어가 됩니다. DynamicComponent에 전달되는 새 매개 변수는 동일한 이름을 가진 자식 구성 요소 매개 변수를 섀도잉하기 시작하므로 호환성이 손상되는 변경 사항입니다. 호출자가 가능한 모든 동적 자식에 전달할 고정 매개 변수 이름 세트를 항상 알고 있을 것 같지는 않습니다.

상표

Rocket Lab은 Rocket Lab USA Inc.의 등록 상표입니다. SpaceX는 Space Exploration Technologies Corp.의 등록 상표입니다. United Launch Alliance와 ULA는 United Launch Alliance, LLC의 등록 상표입니다. Virgin Galactic은 Galactic Enterprises, LLC의 등록 상표입니다.

추가 리소스

• ASP.NET Core Blazor 이벤트 처리
• DynamicComponent