質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.39%
blazor

Blazorは、マイクロソフトが開発している.NETベースのWebアプリフレームワークです。C#でフロントエンドもバックエンドも一貫して書くことが可能。クライアントサイド(WebAssembly)とサーバーサイド形式のホスティングモデルがあります。

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Q&A

解決済

1回答

6912閲覧

BlazorWebAssembly にて Modal 表示する

roamschemer

総合スコア31

blazor

Blazorは、マイクロソフトが開発している.NETベースのWebアプリフレームワークです。C#でフロントエンドもバックエンドも一貫して書くことが可能。クライアントサイド(WebAssembly)とサーバーサイド形式のホスティングモデルがあります。

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

0グッド

0クリップ

投稿2021/05/20 03:10

前提・実現したいこと

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

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

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

試したこと

1.
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>

2.
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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

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に関してそういう情報が欲しいです。 もしズレた返答をしていたら申し訳ないです。
roamschemer

2021/05/20 09:20

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

回答1

0

ベストアンサー

質問への 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"); } }

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

イメージ説明

投稿2021/05/21 04:30

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.39%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問