ASP.NET のタグをつけてください。
.NET Framework or Core のどちらかとそのバージョンを書いてください。
認証方式を書いてください。独自実装と言われては誰も回答できないというのは分かってますよね？
###目標
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
認証方式：個別のユーザーアカウント
> 認証方式：個別のユーザーアカウント
Visual Studio でプロジェクトを作成するときそれを選ぶと ASP.NET Identity を使ったクッキーベースの認証方式になるのですが、質問のコードを見るとそうではなくて旧来のフォーム認証のように見えます。話が合いませんが一体何がホントなんですか？
＞旧来のフォーム認証のように見えます。
参考サイトでの作成手順ではプロジェクトテンプレートはMVC .NETFreamwork4.7.2となっていましたが
認証方式が「個別ユーザーアカウント」ではなく「認証なし」となっておりました。
これが旧来のフォーム認証という状態なのでしょうか？
現状では学習として実装を試みている状態で、ほぼコピペの状態となってしまっております。
また、提示コードに関しては変更した箇所のみで、それ以外はプロジェクトを作成した状態より変更を加えていない状態です。
> 認証方式が「個別ユーザーアカウント」ではなく「認証なし」となっておりました。
> これが旧来のフォーム認証という状態なのでしょうか？
いえ、「認証なし」は読んで字のごとく認証なしで、認証システムは一切実装されません。
参考にしたサイトはどういう理由か知りませんが、Visual Studio では認証システムは実装せず、自力で旧来のフォーム認証を実装したようです。
ちなみに、Visual Studio では、MVC3 までは旧来のフォーム認証、MVC4 もフォーム認証だがメンバーシッププロバイダが SqlMembershipProvider から SimpleMembershipProvider に変更、MVC5 で ASP.NET Identity を使った認証がテンプレートで実装できるようになってます。
で、結局どうしたいのですか？ 旧来のフォーム認証に戻るのですか？
現状では認証システムをどうするかということより、MVC5 アプリで jQuery UI の Dialog が「表示はされるのですが、一瞬で消えてしまします」というところが問題なのですよね？ で、このスレッドとしてはそこが解決できればいいのですよね？ であれば、認証システムとは別の話として、button クリックで Dialog が表示するとか必要最低限のコードで試してみてはいかがですか？
ご指摘ありがとうございます。
現状ではASP.NET Identityを使用した実装で進めたいと思っております。
>button クリックで Dialog が表示するとか必要最低限のコードで試してみてはいかがですか？
一度試してみます。
思い出した。先のスレッド https://teratail.com/questions/282391 の質問のコメント欄で私が、
Visual Studio のテンプレートで「認証なし」で MVC5 プロジェクトを作って、それに昔々のフォーム認証機能を追加で実装しようとしているようですが、なぜそんなことをしているのですか？ テンプレートに組み込まれていて自動的に実装できる ASP.NET Identity による認証を使うことを考えてください。それ以外は初心者には超えることができない茨の道だと思います。
・・・とアドバイスしましたけど、結局やらなかったんですね。回答欄に画像入りで 「個別のユーザーアカウント」（ASP.NET Identity を使った認証システム）の作り方まで書いておいたのに、なぜ？
>回答欄に画像入りで 「個別のユーザーアカウント」（ASP.NET Identity を使った認証システム）の作り方まで
追記スペック情報にて書かせていただいた
ASP.NETWebアプリケーション .NET Freamwork 4.7.2
認証方式：個別のユーザーアカウント
というのが、ASP.NET Identityによる認証になっています。
作成方法もアドバイスして頂いたとおりに作成しており、既存の機能にログアウト時のダイアログ機能を追加したく、参考サイトを実装を試みていました。
ちなみに現在の進捗(?)ですが、ダイアログ表示のみの処理の場合でも状況は変わらず、一瞬だけしか表示されませんでした。
そのため、該当jQueryを動かすための何かが足りないのか、それとも動かすのに何かが邪魔をしているのか、というところに要点を置き調べている状況です。
(主にネットにて関連記事の検索です)
> 追記スペック情報にて書かせていただいた
> ASP.NETWebアプリケーション .NET Freamwork 4.7.2
> 認証方式：個別のユーザーアカウント
> というのが、ASP.NET Identityによる認証になっています。
> 作成方法もアドバイスして頂いたとおりに作成しており、既存の機能にログアウト時のダイアログ機能> を追加したく、参考サイトを実装を試みていました。
そうすると話が上の 2020/12/29 10:49 の私のコメントに戻ってしますのですが？ 再掲しますと、
Visual Studio でプロジェクトを作成するときそれを選ぶと ASP.NET Identity を使ったクッキーベースの認証方式になるのですが、質問のコードを見るとそうではなくて旧来のフォーム認証のように見えます。話が合いませんが一体何がホントなんですか？
理解力乏しく申し訳ありません。
作成手順ではなく参考サイトの内容をほぼコピペ状態であったことにより
旧来のフォームが適用されていたという理解でコードを修正いたしました。
> 作成手順ではなく参考サイトの内容をほぼコピペ状態であったことにより
> 旧来のフォームが適用されていたという理解でコードを修正いたしました。
書き直したコードを見ましたが、
@Html.Partial("_LoginPartial")
とかは「認証方式：個別のユーザーアカウント」で生成される ASP.NET Identity 用のコードに含まれるもので、「参考サイトの内容をほぼコピペ状態」というのは話が違うのでは？
なんか迷走してませんか？ 話が 2020/12/29 11:45 の私のコメントに戻ってしまいますが、認証システムは結局どうしたいのですか？ ASP.NET Identity ではなくて旧来のフォーム認証に戻るのですか？
ほぼコピペ状態というのは、参考サイトのコードをコピペするだけではなく記載箇所を同じ状態にしておりました。
例えば
@Html.Partial("_LoginPartial")の箇所が、参考サイト上では
@if(Request.IsAuthenticated)...のようになってたため、@Html.Partialの箇所を消してコピペをしております。
他の変更箇所に関しても、同様のことをしている状況だったため「ほぼコピペ」と記載せていただきました。
認証システムに関しては、先ほども記述いたしましたが、ASP.NET Identityの使用が希望です。
> 認証システムに関しては、先ほども記述いたしましたが、ASP.NET Identityの使用が希望です。
であれば、「参考サイト１」および「別記事」は jQuery UI の導入部分以外は参考にはならない、と言うより参考にすると迷走するのできれいさっぱり忘れましょう。
また、jQuery UI の Dialog ではなくて、MVC5 では Visual Studio のテンプレートで作ると自動的に実装される Bootstrap.js の Modal を使う方がスムーズにいくと思いますので、そちらに方向転換することをお勧めします。
https://getbootstrap.com/docs/3.3/javascript/#modals
先の私のコメントで、
認証システムとは別の話として、button クリックで Dialog が表示するとか必要最低限のコードで試してみてはいかがですか？
・・・とアドバイスした件ですが、どうなりましたか？
質問欄に書いてあるコード、
$('#logoutForm').click(function () { ... }
では id が logoutForm という名前のボタンなりリンクなりがないと動きませんが、その辺りは分かってますか？
確認が遅くなりました。
最低限のコードで試してみましたが、結果は変わらずでした。
「logoutForm」ですが、デフォルトで作成される「＿Loginpanel.cshtml」内にログアウト関連のボタンが存在するためそちらに紐付くようになっております。
＞jQuery UI の Dialog ではなくて、MVC5 では Visual Studio のテンプレートで作ると自動的に実装される Bootstrap.js の Modal を使う方がスムーズにいくと思います。
ありがとうございます。
Modalに関しては解決策を調べている際に、関連記事が出てきていてはいました。
(詳しくは調べておりませんでした。)
今回はModalを採用することにします。
上記の理由により、BootstrapのModalに関して学習することから始めますので、一度クローズさせていただき、近日中に解決したかどうかを今一度報告させていただき増す。
まだ回答がついていません
会員登録して回答してみよう
