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

4 分

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

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

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

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

Visual Studio Code のメニューで、[ファイル]>[新しいテキストファイル] を選択します。
言語として ASP.NET Razor を選択します。

レイアウトコンポーネントを作成し、任意のページからナビゲーション 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 のマークアップの一部を使用しているため、そこからそれを削除する必要があります。

Ctrl+S キーを選択して、変更を保存します。
ファイル名には MainLayout.razor を使用します。このファイルは、Shared ディレクトリに保存するようにしてください。
エクスプローラーで、[ページ] を展開します。次に、_Host.cshtml を選択します。

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

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

このコードにします。

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

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

エクスプローラーで、[ページ] を展開します。次に、Index.razor を選択します。
top-bar div 要素を削除して、@page ディレクティブの下に、新しいレイアウトへの参照を追加します。
```
@layout MainLayout
```
古い <h1>Blazing Pizzas</h1> 要素も削除しましょう。レイアウトに上部バーが表示されるようになったため、これは不要です。
Visual Studio Code で F5 を選択します。または [実行] メニューから [デバッグの開始] を選択します。

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

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

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

Index.razor コンポーネントで、@layout MainLayout を削除します。
エクスプローラーで、[ページ] を展開します。次に、MyOrders.razor を選択します。
top-bar div 要素を削除します。
エクスプローラーで、[ページ] を展開します。次に、OrderDetail.razor を選択します。
top-bar div 要素を削除します。
エクスプローラーで、[ページ] を展開します。次に、Checkout.razor を選択します。
top-bar div 要素を削除します。

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

エクスプローラーで、App.razor を選択します。
RouteView 要素に DefaultLayout="typeof(MainLayout)" 宣言を追加します。
LayoutView に Layout="typeof(MainLayout)" を追加します。

これで 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>

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

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

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

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

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

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

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

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

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

フィードバック

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