演習 - 重複を削減する Blazor レイアウトをコードに追加する

完了

Blazing Pizza アプリにページを追加したときに、ナビゲーション HTML がコピーされていることに気付いたかもしれません。 Blazor には、1 か所でこの種類のページ スキャフォールディングを作成するための組み込みのサポートが備わっています。 これは Blazor レイアウトと呼ばれています。

この時点で、いくつかのページに、重複する HTML が多数追加されています。 次に、ナビゲーションと会社情報を 1 か所で追加できるように、アプリ全体のレイアウトを作成します。

この演習では、 MainLayout コンポーネントを作成します。 このレイアウトを特定のページのために使用し、それをアプリ全体の既定のレイアウトにする方法を確認します。

MainLayout コンポーネントを追加する

1. Visual Studio Code のメニューで、[ファイル] >[新しいファイル] を選択します。

2. ファイルに MainLayout.razor という名前を付けます。 必ず 共有 ディレクトリにファイルを保存してください。

3. 新しいファイルで、レイアウト コンポーネントを作成し、任意のページからナビゲーション HTML をコピーします。

   @inherits LayoutComponentBase
   
   <div id="app">
   
     <header class="top-bar">
       <a class="logo" href="">
         <img src="img/logo.svg" />
       </a>
   
       <NavLink href="" class="nav-tab" Match="NavLinkMatch.All">
         <img src="img/pizza-slice.svg" />
         <div>Get Pizza</div>
       </NavLink>
   
       <NavLink href="myorders" class="nav-tab">
         <img src="img/bike.svg" />
         <div>My Orders</div>
       </NavLink>
     </header>
   
     <div class="content">
       @Body
     </div>
   
     <footer>
       &copy; Blazing Pizza @DateTime.UtcNow.Year
     </footer>
   
   </div>
   

   このレイアウトでは 、_Host.cshtml のマークアップの一部が使用されるため、そこから削除する必要があります。

4. Ctrl+S キーを押して変更を保存します。

5. ファイルエクスプローラーで、ページを展開します。 次に、_Host.cshtml を選択してください。

6. Blazor アプリ コンポーネントを囲む要素を、次のコードから変更します。

   <div id="app">
       <div class="content">
           <component type="typeof(App)" render-mode="ServerPrerendered" />
       </div>
   </div>
   

   このコードにします。

   <component type="typeof(App)" render-mode="ServerPrerendered" />
   

ページ コンポーネントで Blazor レイアウトを使用する

1. ファイルエクスプローラーで、ページを展開します。 次に、Index.razor を選択します。

2. top-bar div 要素を削除して、@page ディレクティブの下に、新しいレイアウトへの参照を追加します。

   @layout MainLayout
   

3. 古い <h1>Blazing Pizzas</h1> 要素も削除しましょう。 レイアウトに上部バーが表示されるようになったため、これは不要です。

4. Visual Studio Code で F5 キーを押します。 または、[ 実行 ] メニューの [ デバッグの開始] を選択します。

   

   新しいホーム ページには、自動的に更新される今年の著作権フッターが含まれています。 このレイアウトを使用していないページの外観を確認するには、[注文] を選択 します。 または、(http://localhost:5000/help) のような無効のページに移動します。 現時点では、404 ページが見つかりませんはブランド化していません。

   

5. アプリを停止するには、 Shift + F5 を選択します。

すべてのページを新しいレイアウトに更新する

ここで、アプリ内のすべてのページに @layout MainLayout ディレクティブを追加できますが、Blazor にはより優れたソリューションがあります。 最初に、 Index.razor に追加したレイアウト ディレクティブを削除します。

1. Index.razor コンポーネントで、@layout MainLayoutを削除します。
2. ファイルエクスプローラーで、ページを展開します。 次に、MyOrders.razor を選択します。
3. top-bar div 要素を削除します。
4. ファイルエクスプローラーで、ページを展開します。 次に、 OrderDetail.razor を選択します。
5. top-bar div 要素を削除します。
6. ファイルエクスプローラーで、ページを展開します。 次に、 Checkout.razor を選択します。
7. top-bar div 要素を削除します。

App.razor コンポーネントでは、ページのルーティング方法を変更できるだけでなく、既定のレイアウトを使用するように Blazor に指示することもできます。

1. エクスプローラーで、[ App.razor] を選択します。

2. DefaultLayout="typeof(MainLayout)" 要素に宣言を追加します。

3. Layout="typeof(MainLayout)" にを追加します。

4. App.razor は次の例のようになります。

   <Router AppAssembly="typeof(Program).Assembly" Context="routeData">
       <Found>
           <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
       </Found>
       <NotFound>
           <LayoutView Layout="typeof(MainLayout)">
               <div class="main">Sorry, there's nothing at this address.</div>
           </LayoutView>
       </NotFound>
   </Router>
   

新しいレイアウトをテストする

1. Visual Studio Code で F5 キーを押します。 または、[ 実行 ] メニューの [ デバッグの開始] を選択します。

   

   既定のレイアウトを使用する利点は、それをすべてのページに適用し、"見つかりません" ページのレイアウト ビューに使用できることです。

2. アプリを停止するには、 Shift + F5 を選択します。

アプリのために行う必要がある作業は、このモジュールで終了しました。 フォームや検証を処理する方法を確認したい場合は、このラーニング パスの次のモジュールを完了してください。