[Blazor] dialog페이지 컴포넌트 위에 컴포넌트 출력 하기(세션5)

강의제목 : 5. ASP.NET Core Blazor 소개 및 지원되는 플랫폼

blazor 특징

1. 페이지 하나 하나가 컴포넌트로 구성됨.
   다른 페이지위에 랜더링이 가능 하다.
2. @page 지시문을 사용 하여 라우팅 할 수 있다.
3. 확장자가 .razor로 끝나며 HTML 테그와 c# 코드를 같이 작성 할 수 있고
   index.razor , index.cs 로 HTML 테그와 c# 코드를 분리 해서 작성 할 수 도 있다.
4. JavaScript interop을 사용 하여 javascript도 사용 가능 하다.

---

index 페이지에 dialog페이지 랜더링

.razor페이지 코드

• dailog 페이지

<h3>Dialog</h3>



<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p><!--부모로 받은 컴포넌트를 해당 위치에 랜더링-->
        <button @onclick="OnYes">Yes!</button>
    </div>
</div>
<br />
@text

@code {
    private string text = string.Empty;

    //호출시 매개변수로 받음.
    [Parameter]
    public string Title { get; set; }

    //호출시 매개변수로 컴포넌트를 받음.
    [Parameter]
    public RenderFragment ChildContent { get; set; }


    private void OnYes()
    {
        text = "Write to the console in C#! 'Yes' button selected.";
    }
}

• index 페이지

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />

<hr />
<Dialog Title="제목이야">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

<hr />
<Dialog Title="제목이야2"></Dialog>

결과 화면

끄읕