ASP.NET MVC5 JQuery UIで独自ダイアログ作成

この記事では、ASP.NET MVC5のプロジェクトにて、
JQuery UIのダイアログを表示する方法をまとめてあります。

通常、javascriptで確認ダイアログを表示すると
Google Chromeで以下みたいになります。

 

通常のダイアログでもGoogle Chromeだといい感じにはなりますが…(^^;)
ちょっと雰囲気を変えてオシャレにしたい場合に、
JQuery UIを使用することで以下みたいにすることが可能です。

 

 

今回は、前回の記事「【初心者向け】ASP.NET MVC5 ログイン機能の実装方法」で
ヘッダーにログアウトリンクを追加したので、
ログアウトリンクをクリックした後、JQuery UIで確認ダイアログが開き、
ログアウト処理を実行できるようにします。

ASP.NET MVC5 プロジェクト作成

使用ツール

・Visual Studio Community 2019
こちらでダウンロード可能です。

プロジェクト作成

こちらの記事で作成したログイン機能のプロジェクトを使用して解説していきます。

jQuery.UI インストール

・「ソリューションエクスプローラー」のプロジェクトを右クリック→「NuGetパッケージの管理」をクリックします。

・参照タブをクリックして、JQuery UIと検索すると、jQuery.UI.Combinedと一覧に出てくるので、インストールします。

Scriptの設定

jsファイル作成

まずはJQuery UIダイアログを表示するコードを記載するjsファイルを新規に作成します。

・「Script」で右クリック、「追加」⇒「JavaScriptファイル」をクリックします。
・「項目の名前を指定」ダイアログが表示されたら、JavaScriptのファイル名を設定して「OK」をクリックします。
※今回はプロジェクトの共通で使用できる意味を込めて、commonにしました。

以下のソースコードを作成したcommon.jsに反映します。

12~24行目で、ダイアログ上でOKボタンがクリックされた時に、
Ajax処理で、Contoller側のログアウト処理を呼び出すことをしています。
正常にログアウトできた場合、javascript側でトップページ(ログイン画面)に遷移させます。

 

BundleConfigの修正

次にインストールしたJQuery UIのjsファイル、cssファイル、新規に作成したcommon.jsを
BundleConfigでまとめる作業をします。

「App_Start」にある「BundleConfig.cs」を開きます。

29行目~36行目を追加します。
common.jsは、JQueryとは別にする為、別のBundleでまとめます。

 

Viewの修正

Bundleの読み込み

先ほど追加したBundleをView側で読み込む為、
「Views」⇒「Shared」⇒「_Layout.cshtml」を修正します。

9行目の@Styles.Render()でJQuery UIのcssファイルをまとめたBundleを読み込み、
58~59行目の@Scripts.RenderでJQuery UI、新規に作成したcommon.jsをまとめたBundleを読み込んでいます。
※58行目のJQuery UIのBundleは、必ず57行目に元々記載されているJQueryのBundleの後に記述してください。
この順序が逆になると、Jquery UIの元であるJQueryが先に読み込まれない為、JQuery UIが機能しません。

ダイアログ元の作成

JQuery UIで表示させるダイアログは、元となるhtmlの要素をviewに用意しておく必要があります。
上記のソースコードでは、52~55行目に該当します。

この<div>タグ内の内容が、ダイアログに表示されます。
style=”display:none;”でログアウトリンクがクリックされるまでは非表示にしています。

ログアウトリンク修正

ログアウトリンクをクリックした時に、common.jsで用意したクリックイベントを実行させるために、ログアウトリンクにidを設定します。
上記のソースコードでは、32行目に該当します。

ダイアログの×ボタンが表示されない問題

bootstrapの読み込みを先にしないとJqueryUIとかぶってしまうのか?
JQueryUIダイアログの×ボタンが表示されない問題が発生します。

これを回避するには、jqueryのBundleよりbootstrapのBundleを先に読み込むようにします。

 

Contollerの修正

ログアウト処理修正

ここからはJQuery UIからAjax処理でログアウトする部分なので、
とりあえずJQuery UIでダイアログが表示できれば良い方は不要です。

Ajax処理でログアウト処理した後、javascript側で、ページ遷移させる必要がある為、
Contoller内では、RedirectToActionでのページ遷移を削除します。(11行目のコメントアウト部分)

ログアウト処理の結果では、特に返すデータも今回はない為、空を返します。
※元のソースコードを見たい方は、こちらの記事を参照ください。

まとめ

さぁ 早速実行してみましょう!

【実行結果】
ログアウトリンクをクリック!

JQuery UIでダイアログが表示されました。
「OK」をクリックします。

ログアウトされて、ログイン画面に戻ってきました。

ということで、ASP.NET MVCでJQuery UIを使用する場合に必要な事は、

✅ NuGetパッケージの管理からJQuery UIをインストール
✅ JQuery UIを表示する為のjsファイルを作成
✅ JQuery、JQuery UIのcssファイル、jsファイルをBundleにまとめて、view側で呼び出す
✅ダイアログの内容をview側にdivタグで作成

になります。

 

ちょっとオシャレにダイアログを表示したい場合は、お試しください(^^)

お問い合わせはこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA