ASP.NET Core Blazor WebAssiembly-구성 요소 및 라우팅(화면 마이그레이션)[프런트엔드 개발자 전용]

안녕하세요!
이 글은 ASP.NET Core Blazor(이하 Blazor) 구성 요소의 기초와 화면 이동에 대해 설명합니다!

구성 요소

구성 요소는 부품이나 구성 요소를 나타내는 단어이다
Blazor에서 화면의 구성 부품으로 구성 요소를 만들고 설정을 통해 화면을 구축한다.
이전 문장에서 나는 구조의 구축에 대해 해설을 진행하였다
이 글은 지난번에 구축된 구조에 대해 구성 요소의 제작부터 정의까지의 절차를 설명한다.

구성 요소 생성 프로그램

머리글 어셈블리 생성하기

우선 눈썹 부품을 만들어 보세요.
구성 요소를 생성하려면 Visual Studio > 추가 (D) > Razor 구성 요소를 마우스 오른쪽 단추로 클릭합니다.

어셈블리 이름을 설정하고 추가(A)를 클릭합니다.

위 단계에 따라 어셈블리를 생성합니다.
다음은 기본적으로 구성 요소를 만드는 코드입니다.

HeaderComponent.razor

<h3>HeaderComponent</h3>

@code {

}

메뉴 및 바닥글 구성 요소 생성하기

메뉴 및 바닥글 구성 요소도 생성할 수 있습니다.

MenuComponent.razor

<ul>
    <li>Top</li>
    <li>PageA</li>
    <li>PageB</li>
</ul>

@code {

}

FooterComponent.razor

<h3>FooterComponent</h3>

@code {

}

생성된 어셈블리를 레이아웃으로 설정

그러면 지난번에 구축된 구조에서 이번에 제작된 부품을 정의합니다.

수정 전(마지막으로 생성한 배치)

@inherits LayoutComponentBase

<div class="page">
    <!-- ヘッダー -->
    <header class="header">
        <h3>ヘッダー - Blazorレイアウトサンプル</h3>
    </header>


    <!-- サイドメニュー(左) -->
    <div class="menu">
        <ul>
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
        </ul>
    </div>

    <!-- コンテンツ -->
    <div class="content">
        @Body
    </div>

    <!-- フッター -->
    <footer class="footer">
       フッター
    </footer>

</div>

수정 후 (본문에서 만든 구성 요소 정렬)

@inherits LayoutComponentBase

<div class="page">
    <!-- ヘッダー -->
    <header class="header">
         <!-- 作成したヘッダーコンポーネントを配置 -->
        <HeaderComponent></HeaderComponent>
    </header>


    <!-- サイドメニュー(左) -->
    <div class="menu">
         <!-- 作成したメニューコンポーネントを配置 -->
        <MenuComponent></MenuComponent>
    </div>

    <!-- コンテンツ -->
    <div class="content">
        @Body
    </div>

    <!-- フッター -->
    <footer class="footer">
         <!-- 作成したフッターコンポーネントを配置 -->
        <FooterComponent></FooterComponent>
    </footer>

</div>

라우팅(화면 마이그레이션)

다음은 라우팅(화면 마이그레이션)을 구현합니다.
URL에 해당하는 구성 요소는 레이아웃에 정의된 레이블@Body 레이블의 위치에 표시됩니다.
ASP.NET Core Blazor의 라우팅

루트(화면 이동)에 대응하는 구성 요소 제작 방법

라우팅(화면 마이그레이션)에 해당하는 구성 요소라도 구성 요소 제작 단계는 구성 요소 제작 단계에서 설명한 단계와 동일합니다.
어셈블리를 생성한 후 URL 매핑을 정의합니다.

@page를 통해 URL 매핑 설정

URL 매핑은 @page 태그로 정의됩니다.
예를 들어, 다음 코드는/와/Top을 지정할 때 표시되는 코드입니다.
@page 단일 또는 여러 개를 정의할 수 있습니다.

@page "/"
@page "/Top"

<h3>TopPage</h3>

@code {

}

페이지 마이그레이션 방법

다음에 구성 요소를 만드는 데 사용할 링크를 설정합니다.
표준 HTML 태그도 정의할 수 있지만 이 기사는 Blazor 표준에서 제공하는 NavLink 구성 요소를 사용합니다.

NavLink 설정

이 기사에서 작성한 메뉴 구성 요소에서 NavLink를 다음과 같이 설정합니다.

<ul>
    <li>
        <NavLink href="./Top" Match="NavLinkMatch.Prefix">
            Top
        </NavLink>
    </li>
    <li>
        <NavLink href="./PageA" Match="NavLinkMatch.Prefix">
            PageA
        </NavLink>
    </li>
    <li>
        <NavLink href="./PageB" Match="NavLinkMatch.Prefix">
            PageB
        </NavLink>
    </li>
</ul>

@code {

}

href 속성에서 이동 목적지의 URL을 설정합니다.
또한 Match 속성을 설정한 후 현재 표시된 URL에 대해 CSS를 설정할 수 있습니다.
기본적으로 "active"클래스를 부여하기 때문에 "active"클래스를 정의해서 스타일을 설정할 수 있습니다.

li .active {
    text-decoration : solid;
    font-weight : bold;
    text-decoration-line : underline;
}

기본적으로 부여된 "active"클래스 이름도 NavLink 구성 요소의 ActiveClass 속성을 정의해서 변경할 수 있습니다.
ActiveClass

본문에서 만든 응용 프로그램

상기 절차에 따라 화면 이동을 실현하는 응용은 다음과 같다.

총결산

이 기사에서는 Blazor 응용 프로그램의 구성 요소와 화면 이동에 대해 설명하였다.
다음 보도에서는 데이터 귀속에 관한 글을 쓸 계획이다.

개발에 대한 모든 문의는 저에게 맡기세요!

일본 내에서는 플랫폼별 특별기술 훈련과 개발을 전반적으로 지원한다.
이어 "구기술과 지원이 끝나는 플랫폼에서 벗어날 필요가 있지만, 목적지를 옮기는 플랫폼과 틀에 대한 검토는 진전이 없고 견해도 없다"고 덧붙였다.
이어 "새로운 개발 기술을 도입하고 싶지만 자사 내에는 전문가가 없다"며 "일본어 자원도 적어 개발을 추진할 수 있을지 모르겠다"고 덧붙였다.
이어 "당사 구성원들은 개발을 추진하려고 하지만 지금까지 외부 공급업체에 의존해 개발해 도구와 기술에 대한 이해가 부족하다"고 덧붙였다.
"UI를 새로 고치고 싶어요. UI 디자인과 UI/UX에 대한 논의 방법을 모르겠어요. 외부 디자인 회사에 의뢰하면 개발이 어렵지 않을까 걱정이에요."
이런 상담을 받다.
문의는 언제든지 문의여기.하십시오.