BlazorWebAssembly にて Modal 表示する

前提・実現したいこと

Blazor WebAssembly において Modal 表示を行いたい

発生している問題・エラーメッセージ

単純に方法がわかりません。
たとえば Pages/Index.razor にどのように書けば Modal 表示ができるのかをご教授いただきたいと思っています。またはどこか参考サイトがあれば教えていただきたく思います。

試したこと

１．
Bootstrap Modal
こちらのページのコードをそのまま貼り付けたりしてみましたが何も表示されません。
たとえば以下などをIndex.razorに貼り付けても何も表示されません。

html
1<div class="modal" tabindex="-1" role="dialog">
2  <div class="modal-dialog" role="document">
3    <div class="modal-content">
4      <div class="modal-header">
5        <h5 class="modal-title">Modal title</h5>
6        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
7          <span aria-hidden="true">&times;</span>
8        </button>
9      </div>
10      <div class="modal-body">
11        <p>Modal body text goes here.</p>
12      </div>
13      <div class="modal-footer">
14        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
15        <button type="button" class="btn btn-primary">Save changes</button>
16      </div>
17    </div>
18  </div>
19</div>

２．
Templated Components in Blazor WebAssembly (Modal Popup) [Blazor Topics] | AK Academy
GitHub
こちらの動画および GitHub を参考に作成すると Modal 表示に成功したのですが、単純な仕組みを知りたいので Component としてではなく Page として書ける最小単位での記述法を探しています。

補足情報（FW/ツールのバージョンなど）

Visual Studio 2019
Microsoft.AspNetCore.Components.WebAssembly v5.0.6
.Net5

退会済みユーザー

2021/05/20 04:43

「Component としてではなく」とはどういうことか分かりませんが(2 のリンクは見てません)、要するに Bootstrap modal とか jQery UI Dialog が表示できればそれでいいということですか？

roamschemer

2021/05/20 08:53

そうです。たとえば Button を表示するには .razor に ```html <button class="btn btn-primary" ">button</button> ``` みたいに書けば表示できますよね。 modalに関してそういう情報が欲しいです。もしズレた返答をしていたら申し訳ないです。

退会済みユーザー

2021/05/20 09:10

Bootstrap modal や jQuery UI Dialog は JavaScript で起動するということになり、Blazor では以下の記事のようにするのですが、そのあたりはご存じですか？ ASP.NET Core Blazor で .NET メソッドから JavaScript 関数を呼び出す https://docs.microsoft.com/ja-jp/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-5.0

roamschemer

2021/05/20 09:20

いえ、知りませんでした。Bootstrap、 jQuery、JavaScriptのすべてに触れたことがないものでして。そのリンク先を読み進めてみます。

行動規範の内容に同意します

回答1件

ベストアンサー

質問への 2021/05/20 18:10 の私のコメントで、

Bootstrap modal や jQuery UI Dialog は JavaScript で起動するということになり、Blazor では以下の記事のようにするのですが、そのあたりはご存じですか？

ASP.NET Core Blazor で .NET メソッドから JavaScript 関数を呼び出す
https://docs.microsoft.com/ja-jp/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-5.0

・・・と書いたのですが、button に特定の属性を付与して見かけ JavaScript を使わないで Modal を表示する方法もあります。検証してみましたが、Blazor WASM でもその方法を使えます。

以下の記事の Usage というセクションに (1) Via data attributes という JavaScript を書かない方法と、(2) Via JavaScript という JavaScript を書く方法が紹介されています。

Modal
https://getbootstrap.jp/docs/4.2/components/modal/

その両方を Blazor WASM アプリで検証しましたので、検証用に作ったサンプルを紹介しておきます。

Visual Studio のテンプレートで Blazor WASM アプリのプロジェクトを作った場合、プロジェクトには jquery.js と bootstrap.js は含まれないので、wwwroot 下に以下のように追加してください。

(2) Via JavaScript の方法はもちろん、(1) Via data attributes の方法でも bootstrap.js は必須です。bootstrap.js は jquery.js に依存しているので jquery.js も必須です（Bootstrap5 では jQuery に依存しなくなったそうですが）。バージョンに注意してください。自分は bootstrap.js は bootstrap.min.css と同じ 4.3.1、jquery.js は 3.5.1 を使いました。

上の exampleJsInterop.js は (2) Via JavaScript の方法で Modal を表示する場合に使うカスタム JavaScript を含む自作 js ファイルです。内容は以下の通りです。

exampleJsInterop.js

window.showBootstrapModal = () => {
    $('#exampleModalCenter').modal();
}

index.html

wwwroot 下にある既存の index.html に上記 js ファイルへの参照を追加します(以下のコードで「」となっている部分）。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorWasm</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">????</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>

    <!-- 以下を追加 -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/exampleJsInterop.js"></script>

</body>

</html>

Modal.razor

検証用の razor ページは以下の通りです。@inject IJSRuntime JSRuntime; は (2) Via JavaScript の方法に必要です。

@page "/modal"
@inject IJSRuntime JSRuntime;
<!-- Modal -->
<div id="exampleModalCenter" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<h1>Bootstrap Modal</h1>

<!-- Via JavaScript -->
<button type="button" class="btn btn-primary" @onclick="ShowBootstrapModal">
    Via JavaScript
</button>

<br />
<br />

<!-- Via data attributes -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
    Via data attributes
</button>

@code {
    private async Task ShowBootstrapModal()
    {
        await JSRuntime.InvokeVoidAsync("showBootstrapModal");
    }
}

実行結果は以下の通りです。