C# Blazor Multiple CascadingParameter

C# Blazor Multiple CascadingParameter

 

이전 포스팅에서 CascadingParameter 에 대해서알아봤습니다.

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

먼저 아래처럼 CascadingParameter 를 3개 선언합니다.

<h3>Multi CascadingChild</h3>

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

@code {

    [CascadingParameter]
    protected IEnumerable<string>? ExampleList { get; set; }
    [CascadingParameter]
    protected int IntExample { get; set; }
    [CascadingParameter(Name = "CascadeParam2")]
    protected int IntExample2 { get; set; }
}

화면에서 사용할때는 아래처럼 사용합니다.

타입이 다르다면 이름을 이정하지 않고도 처리 가능하며 타입이 같은 경우는 Name 을 지정하면됩니다.

@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">
        <CascadingValue Value="@intValue2" Name="CascadeParam2">
            <MultiCascadingChild />
        </CascadingValue>
    </CascadingValue>
</CascadingValue>

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