ASP.NET Core MVC のビューで Blazor WebAssembly を動かす

ページ更新日 : 2022年7月17日日曜日

ページ作成日 : 2022年3月30日水曜日

環境

Visual Studio

Visual Studio 2019

.NET

.NET 5.0

はじめに

Blazor WebAssembly はクライアントの技術であるため、どのような仕組みで Web サーバーが動いていても問題ありません。ですが、WebAssembly をクライアントに提供するためには最低限サーバー側の設定が必要となります。ここではサーバープログラムを ASP.NET Core MVC として Blazor WebAssembly を動かしてみます。

Blazor WebAssembly の作成

今回 Blazor WebAssembly が動くことを確認できれば良いのでプロジェクトを作成したときの構成のままとします。

プロジェクト名やソリューション名は任意です。

追加情報画面で表示される「ASP.NET Core でホストされた」は MVC としても動作されることはできますが、作成されるプロジェクトは API サーバーに近い形なのでここではチェックしません。

Blazor WebAssembly の発行

Blazor WebAssembly を ASP.NET Core MVC プロジェクトに配置するためにファイルの発行を行います。

プロジェクトを右クリックして「発行」を選択します。

「フォルダ―」を選択します。

発行先はデフォルトのままとします。

発行画面が表示されます。いろいろ設定はできますが、ここではデフォルトのままで「発行」ボタンをクリックします。

発行が開始され、正常に完了するまで待ちます。フォルダパスが長いと失敗する場合がありますので注意してください。

指定したフォルダにファイルが作成されていることを確認できます。相対パスで指定している場合はプロジェクトからの相対パスが発行先となります。

ASP.NET Core MVC プロジェクトの作成

続いて ASP.NET Core MVC のプロジェクトを作成します。Visual Studio を別々に開くと面倒なので、Blazor WebAssembly のソリューションの中に作成します。今回２つのプロジェクトは連動させていないので別々に作成しても問題ありません。

プロジェクト名は任意です。その他の設定はデフォルトのままとしています。

Blazor 側は開発を完了しているものとするので ASP.NET Core MVC 側のプロジェクトをスタートアップとしておきます。

Blazor Assembly 用のビューの作成

この辺りは実際に作成しているプロジェクトによって変わりますので、そのプロジェクトに合わせて修正してください。ここではサンプルプロジェクトの構成を前提に修正します。

基本的には Blazor Assembly を発行したときに作成される index.html に近い形になるように修正します。

_Layout.cshtml の修正

Blazor Assembly の CSS を参照したいので _Layout.cshtml に直接書いてもいいのですが、なるべく対象ページにのみ適用させたいので CSS へのリンクを各ページに記述できるように RenderSectionAsync を追加して拡張できるようにします。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>@ViewData["Title"] - AspNetCoreMvc</title>
  <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="~/css/site.css" />
  @* 追加 *@
  @await RenderSectionAsync("Styles", required: false)
</head>
<body>
  <!-- 以下同じなので省略 -->

Blazor Assembly 用のページ追加

Blazor Assembly を表示させる専用のページを追加します。ASP.NET Core MVC の通常のページ追加と手順は同じです。

HomeController に以下のアクションを追加します。サーバー側は特に何もしないのでビューを返すだけです。

HomeController.cs

// 省略

namespace AspNetCoreMvc.Controllers
{
  public class HomeController : Controller
  {
    // 省略

    // 追加
    public IActionResult Blazor()
    {
      return View();
    }
  }
}

アクションを右クリックしてビューを追加します。

バインドするものは特にないのでそのまま追加します。

ビューが作成されます。

Blazor Assembly 発行時に生成された index.html を参考に以下のように作り変えます。

Blazor.cshtml

@{
  ViewData["Title"] = "Blazor";
}
@section Styles {
  <base href="/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample.styles.css" rel="stylesheet" />
}

<div id="app">Loading...</div>

<div id="blazor-error-ui">
  An unhandled error has occurred.
  <a href="" class="reload">Reload</a>
  <a class="dismiss">🗙</a>
</div>

@section Scripts {
  <script src="_framework/blazor.webassembly.js"></script>
}

Blazor のページに移動できるようにリンクを追加します。

index.cshtml

@{
  ViewData["Title"] = "Home Page";
}

<div class="text-center">
  <h1 class="display-4">Welcome</h1>
  <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

@* 追加 *@
<a asp-action="Blazor">Blazor</a>

Microsoft.AspNetCore.Components.WebAssembly.Server の参照追加

Startup.cs に必要なコードを自分で記述すれば不要ですが、楽をするために Microsoft.AspNetCore.Components.WebAssembly.Server を NuGet から取得します。

「依存関係」を右クリックして「NuGet パッケージの管理」を選択します。

「管理」タブを選択し、検索欄に「Microsoft.AspNetCore.Components.WebAssembly.Server」を入力します。

同名のパッケージが表示されるのでインストールします。

パッケージが追加されたことを確認します。

Startup.cs の変更

app.UseHttpsRedirection(); の行の次の行に以下のコードを挿入します。

app.UseBlazorFrameworkFiles();

Blazor WebAssembly の配置

基本的には発行した Blazor WebAssembly の wwwroot のフォルダをそのまま ASP.NEt Core の wwwroot フォルダにいれて問題ないですが、index.html は不要になるので削除してください。また、favicon.ico はダブっていますので、どちらのアイコンを使うか決めておいてください。

PWA でリリースする場合についてですが、wwwroot フォルダ内のファイルで除外したファイル (index.html など) がある場合は、同じく wwwroot フォルダ内にある service-worker-assets.js をテキストエディタで開き除外したファイルのレコードを削除する必要があります。そうでない場合 Web 画面を開いたときに内部エラーが発生する場合があります。

Blazor アプリを発行する際にあらかじめいらないファイルをプロジェクトから除外しておけばこの手作業は不要です。

また PWA の場合、https 環境でないと内部エラーが発生します。PWA としてインストールすることはできません。

実行確認

ASP.NET Core MVC プロジェクトをデバッグ実行します。 Blazor のページにアクセスし、Blazor Assembly のレイアウトがページ内に表示されることを確認します。左メニューを選択し、各機能が動作することを確認します。

URL について

ページ内に表示されている Blazor Assembly の左メニューをクリックすると、URL が変化することが分かると思います。この動作は ASP.NET Core MVC が想定している URL の動作に則っていないため、可能ならば Blazor Assembly 側は URL が変化しないような動作で作るのが好ましいです。

Blazor ページを開いたとき

Counter メニューをクリックしたとき

更新履歴

2022/7/12

発行した Blazor アプリのファイル配置で不要なファイルを除外するときの注意点を追記。

2022/3/30

初版

Blazor WebAssembly で作成したアプリを IIS に配置する

ASP.NET Core MVC で複数の Blazor WebAssembly を配置する