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

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

環境

Visual Studio

Visual Studio 2019

.NET

.NET 5.0

はじめに

この Tips は「ASP.NET Core MVC のビューで Blazor WebAssembly を動かす」の知識を前提として載せていますので、ASP.NET Core MVC で Blazor Assemblry を動かす方法が分からない場合は、ますはそちらの記事を参照してください。

前回の方法だと Blazor Assembly を１つしか配置できないため、この Tips では２つ以上配置できるようにしています。

２つの Blazor Assembly を作成する

２つの Blazor Assembly がそれぞれ動いていることを確認できればよいので、Blazor Assembly の内容はなんでもかまいません。とりあえず違いが分かるように作成しておいてください。ここではプロジェクトの初期状態に対して左メニューの色を変えています。

それぞれのプロジェクトを発行してファイルを用意しておきます。

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

こちらも前の Tips を参考にプロジェクトを作成します。プロジェクトを作成したら NuGet で Microsoft.AspNetCore.Components.WebAssembly.Server `を追加しておきます。

_Layout.cshtml の修正

これは前回と同じです。

<!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 を表示するようにします。

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

HomeController.cs

// 省略

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

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

    public IActionResult Blazor2()
    {
      return View();
    }
  }
}

アクションを右クリックしてビューを追加します。２つ分行ってください。

ビューが作成されます。

まずは１つ目の Blazor Assembly の設定を行います。

Blazor1.cshtml

@{
  ViewData["Title"] = "Blazor1";
}
@section Styles {
  <base href="/Home/Blazor1/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample1.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>
}

前回と違うのは base タグの中身が <base href="/" /> から <base href="/Home/Blazor1/" /> になっているところです。

このパスを変更すると、Blazor Assembly はこのパスをルートとして dll などの各ファイルを相対パスで参照することができるようになります。

ただし、現在の Blazor Assembly の仕様では MVC のアクションで決定された URL とこの base のホストからの相対パスが一致していないと Blazor Assembly のロード時にエラーになってしまうため、コントローラー、アクションと同じパスになるように指定しています。

ちなみにこのパスの大文字小文字は影響ありますので、URL を自動的に小文字にしている場合などは小文字にする必要があります。

Blazor2.cshtml も同様に編集します。Blazor1.cshtml といくつか違うので注意してください。

Blazor2.cshtml

@{
  ViewData["Title"] = "Blazor2";
}
@section Styles {
  <base href="/Home/Blazor2/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample2.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>

@* 追加 *@
<ul>
  <li><a asp-action="Blazor1">Blazor1</a></li>
  <li><a asp-action="Blazor2">Blazor2</a></li>
</ul>

Startup.cs の変更

Blazor WebAssembly のルートのパスが変わるので、それぞれのパスで有効にします。

app.UseBlazorFrameworkFiles("/Home/Blazor1");
app.UseBlazorFrameworkFiles("/Home/Blazor2");

Blazor WebAssembly の配置

前回は発行したファイルをそのまま wwwroot に配置していましたが、それぞれのページで base タグにパスを指定したので、wwwroot に同様のパスのフォルダを作成します。

発行したファイルの wwwroot の中身をそれぞれ各フォルダにコピーします。前回と同様 index.html は不要です。

実行

実行してそれぞれのページの Blazor WebAssembly が正しく動作しているか確認してください。

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