CshtmlComponent V2.2.0 - 참조 캡처

CshtmlComponent은 고급 기능 세트가 있는 ASP.NET Core용 구성 요소 라이브러리입니다. 이러한 기능은 MVC 또는 Razor Pages 프로젝트에서 개발자 생산성을 크게 향상시킵니다. 자세한 내용은 CshtmlComponent documentation을 확인하십시오.

이전에는 CshtmlComponent를 사용하여 다음과 같이 Razor 코드를 작성할 수 있었습니다.

<ExampleComponent Title="Some title" font-size="1.2rem" background-color="rgba(0, 0, 255, 0.1)">
    <div>
        Some custom HTML content.
        <Box>
            Supports nested components.
        </Box>
    </div>
    <CshtmlSlot Name="SlotName0">
        Some custom HTML content within a named slot. The parent component decides where
        this content is placed.
    </CshtmlSlot>
    <CshtmlSlot Name="SlotName1">
        Additional custom HTML content within a second named slot.
        <Box>
            Supports nested components.
        </Box>
    </CshtmlSlot>
</ExampleComponent>

구성 요소 자체는 항상 자체 속성에 액세스할 수 있지만 구성 요소 자체 컨텍스트 외부의 속성에 액세스하려면 어떻게 해야 할까요? 예를 들어, 일부 JS 코드에서 사용하려면 생성된 ID 값을 가져와야 할 수 있습니다. 이것은 이제 다음과 같이 구성 요소 참조를 캡처할 수 있는 CshtmlComponent V2.2.0에서 가능합니다.

<ExampleComponent Title="Some title" font-size="1.2rem" background-color="rgba(0, 0, 255, 0.1)">
    <div>
        Some custom HTML content.

        @{ 
            // Assign a variable to component reference. 
            // The Box component inherits CshtmlComponentReferenceableBase<Box> (a class that inherits CshtmlComponentBase), 
            // which implements this logic. Useful if component properties have to be used outside the component's own context.

            // This is not the default behavior due to the mandatory, but slightly confusing syntax: 
            // public Box : CshtmlComponentReferenceableBase<Box> ....

            var boxReference = new CshtmlComponentReference<Box>();
        }
        <Box Reference="boxReference">
            Supports nested components.
        </Box>

        The fontsize of the referenced box is: @boxReference.Component.FontSize
    </div>
    <CshtmlSlot Name="SlotName0">
        Some custom HTML content within a named slot. The parent component decides where
        this content is placed.
    </CshtmlSlot>
    <CshtmlSlot Name="SlotName1">
        Additional custom HTML content within a second named slot.
        <Box>
            Supports nested components.
        </Box>
    </CshtmlSlot>
</ExampleComponent>

CshtmlComponent 문서: https://cshtml-component.acmion.com
CshtmlComponent GitHub: https://github.com/Acmion/CshtmlComponent
CshtmlComponent Nuget: https://www.nuget.org/packages/Acmion.CshtmlComponent/