Blazor RenderFragment sample

Published Aug 9, 2022 | Updated May 19, 2023 | 0 comments

아래 스크린샷을 보면 메뉴 구성을 화면 크기에 따라 다르게 표시하는 경우가 많다

이런 경우 큰 화면에서 모든 메뉴가 보여지는 경우와 작은 화면에서 Dropdown 으로 표시되는 메뉴를 중복된 코드로 작성하면 비효율적이다.

메뉴 자체에 로직이 복잡하게 들어가거나 다른 페이지에서 재사용이 빈번한 경우라면 별도 Component 로 작성하면 되겠지만, 그렇지 않다면 굳이 Component 를 별도로 생성하는건 성능상 좋지 않다고 한다

Define reusable RenderFragments in code

By MSDN (View)

그래서 RenderFramement 를 코드 단에서 정의하고 재사용 하는 방법으로 작성했다

큰 화면에서 모든 메뉴가 펼쳐 보이는 상태

작은 화면에서 일부 메뉴를 Dropdown 형태로 표시

RenderFramement 를 코드 단에 다음과 같이 작성했다.

버튼에 대한 정보를 가지는 record 를 하나 정의 하고 해당 record 를 사용하는 RenderFragment 를 다음과 같이 추가했다

    /// <summary>
    /// Button information
    /// </summary>
    /// <param name="BsColor">Bootstrap color class</param>
    /// <param name="BtnText">Button text</param>
    record struct BtnInfo(string BsColor, string BtnText);
    private RenderFragment<BtnInfo> Btn => btnInfo => __builder =>
    {
        <button type="button" class="btn btn-@(btnInfo.BsColor) p-1">
            @btnInfo.BtnText
        </button>
    };

그리고 razor 구문에서 다음과 같이 사용하면 된다.

        <div class="dropdown-menu dropdown-menu-end shadow p-1 actionmenu" style="min-width:auto">
            <div class="vstack gap-1">
                <div class="btn-group" role="group">
                    @Btn(new BtnInfo("outline-primary", "CollapseMenu1"))
                    @Btn(new BtnInfo("outline-danger", "CollapseMenu2"))
                </div>
                <div class="btn-group" role="group">
                    @Btn(new BtnInfo("outline-info", "CollapseMenu3"))
                    @Btn(new BtnInfo("outline-warning", "CollapseMenu4"))
                </div>
            </div>
        </div>
        <div class="btn-group menuExpand" role="group">
            @Btn(new BtnInfo("outline-primary", "CollapseMenu1"))
            @Btn(new BtnInfo("outline-danger", "CollapseMenu2"))
            @Btn(new BtnInfo("outline-info", "CollapseMenu3"))
            @Btn(new BtnInfo("outline-warning", "CollapseMenu4"))
        </div>

전체 소스 코드는 다음 Github 코드 중에 RenderFragement 폴더를 참조하면 된다

TAG INFORMATION

Learn more on this topic

Related Blog Posts

Join in the conversation

Leave a Comment

0 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

무료 온라인 전광판

전광판

텍스트를 입력하고 텍스트 효과 및 배경효과 를 변경해서 전체화면으로 표시할 수 있는 전광판 용도로 사용하실 수 있습니다. 각종 스포츠 및 공연 관람시 응원 용도로 사용이 가능합니다.

Carousel

여러개의 슬라이드를 추가하여 프레젠테이션 및 이미지 슬라이드 용도로 사용하실 수 있습니다. 브라우저가 포함된 IT 기기로 큰 모니터에 연결하여 매장 내 공지사항 및 메뉴소개를 이미지로 표시할 수 있습니다.

Pin It on Pinterest

Shares
Share This

Share This

Share this post with your friends!

Shares