Generic Projection

Content Projection은 일반 UI에 관한 것이고,

Generic Projection은 Content Projection을 더욱 확장하며,

UI와 관련된 Generic UI 및 Generic 데이터에 관한 것입니다.

 

https://blazorschool.com/tutorial/blazor-server/dotnet6/generic-projection-351543

 

 

RenderFragment<T> 형태로 template 을 정의 하고

(T 는 IPerson 의 Concreate class 인 Teacher 와 Student)

List<IPerson> 을 통해 InputData 의 data 들을 알맞은 Template 에 맞게 할당해서 처리 한다. 

 

Data/IPerson.cs

public interface IPerson
{
    public string Name { get; set; }
}
public class Student:IPerson
{
    public string Name { get; set; } = "";
}
public class Teacher : IPerson
{
    public string Name { get; set; } = "";
}

 

Pages/Child.razor

@using BlazorTutorial.Data

<div class="border border-success border-3 p-3">
    <h3>Child</h3>
    @foreach (var item in InputData)
    {
        <div class="border border-3 border-warning p-3 my-3">
            
            @if (item is Teacher dog)
            {
                @TeacherTemplate?.Invoke(dog)
            }
            @if (item is Student student)
            {
                @StudentTemplate?.Invoke(student)
            }

        </div>
    }
</div>

@code {
    [Parameter]
    public RenderFragment<Teacher>? TeacherTemplate { get; set; }
    [Parameter]
    public RenderFragment<Student>? StudentTemplate { get; set; }

    [Parameter]
    public List<IPerson> InputData { get; set; } = new();
}

Pages/Child.razor

Parent class 는 TeacherTemplate 과 StudentTemplate 을 통해 Template 에 값을 전달 한다. 

InputData 에 Animals 를 전달하고 (List<IPerson>

@page "/interaction/generic-projection"
@using BlazorTutorial.Data

<div class="border border-3 border-primary p-3">
    <h3>Parent</h3>
    <Child InputData="Persons" Context="OutputFromProjection">
        <TeacherTemplate>
            <div>My name is @OutputFromProjection.Name, I am a teacher.</div>
        </TeacherTemplate>
        <StudentTemplate>
            <div>My name is @OutputFromProjection.Name, I am a student.</div>
        </StudentTemplate>
    </Child>
</div>

@code {
    public List<IPerson> Persons { get; set; } = new()
    {
        new Teacher() { Name = "Space Rich King" },
        new Student() { Name = "World Rich King" },
        new Student() { Name = "Musk" },
    };
}

실행

 

관련영상

https://youtu.be/6C8GBYYNg0o