【C#】jQueryを使ったダイアログ表示で一瞬だけしか表示されない

###目標
MVC5のログアウト機能の実装でjQueryを使ったダイアログ表示で確認メッセージを表示をさせてログイン画面に遷移するのが目標となります。

###起こっている問題
下記サイトを参考にログイン処理を実装し、ログアウト時に確認ダイアログを表示させようと試みたのですが、下記の内容で生きず待っています。

①表示はされるのですが、一瞬で消えてしまします。

②原因を探ろうとブレークポイントを設定し実行しましたが下記画像の理由でストップしませんでした
→(エラー・警告欄に出てきてはいなかったのでスルー状態？)

###試したこと
①に対してやったこと
■Bundleの読み込みでjQuery UIやbootstrapなどの読み込み順を確認。
_Layout.cshtmlのbodyタグ内最後に記述された内容で「~jquery」と「~bootstrap」の順序を逆にしてみましたが、結果変わらず。

■jQueryファイルがエラーで止まっていると推測し、ブラウザのデベロッパーツールで確認するもエラーは確認できず。
→コード内のボタンテキストの箇所を変更した結果、一瞬だけ表示される中で目を凝らしてみたところ適用はされていたため、ファイル自体は読めている模様。

■ブラウザによるエラーかと思い、IEやOperaなどでも試してみましたが結果は変わりませんでした。

②に対してやったこと
■オプションでデバッグ機能を有効にするに☑
→変わらず、ブレークポイントで止まらない、デベロッパーツールでの反応も変わらず。

■下記のサイトを参考にデバッグコードを記載
→変わらず。
参考サイト2

上記試した結果、問題が解決できず質問させていただきました。
わかる方、対処法を教えてください

###追記
発生時は、MVC5 .NETFreamworkにて実装されたログイン機能に付け足す形で該当コードを修正・作成いたしました。

修正の依頼があってからにはなりますが、参考サイト1にて公開されている状態と同じにするためログイン機能も同参考サイトの別記事にて公開されている独自実装にて作成し実行してみましたが状況は変わらず、ダイアログが一瞬だけしか表示されませんでした。

###該当のコード

C#
1//Layout.cshtml
2
3<!DOCTYPE html>
4<html>
5<head>
6<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
7    <meta charset="utf-8" />
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9    <title>@ViewBag.Title - マイ ASP.NET アプリケーション</title>
10    @Styles.Render("~/Content/css")
11    @Styles.Render("~/Content/jquery-ui-css")
12    @Scripts.Render("~/bundles/modernizr")
13</head>
14<body>
15    <div class="navbar navbar-inverse navbar-fixed-top">
16        <div class="container">
17            <div class="navbar-header">
18                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
19                    <span class="icon-bar"></span>
20                    <span class="icon-bar"></span>
21                    <span class="icon-bar"></span>
22                </button>
23                @Html.ActionLink("ログインSample", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
24            </div>
25            <div class="navbar-collapse collapse">
26                <ul class="nav navbar-nav">
27                    <li>@Html.ActionLink("ホーム", "Index", "Home")</li>
28                    <li>@Html.ActionLink("詳細", "About", "Home")</li>
29                    <li>@Html.ActionLink("問い合わせ", "Contact", "Home")</li>
30                </ul>
31                @Html.Partial("_LoginPartial")
32            </div>
33        </div>
34    </div>
35    <div class="container body-content">
36        @RenderBody()
37        <hr />
38        <footer>
39            <p>&copy; @DateTime.Now.Year - マイ ASP.NET アプリケーション</p>
40        </footer>
41    </div>
42
43    <!-- ダイアログの内容 -->
44    <div id="dialogConfirm" title="確認" style="display:none;">
45        <p>ログアウトしますが、よろしいですか？</p>
46    </div>
47
48    @Scripts.Render("~/bundles/bootstrap")    　　　　
49　　@Scripts.Render("~/bundles/jquery")
50    @Scripts.Render("~/bundles/jqueryui")
51    @Scripts.Render("~/bundles/common")
52    @RenderSection("scripts", required: false)
53</body>
54</html>

C#
1// BundleConfig.cs
2
3using System.Web;
4using System.Web.Optimization;
5
6namespace LoginSystemTemplate
7{
8    public class BundleConfig
9    {
10        // バンドルの詳細については、https://go.microsoft.com/fwlink/?LinkId=301862 を参照してください
11        public static void RegisterBundles(BundleCollection bundles)
12        {
13            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
14                        "~/Scripts/jquery-{version}.js"));
15
16            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
17                        "~/Scripts/jquery.validate*"));
18
19            // 開発と学習には、Modernizr の開発バージョンを使用します。次に、実稼働の準備が
20            // 運用の準備が完了したら、https://modernizr.com のビルド ツールを使用し、必要なテストのみを選択します。
21            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
22                        "~/Scripts/modernizr-*"));
23
24            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
25                      "~/Scripts/bootstrap.js"));
26
27            bundles.Add(new StyleBundle("~/Content/css").Include(
28                      "~/Content/bootstrap.css",
29                      "~/Content/site.css"));
30
31            bundles.Add(new ScriptBundle("~/bundles/common").Include(
32                    "~/Scripts/common.js"));
33
34            bundles.Add(new StyleBundle("~/Content/jquery-ui-css").Include(
35                    "~/Content/themes/base/jquery-ui.css"));
36
37            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
38                    "~/Scripts/jquery-ui-{version}.js"));
39        }
40    }
41}
42

jQuery
1//common.js
2$(function () {
3    $('#logoutForm').click(function () {
4        $('#dialogConfirm').dialog();
5    });
6})

###スペック情報
OS：Windows10 Pro
IDE：Microsoft Visual Studio Community 2019
ブラウザ1：GoogleChrome　バージョン：87.0.4280.88(12/28時点で最新)
ブラウザ2：Opera　バージョン：73.0.3856.284
ブラウザ3：Microsoft Edge 44.18362.449.0
インストールしたNuGetパッケージ：jQuery.UI.Combined v1.12.1

####追記：スペック情報
ASP.NETWebアプリケーション .NET Freamwork 4.7.2
認証方式：個別のユーザーアカウント

退会済みユーザー

2020/12/28 08:46

ASP.NET のタグをつけてください。 .NET Framework or Core のどちらかとそのバージョンを書いてください。認証方式を書いてください。独自実装と言われては誰も回答できないというのは分かってますよね？

退会済みユーザー

2020/12/29 01:49

> 認証方式：個別のユーザーアカウント Visual Studio でプロジェクトを作成するときそれを選ぶと ASP.NET Identity を使ったクッキーベースの認証方式になるのですが、質問のコードを見るとそうではなくて旧来のフォーム認証のように見えます。話が合いませんが一体何がホントなんですか？

Mr.sijimi

2020/12/29 02:25

＞旧来のフォーム認証のように見えます。参考サイトでの作成手順ではプロジェクトテンプレートはMVC .NETFreamwork4.7.2となっていましたが認証方式が「個別ユーザーアカウント」ではなく「認証なし」となっておりました。これが旧来のフォーム認証という状態なのでしょうか？現状では学習として実装を試みている状態で、ほぼコピペの状態となってしまっております。また、提示コードに関しては変更した箇所のみで、それ以外はプロジェクトを作成した状態より変更を加えていない状態です。

退会済みユーザー

2020/12/29 02:45

> 認証方式が「個別ユーザーアカウント」ではなく「認証なし」となっておりました。 > これが旧来のフォーム認証という状態なのでしょうか？いえ、「認証なし」は読んで字のごとく認証なしで、認証システムは一切実装されません。参考にしたサイトはどういう理由か知りませんが、Visual Studio では認証システムは実装せず、自力で旧来のフォーム認証を実装したようです。ちなみに、Visual Studio では、MVC3 までは旧来のフォーム認証、MVC4 もフォーム認証だがメンバーシッププロバイダが SqlMembershipProvider から SimpleMembershipProvider に変更、MVC5 で ASP.NET Identity を使った認証がテンプレートで実装できるようになってます。で、結局どうしたいのですか？　旧来のフォーム認証に戻るのですか？

退会済みユーザー

2020/12/29 02:51

現状では認証システムをどうするかということより、MVC5 アプリで jQuery UI の Dialog が「表示はされるのですが、一瞬で消えてしまします」というところが問題なのですよね？　で、このスレッドとしてはそこが解決できればいいのですよね？　であれば、認証システムとは別の話として、button クリックで Dialog が表示するとか必要最低限のコードで試してみてはいかがですか？

Mr.sijimi

2020/12/29 02:58

ご指摘ありがとうございます。現状ではASP.NET Identityを使用した実装で進めたいと思っております。 >button クリックで Dialog が表示するとか必要最低限のコードで試してみてはいかがですか？一度試してみます。

退会済みユーザー

2020/12/29 05:04 編集

思い出した。先のスレッド https://teratail.com/questions/282391 の質問のコメント欄で私が、 Visual Studio のテンプレートで「認証なし」で MVC5 プロジェクトを作って、それに昔々のフォーム認証機能を追加で実装しようとしているようですが、なぜそんなことをしているのですか？　テンプレートに組み込まれていて自動的に実装できる ASP.NET Identity による認証を使うことを考えてください。それ以外は初心者には超えることができない茨の道だと思います。・・・とアドバイスしましたけど、結局やらなかったんですね。回答欄に画像入りで「個別のユーザーアカウント」（ASP.NET Identity を使った認証システム）の作り方まで書いておいたのに、なぜ？

Mr.sijimi

2020/12/29 05:31 編集

>回答欄に画像入りで「個別のユーザーアカウント」（ASP.NET Identity を使った認証システム）の作り方まで追記スペック情報にて書かせていただいた ASP.NETWebアプリケーション .NET Freamwork 4.7.2 認証方式：個別のユーザーアカウントというのが、ASP.NET Identityによる認証になっています。作成方法もアドバイスして頂いたとおりに作成しており、既存の機能にログアウト時のダイアログ機能を追加したく、参考サイトを実装を試みていました。ちなみに現在の進捗(?)ですが、ダイアログ表示のみの処理の場合でも状況は変わらず、一瞬だけしか表示されませんでした。そのため、該当jQueryを動かすための何かが足りないのか、それとも動かすのに何かが邪魔をしているのか、というところに要点を置き調べている状況です。 (主にネットにて関連記事の検索です)

退会済みユーザー

2020/12/29 06:22

> 追記スペック情報にて書かせていただいた > ASP.NETWebアプリケーション .NET Freamwork 4.7.2 > 認証方式：個別のユーザーアカウント > というのが、ASP.NET Identityによる認証になっています。 > 作成方法もアドバイスして頂いたとおりに作成しており、既存の機能にログアウト時のダイアログ機能> を追加したく、参考サイトを実装を試みていました。そうすると話が上の 2020/12/29 10:49 の私のコメントに戻ってしますのですが？　再掲しますと、 Visual Studio でプロジェクトを作成するときそれを選ぶと ASP.NET Identity を使ったクッキーベースの認証方式になるのですが、質問のコードを見るとそうではなくて旧来のフォーム認証のように見えます。話が合いませんが一体何がホントなんですか？

Mr.sijimi

2020/12/29 07:00

理解力乏しく申し訳ありません。作成手順ではなく参考サイトの内容をほぼコピペ状態であったことにより旧来のフォームが適用されていたという理解でコードを修正いたしました。

退会済みユーザー

2020/12/29 07:14

> 作成手順ではなく参考サイトの内容をほぼコピペ状態であったことにより > 旧来のフォームが適用されていたという理解でコードを修正いたしました。書き直したコードを見ましたが、 @Html.Partial("_LoginPartial") とかは「認証方式：個別のユーザーアカウント」で生成される ASP.NET Identity 用のコードに含まれるもので、「参考サイトの内容をほぼコピペ状態」というのは話が違うのでは？なんか迷走してませんか？　話が 2020/12/29 11:45 の私のコメントに戻ってしまいますが、認証システムは結局どうしたいのですか？　ASP.NET Identity ではなくて旧来のフォーム認証に戻るのですか？

Mr.sijimi

2020/12/29 07:26

ほぼコピペ状態というのは、参考サイトのコードをコピペするだけではなく記載箇所を同じ状態にしておりました。例えば @Html.Partial("_LoginPartial")の箇所が、参考サイト上では @if(Request.IsAuthenticated)...のようになってたため、@Html.Partialの箇所を消してコピペをしております。他の変更箇所に関しても、同様のことをしている状況だったため「ほぼコピペ」と記載せていただきました。認証システムに関しては、先ほども記述いたしましたが、ASP.NET Identityの使用が希望です。

退会済みユーザー

2020/12/29 23:11 編集

> 認証システムに関しては、先ほども記述いたしましたが、ASP.NET Identityの使用が希望です。であれば、「参考サイト１」および「別記事」は jQuery UI の導入部分以外は参考にはならない、と言うより参考にすると迷走するのできれいさっぱり忘れましょう。また、jQuery UI の Dialog ではなくて、MVC5 では Visual Studio のテンプレートで作ると自動的に実装される Bootstrap.js の Modal を使う方がスムーズにいくと思いますので、そちらに方向転換することをお勧めします。 https://getbootstrap.com/docs/3.3/javascript/#modals

退会済みユーザー

2020/12/29 23:34

先の私のコメントで、認証システムとは別の話として、button クリックで Dialog が表示するとか必要最低限のコードで試してみてはいかがですか？・・・とアドバイスした件ですが、どうなりましたか？質問欄に書いてあるコード、 $('#logoutForm').click(function () { ... } では id が logoutForm という名前のボタンなりリンクなりがないと動きませんが、その辺りは分かってますか？

Mr.sijimi

2020/12/30 02:58

確認が遅くなりました。最低限のコードで試してみましたが、結果は変わらずでした。「logoutForm」ですが、デフォルトで作成される「＿Loginpanel.cshtml」内にログアウト関連のボタンが存在するためそちらに紐付くようになっております。＞jQuery UI の Dialog ではなくて、MVC5 では Visual Studio のテンプレートで作ると自動的に実装される Bootstrap.js の Modal を使う方がスムーズにいくと思います。ありがとうございます。 Modalに関しては解決策を調べている際に、関連記事が出てきていてはいました。 (詳しくは調べておりませんでした。) 今回はModalを採用することにします。上記の理由により、BootstrapのModalに関して学習することから始めますので、一度クローズさせていただき、近日中に解決したかどうかを今一度報告させていただき増す。

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

回答2件

ベストアンサー

質問のコメント欄にも書きましたが・・・

現状では認証システムをどうするかということより、MVC5 アプリで jQuery UI の Dialog が「表示はされるのですが、一瞬で消えてしまします」というところが問題で、このスレッドとしてはそこが解決できればいいのであれば、認証システムとは別の話として、button クリックで Dialog を表示する必要最低限のコードで試してみてはいかがですか？

そのやり方を回答として書いておきます。

認証システムに関しては、先ほども記述いたしましたが、ASP.NET Identityの使用が希望です。

そうであれば、「参考サイト１」および「別記事」は旧来のフォーム認証を使っていますので、認証関係はその記事を参考にすると、質問者さんだけでなく回答者、閲覧者を巻き込んで迷走するのできれいさっぱり忘れましょう。

新しく Visual Studio のテンプレートを使って「個別のユーザーアカウント」を選んでまっさらな MVC5 プロジェクトを作ってください。既存のプロジェクトではやらないように。既存の部分の影響でうまくいかないと、何がどう影響しているのか回答者、閲覧者には分からず、原因も分かりませんので。

まっさらな MVC5 プロジェクトを作ったら、「参考サイト１」の**「jQuery.UI　インストール」「BundleConfigの修正」だけやってください。他のことは一切やらないようにしてください**。

Visual Studio のソリューションエクスプローラーから About.cshtml を開いて、下の画像の赤枠で囲んだコードを追加してください。これが上に書いた button クリックで Dialog を表示する必要最低限のコードです。button の id が logoutForm になっているのが分かりますか？

実行して［ログアウト］ボタンをクリックすると、以下の画像のように jQuery UI の Dialog が表示されるはずです。

About.cshtml から ASP.NET が生成する html ソースは以下のようになってます。About.cshtml のコードの @section Scripts { ... } の ... の部分が html にレンダリングされると赤枠で囲ったようになり、jquery-ui.css、jquery-ui-1.12.1.js と JavaScript のコードがページに含まれ、jQeury UI の Dialog が動くようになります。