C#/Blazor

[Blazor] Multiple CascadingParameter

kjun.kr 2022. 12. 26. 22:53
728x90

CascadingParameter로 여러 개를 받고 싶을 때 처리하는 방법입니다.

방법은 아래 처럼 태그를 한번 더 감싸주면 됩니다.

<CascadingValue Value="@stringData">
    <CascadingValue Value="@intValue">
        <MultiCascadingChild />
    </CascadingValue>
</CascadingValue>

CascadingTest.razor

@page "/cascadingtest"
<h3>CascadingTest</h3>

<h3>CascadingParent</h3>
@if (stringData != null)
{
    foreach (string example in stringData)
    {
       <h1>@example</h1>
    }
}

<CascadingValue Value="@stringData">
    <CascadingChild />
</CascadingValue>

<CascadingValue Value="@stringData">
    <CascadingValue Value="@intValue">
        <MultiCascadingChild />
    </CascadingValue>
</CascadingValue>

@code {
    private List<string>? stringData = new() { "Item 1", "Item 2" };
    protected int intValue = 10;
}

MultiCascadingChild.razor

<h3>Multi CascadingChild</h3>

@if (ExampleList != null)
{
    foreach (string example in ExampleList)
    {
        <h2>@example</h2>
    }
}
<h2>@IntExample</h2>

@code {

    [CascadingParameter]
    protected IEnumerable<string>? ExampleList { get; set; }
    [CascadingParameter]
    protected int IntExample { get; set; }
}

결과



728x90