###目標
MVC5のログアウト機能の実装でjQueryを使ったダイアログ表示で確認メッセージを表示をさせてログイン画面に遷移するのが目標となります。
###起こっている問題
下記サイトを参考にログイン処理を実装し、ログアウト時に確認ダイアログを表示させようと試みたのですが、下記の内容で生きず待っています。
①表示はされるのですが、一瞬で消えてしまします。
②原因を探ろうとブレークポイントを設定し実行しましたが下記画像の理由でストップしませんでした
→(エラー・警告欄に出てきてはいなかったのでスルー状態?)
###試したこと
①に対してやったこと
■Bundleの読み込みでjQuery UIやbootstrapなどの読み込み順を確認。
_Layout.cshtmlのbodyタグ内最後に記述された内容で「~jquery」と「~bootstrap」の順序を逆にしてみましたが、結果変わらず。
■jQueryファイルがエラーで止まっていると推測し、ブラウザのデベロッパーツールで確認するもエラーは確認できず。
→コード内のボタンテキストの箇所を変更した結果、一瞬だけ表示される中で目を凝らしてみたところ適用はされていたため、ファイル自体は読めている模様。
■ブラウザによるエラーかと思い、IEやOperaなどでも試してみましたが結果は変わりませんでした。
②に対してやったこと
■オプションでデバッグ機能を有効にするに☑
→変わらず、ブレークポイントで止まらない、デベロッパーツールでの反応も変わらず。
■下記のサイトを参考にデバッグコードを記載
→変わらず。
参考サイト2
上記試した結果、問題が解決できず質問させていただきました。
わかる方、対処法を教えてください
###追記
発生時は、MVC5 .NETFreamworkにて実装されたログイン機能に付け足す形で該当コードを修正・作成いたしました。
修正の依頼があってからにはなりますが、参考サイト1にて公開されている状態と同じにするためログイン機能も同参考サイトの別記事にて公開されている独自実装にて作成し実行してみましたが状況は変わらず、ダイアログが一瞬だけしか表示されませんでした。
###該当のコード
C#
//Layout.cshtml <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - マイ ASP.NET アプリケーション</title> @Styles.Render("~/Content/css") @Styles.Render("~/Content/jquery-ui-css") @Scripts.Render("~/bundles/modernizr") </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> @Html.ActionLink("ログインSample", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("ホーム", "Index", "Home")</li> <li>@Html.ActionLink("詳細", "About", "Home")</li> <li>@Html.ActionLink("問い合わせ", "Contact", "Home")</li> </ul> @Html.Partial("_LoginPartial") </div> </div> </div> <div class="container body-content"> @RenderBody() <hr /> <footer> <p>© @DateTime.Now.Year - マイ ASP.NET アプリケーション</p> </footer> </div> <!-- ダイアログの内容 --> <div id="dialogConfirm" title="確認" style="display:none;"> <p>ログアウトしますが、よろしいですか?</p> </div> @Scripts.Render("~/bundles/bootstrap") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") @Scripts.Render("~/bundles/common") @RenderSection("scripts", required: false) </body> </html>
C#
// BundleConfig.cs using System.Web; using System.Web.Optimization; namespace LoginSystemTemplate { public class BundleConfig { // バンドルの詳細については、https://go.microsoft.com/fwlink/?LinkId=301862 を参照してください public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.validate*")); // 開発と学習には、Modernizr の開発バージョンを使用します。次に、実稼働の準備が // 運用の準備が完了したら、https://modernizr.com のビルド ツールを使用し、必要なテストのみを選択します。 bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js")); bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css")); bundles.Add(new ScriptBundle("~/bundles/common").Include( "~/Scripts/common.js")); bundles.Add(new StyleBundle("~/Content/jquery-ui-css").Include( "~/Content/themes/base/jquery-ui.css")); bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include( "~/Scripts/jquery-ui-{version}.js")); } } }
jQuery
//common.js $(function () { $('#logoutForm').click(function () { $('#dialogConfirm').dialog(); }); })
###スペック情報
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
認証方式:個別のユーザーアカウント
まだ回答がついていません
会員登録して回答してみよう