ASP.NET 핵심 Blazor 섹션

이 문서에서는 자식 Razor 구성 요소에서 구성 요소의 Razor 콘텐츠를 제어하는 방법을 설명합니다.

Blazor 섹션

자식 Razor 구성 요소에서 Razor 구성 요소의 콘텐츠를 제어하려면 다음 기본 제공 구성 Blazor 요소를 사용하는 섹션을 지원합니다.

• SectionOutlet: 구성 요소에서 SectionContent 제공하는 콘텐츠를 일치 SectionName 또는 SectionId 인수로 렌더링합니다. 두 개 이상의 SectionOutlet 구성 요소가 같 SectionName 거나 SectionId같을 수 없습니다.

• SectionContent: 일치하는 SectionName 구성 요소 또는 SectionId.를 사용하여 콘텐츠를 RenderFragment SectionOutlet 구성 요소에 제공합니다. 여러 SectionContent 구성 요소가 동일하거나 SectionId일치하는 SectionName SectionOutlet 구성 요소가 마지막으로 렌더링된 SectionContent콘텐츠를 렌더링합니다.

섹션은 레이아웃과 중첩된 부모-자식 구성 요소 모두에서 사용할 수 있습니다.

전달된 SectionName 인수는 모든 형식의 대/소문자를 사용할 수 있지만 설명서에서는 HTML 요소 ID에 대한 일반적인 대/소문자 선택인 케밥 대/소문자(예 top-bar: )를 채택합니다. SectionId 는 정적 object 필드를 수신하며 C# 필드 이름(예: TopbarSection)에 대해 항상 Pascal 대/소문자를 지정하는 것이 좋습니다.

다음 예제에서 앱의 주 레이아웃 구성 요소는 앱 구성 요소에 대한 Counter 증분 카운터 단추를 구현합니다.

섹션의 네임스페이스가 파일에 없 _Imports.razor 으면 다음을 추가합니다.

@using Microsoft.AspNetCore.Components.Sections

MainLayout 구성 요소(MainLayout.razor)에서 구성 요소를 배치 SectionOutlet 하고 문자열 SectionName 을 매개 변수에 전달하여 섹션의 이름을 나타냅니다. 다음 예제에서는 섹션 이름을 top-bar사용합니다.

<SectionOutlet SectionName="top-bar" />

Counter 구성 요소(Counter.razor)에서 구성 요소를 만들고 SectionContent 일치하는 문자열(top-bar)을 해당 SectionName 매개 변수에 전달합니다.

<SectionContent SectionName="top-bar">
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</SectionContent>

구성 요소에 Counter 액세스할 /counterMainLayout 때 구성 요소는 구성 요소가 배치된 구성 요소 SectionOutlet 에서 Counter 증분 개수 단추를 렌더링합니다. 다른 구성 요소에 액세스하면 증가 횟수 단추가 렌더링되지 않습니다.

명명된 섹션을 사용하는 대신 매개 변수와 함께 정적 object 섹션을 SectionId 전달하여 섹션을 식별할 수 있습니다. 다음 예제에서는 앱의 Counter 기본 레이아웃에서 앱 구성 요소에 대한 증분 카운터 단추도 구현합니다.

다른 SectionContent 구성 요소가 실수로 이름과 SectionOutlet일치하지 않도록 하려면 개체 SectionId 매개 변수를 전달하여 섹션을 식별합니다. RCL(클래스 라이브러리)을 디자인할 Razor 때 유용할 수 있습니다. SectionOutlet RCL에서 개체 참조 SectionId 를 사용하고 소비자가 일치하는 SectionId 개체를 사용하여 구성 요소를 배치 SectionContent 하는 경우 RCL 소비자가 다른 SectionContent 구성 요소를 구현할 때 실수로 이름이 일치할 수 없습니다.

다음 예제에서는 섹션 이름 대신 개체 참조를 사용하여 앱의 Counter 기본 레이아웃에서 앱 구성 요소에 대한 증분 카운터 단추를 구현합니다.

블록의 TopbarSection 구성 요소에 MainLayout 정적 object 을 추가합니다@code.

@code {
    internal static object TopbarSection = new();
}

MainLayout 구성 요소의 Razor 태그에서 구성 요소를 배치 SectionOutlet 하고 매개 변수에 SectionId 전달 TopbarSection 하여 섹션을 나타냅니다.

<SectionOutlet SectionId="TopbarSection" />

SectionContent 증분 개수 단추를 렌더링하는 구성 요소를 앱의 Counter 구성 요소에 추가합니다. 구성 요소의 MainLayout TopbarSection 섹션 정적 object 을 SectionId (MainLayout.TopbarSection)로 사용합니다.

Counter.razor의 경우

<SectionContent SectionId="MainLayout.TopbarSection">
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</SectionContent>

구성 요소에 Counter 액세스 MainLayout 하면 구성 요소는 구성 요소가 배치되는 SectionOutlet 증분 개수 단추를 렌더링합니다.

다른 Blazor 기능과의 섹션 상호 작용

섹션은 다음과 같은 방법으로 다른 Blazor 기능과 상호 작용합니다.

• 계단식 값 은 구성 요소에 의해 SectionContent 콘텐츠가 정의된 섹션 콘텐츠로 흐릅니다.
• 처리되지 않은 예외는 구성 요소 주위에 정의된 오류 경계에 SectionContent 의해 처리됩니다.
• Razor 스트리밍 렌더링을 위해 구성된 구성 요소는 스트리밍 렌더링을 사용하도록 구성 요소에서 제공하는 SectionContent 섹션 콘텐츠도 구성합니다.