Cshtml 구성 요소 - 유형 슬롯

CshtmlComponent은 ASP.NET Core MVC 및 Razor Pages 프로젝트(Blazor용 아님)를 위한 광범위한 기능 세트가 있는 구성 요소 프레임워크입니다. See the GitHub repository of CshtmlComponent here .

CshtmlComponent 명명된 슬롯

CshtmlComponent는 이미 명명된 슬롯의 사용을 지원하지만 유형이 지정된 슬롯은 어떻습니까? 이 게시물은 이것이 어떻게 달성될 수 있는지 보여줄 것입니다. 이것은 광범위한 자습서가 아니므로 이미 CshtmlComponent에 어느 정도 익숙해야 합니다.

명명된 슬롯을 지원하는 CshtmlComponent에 대한 Razor 마크업은 다음과 같을 수 있습니다.

@using SampleRazorPagesApplication
@model ExampleComponent

<div class="example-component">
    <h1>
        @Model.Title
    </h1>

    <div class="example-component-action-bar">
        @Html.Raw(Model.NamedSlots["ActionBar"])
    </div>

    <div class="example-component-child-content">
        @Html.Raw(Model.ChildContent)
    </div>
</div>

명명된 슬롯이 있는 CshtmlComponent 초기화

그런 다음 구성 요소를 다음과 같이 초기화할 수 있습니다.

<ExampleComponent Title="Hello World">
    Some HTML that gets captured in Model.ChildContent.

    <CshtmlSlot Name="ActionBar">
        Some HTML that gets captured in Model.NamedSlots["ActionBar"].
    </CshtmlSlot>
</ExampleComponent>

슬롯 이름을 명시적으로 지정해야 합니다. 이것은 작동하지만 다소 성가시고 오류가 발생하기 쉽습니다. 다행히도 유형이 지정된 슬롯을 사용하면 이 문제를 매우 쉽게 해결할 수 있습니다.

입력된 슬롯 정의

유형이 지정된 슬롯을 정의하려면 생성자에서 CshtmlComponentSlot 속성을 상속하고 Name 속성을 설정하는 클래스를 생성해야 합니다.

[HtmlTargetElement("ExampleComponentActionBar"]
    public class ExampleComponentActionBar: CshtmlComponentSlot
    {
        public ExampleComponentActionBar(IHtmlHelper htmlHelper) : base(htmlHelper)
        {
            Name = "ActionBar";
        }
    }

그게 다야 예를 들어 더 나은 유지 관리를 위해 Name 값을 정적 필드로 저장할 수 있지만 반드시 필요한 것은 아닙니다.

유형 슬롯이 있는 Cshtml 구성 요소 초기화

입력된 슬롯 정의를 사용하여 이제 예제 구성 요소를 다음과 같이 초기화할 수 있습니다.

<ExampleComponent Title="Hello World">
    Some HTML that gets captured in Model.ChildContent.

    <ExampleComponentActionBar>
        Some HTML that gets captured in Model.NamedSlots["ActionBar"].
    </ExampleComponentActionBar>
</ExampleComponent>

더 이상 이름을 명시적으로 지정할 필요가 없습니다.

결론

CshtmlComponent는 명명된 슬롯과 유형이 지정된 슬롯을 모두 지원합니다. 유형이 지정된 슬롯은 유지 관리 및 리팩토링이 훨씬 쉬워지는 등 많은 이점을 제공합니다. 이 기능은 아직 실제 CshtmlComponent 문서에 문서화되어 있지 않지만 앞으로 문서화될 것입니다.

시도해보세요CshtmlComponent! MVC 및 Razor Pages 프로젝트에 유용할 수 있습니다!