Blazor アプリケーションでレイアウトを利用する

Blazor アプリケーションでレイアウトを利用する手順を紹介します。

概要

Blazorアプリケーションで各画面のデザインをそろえたいことがあります。ASP.NET Web Formアプリケーションではマスターページを利用するとページの共通部分をマスターファイルに集約できます。また、ASP.NET Core WebアプリケーションでRazorページを利用している場合はレイアウトファイルを利用することで同様の処理が実装できます。Blazorアプリケーションでもレイアウトを利用することでページの共通部分をまとめて実装できます。

プログラム

プロジェクトの作成

Blazorアプリケーションを作成します。Blazorアプリケーションの作成手順はこちらの記事を参照してください。プロジェクトの名称はLayoutBlazorAppとします。

フォールバックページの作成 (_Host.cshtml)

フォールバックページを作成します。Pagesフォルダ内に Razorページを作成します。ファイル名を _Host.cshtml とします。_Host.cshtmlのコードは下記です。

_Host.cshtml

@page
@namespace LayoutBlazorApp.Pages
<!DOCTYPE html>
<html lang="ja">
<head>
    <link rel="stylesheet" href="~/app.css" />
</head>
<body>
    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </app>
</body>
</html>

_Imports.razor ファイルの作成

_Imports.razorファイルを作成します。レイアウトページを参照できるよう @using (プロジェクト名).Shared を追加します。

_Imports.razor

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using LayoutBlazorApp.Shared

スタイルシートの追加

フォールバックページで参照している app.css ファイルを作成します。ソリューションエクスプローラーで "wwwroot" フォルダを作成します。作成したwwwrootフォルダ内にapp.cssファイルを作成します。ファイルの内容は下記です。

app.css

.Header{
    background-color:#def1ff;
    border:1px solid #12a1ff;
}

.Footer {
    background-color: #e5e5e5;
    border: 1px solid #808080;

}

画面の作成 (razorコンポーネント)

Pagesフォルダ内にメイン画面のrazorコンポーネントを作成します。"Main.razor" の名称でrazorコンポーネントを作成します。Main.razorファイルは下記のコードを記述します。
@page "/Main" を記述していますので、(アプリケーションルートURL)/Main のURLにアクセスした場合に、このページへルーティングします。

Main.razor

@page "/Main"
<h3>Main</h3>
<p>メイン画面です。</p>
@code {

}

レイアウトの作成 (razorコンポーネント)

画面の共通部分となるレイアウトを作成します。ソリューションエクスプローラーでプロジェクト直下に "Shared" フォルダを作成します。

作成したフォルダ内にrazorコンポーネントを作成します。ファイル名を "Layout.razor" とします。

Layout.razor ファイルは下記のコードを記述します。

Layout.razor

@inherits LayoutComponentBase

<div class="Header">ヘッダ</div>
@Body
<div class="Footer">フッタ</div>
@code {

}

app.razor ファイルの編集

App.razor ファイルを編集してレイアウトを利用する設定にします。
RouteView タグのDefaultLayout属性に使用するレイアウトファイルのタイプを指定します。今回 Layout.razor ファイルをレイアウトファイルとして作成していますので、DefaultLayout属性には @typeof(Layout) を指定しています。
また、ルーティング先が見つからなかった場合のエラー画面にもレイアウトを反映させるため、LayoutView タグのLayout属性にも@typeof(Layout) を指定しています。

App.razor

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

Startup.csの実装

Startup.csを下記のコードに変更します。
コードの詳細はこちらの記事を参照してください。スタイルシートが参照できるようにConfigureメソッド内には app.UseStaticFiles(); を記述します。

Starup.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace LayoutBlazorApp
{
  public class Startup
  {
    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
      services.AddRazorPages();
      services.AddServerSideBlazor();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
      if (env.IsDevelopment()) {
        app.UseDeveloperExceptionPage();
      }

      app.UseStaticFiles();
      app.UseRouting();

      app.UseEndpoints(endpoints =>
      {
        endpoints.MapBlazorHub();
        endpoints.MapFallbackToPage("/_Host");
      });
    }
  }
}

すべて準備できると、ソリューションエクスプローラは下図の状態になります。

実行結果

プロジェクトを実行します。Webブラウザが起動し、アプリケーションルートのURLが表示されます。アプリケーションルートに対するルーティングの設定が無いため、app.razorファイルに記述された "Sorry, there's nothing at this address." のメッセージが表示されます。表示されるページにはヘッダとフッタが表示されており、Layout.razorのレイアウトが適用されていることが確認できます。