【ワテの備忘録】ASP.NET MVCでBootstrapのモーダルダイアログを使う

この記事は約10分で読めます。
スポンサーリンク

ASP.NET MVCではBootstrapがデフォルトで組み込まれているので、何かと便利だ。

例えばボタンの見栄えに関しては、以下の種類がある。

 

ボタンのサイズも、四種類が用意されている。

  • btn-lg
  • 通常サイズ
  • btn-sm
  • btn-xs

上記のボタンにこれらのサイズ指定を行う場合には、以下のように書けばよい。

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>

つまり、classでボタンの種類やサイズを指定しておけば良いのだ。

当記事では、Bootstrap Modalダイアログの使い方を紹介したい。

スポンサーリンク
ワテ推薦のプログラミングスクールで学ぶ
スポンサーリンク
スポンサーリンク

Bootstrap Modalダイアログ

モーダルダイアログは、そのダイアログの質問に答えない限り、他のウインドウ操作が出来ないタイプのダイアログだ。

ワテはこれが嫌いだ。

もう一つのダイアログに、モードレスダイアログがある。

モードレスダイアログの場合には、そのダイアログが開いていても、他のウインドウ操作が可能だ。ワテはこっちが好き。

さて、Bootstrap にも便利なダイアログが標準で用意されている。

そのサンプルプログラム。

よく見かけるサンプルなので、たぶんBootstrap の公式のサンプルなのかな?

このサンプルはネットで見付けたやつだが、どこで見付けたサンプルなのか忘れた。でもよく見かける。

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
 <h2>Large Modal</h2>
 <!-- Trigger the modal with a button -->
 <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Large Modal</button>

 <!-- Modal -->
 <div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog modal-lg">
   <div class="modal-content">
    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal">&times;</button>
     <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
     <p>This is a large modal.</p>
    </div>
    <div class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
   </div>
  </div>
 </div>

</div>

</body>
</html>

使い方であるが、上のコードで

<div class="modal fade" id="myModal" role="dialog">
・・・
</div>

この部分を自分のHTMLのどこでも良いからコピペして貼っておけば良い。

もちろん冒頭の Bootstrap関連のCSS ファイルなどは読み込んでいる必要がある。

 

一方、

 <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Large Modal</button>

によってボタンが一個表示される(下図)。

このボタンをクリックするとBootstrapモーダルダイアログが開く。

注意:現在、↑のボタンをクリックしてもダイアログが開かなくなってしまった。

WordPressのテーマをSimplicity2からCocoonへ変更したのが原因だと思うのだが、原因不明です。

調査中です。

追記(2019/1/29):その後、猛烈な調査によって上のボタンクリックでBootstrapモーダルダイアログが開くようになった。

Cocoonテーマに変更したらBootstrapダイアログが開かなくなった原因と対策

開かなかった原因は、Bootstrapを使うには以下の三つのファイルを読み込む必要があるのだが、それが出来ていなかったのだ。

<script src="js/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

一つ目のjQueryはWordPressのテーマ(今はCocoon)が読み込む場合が多い。なのでワテは読み込んでいない。実際、CocoonはjQueryを読み込んでいる。

次のbootstrap.min.cssは自分で読み込んでいた。

最後のbootstrap.min.jsはBootstrapコードの本体であるが、Cocoonテーマの場合は読み込んでいなかった。なので自分で読み込む必要があったのだ。これを忘れていたのが開かなかった原因。

かつ、bootstrap.min.jsはjQuery本体の読み込みよりも後で読み込む必要がある。なのでCocoonテーマのカスタムフィールドfooter_customに上のBootstrap関連の二行を追加したら、無事にダイアログが開くようになった。

ちなみに、Cocoonの前に使っていたテーマSimplicity2の場合には、bootstrap.min.cssの読み込みだけで良くて、bootstrap.min.js本体は読み込む必要は無かった。理由はSimplicity2テーマ自身がそれを読み込んでいるので。

従って、もし自分でもbootstrap.min.jsを読み込むと二重に読み込む事になる。

その結果、上のボタンクリックでBootstrapのイベントハンドラが二重に実行される?ようで、ボタンクリックイベントの処理がおかしくなり、ダイアログは開くのだが直ぐに閉じてしまう問題が出た。

この症状に関連する情報としては、

Bootstrap Modal immediately disappearing
I'm working on a website using bootstrap. Basically, I wanted to use a modal in the home page, summoned by the button in the Hero Unit. Button code: <butt...

で解説がある。

と言う事で無事にBootstrapモーダルダイアログが開くようになった。

Bootstrapモードレスダイアログは無いのか?

ワテの場合、モーダルダイアログは嫌いだ。

そのダイアログに答えないと他のウインドウ操作が出来ないのは不便に感じるので。

jQuery UIを使う場合には、モーダルダイアログもモードレスダイアログもどちらもある。

一方、Bootstrapに関しては、色々検索してみたのだが、モーダルダイアログしか見つからない。

モードレスダイアログに関しては、上のモーダルダイアログのサンプルに対して、CSSの設定をいじってモードレスダイアログに変える手法をどこかで見たのだが、忘れた。

思い出したらここに追記しておきたい。

確かCSSだけで行けたと思うのだが、もしかするとJavaScriptなどのプログラミングも少し必要だったかも知れない。

いずれにしても、簡単では無かったので、あまり利用されていない感じ。

何故Bootstrapにモードレスダイアログが無いのかは未確認だ。

出来ればBootstrapにもモードレスダイアログを標準装備して欲しいのだが。

でもまあ、無いなら無いで仕方無いから、ワテも妥協してモーダルダイアログを使っている。

と言う事で、モーダルでもモードレスでも、もうどーでもいいです。

ワテ自作のASP.NET MVCサイトの紹介

2017年のゴールデンウイークを利用して便利なWEBサイトを作ってみた。

名付けて、

最安価格サーチ

クリックで開く

初回起動時のみ3秒くらい掛かりますがご了承下さい。

 

何が出来るかと言うと、

Amazon.co.jp

楽天市場

ヤフーショッピング

の三つのショッピングサイトを同時検索して、商品を価格の安い順に表示出来るお買い物支援サイトだ。

「最安価格サーチ」で、

「Androidプログラミング」をかなり安値で探したい人は こちらから >

「Xamarinプログラミング」をかなり安値で探したい人は こちらから >

「C#プログラミング」をかなり安値で探したい人は こちらから >

「Visual Studioプログラミング」をかなり安値で探したい人は こちらから >

もしお使い頂きまして何かご不明な点、改善案などありましたらお知らせ下さい。

それ以外にもワテ自作のASP.NET Web Form やASP.NET MVCのサイトに興味ある人は、

がお勧めです。

まとめ

ASP.NET MVCをやると面白い。

 

ASP.NET MVCをやるんなら、山田 祥寛さんの本が人気ある。

著者の山田 祥寛さんは、プログラミング解説本では超有名人だ。

なお、ワテのブログの読者の方で、

  • ASP.NET MVC
  • Visual Studio
  • C#
  • その他、プログラミングに関する話題

などに関して、何か質問、相談など有りましたら、お気軽にコメント欄からご連絡下さい。

 

スポンサーリンク
コメント募集

この記事に関して何か質問とか補足など有りましたら、このページ下部にあるコメント欄からお知らせ下さい。

ASP.NET C#
スポンサーリンク
warekoをフォローする
スポンサーリンク
われこ われこ

コメント