質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

MVC

MVC(Model View Controller)は、オブジェクト指向プログラミングにおけるモデル・ビュー・コントローラーの総称であり、ソフトフェア開発で使われている構築パターンとしても呼ばれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

解決済

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

Mr.sijimi
Mr.sijimi

総合スコア21

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

MVC

MVC(Model View Controller)は、オブジェクト指向プログラミングにおけるモデル・ビュー・コントローラーの総称であり、ソフトフェア開発で使われている構築パターンとしても呼ばれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

2回答

0評価

0クリップ

1540閲覧

投稿2020/12/28 06:22

編集2020/12/29 06:58

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

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

参考サイト1

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

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

ブレークポイント警告

###試したこと
①に対してやったこと
■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>&copy; @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
認証方式:個別のユーザーアカウント

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

SurferOnWww

2020/12/28 08:46

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

2020/12/29 01:49

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

2020/12/29 02:25

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

2020/12/29 02:45

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

2020/12/29 02:51

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

2020/12/29 02:58

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

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を動かすための何かが足りないのか、それとも動かすのに何かが邪魔をしているのか、というところに要点を置き調べている状況です。 (主にネットにて関連記事の検索です)
SurferOnWww

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

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

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の使用が希望です。
SurferOnWww

2020/12/29 23:11 編集

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

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に関して学習することから始めますので、一度クローズさせていただき、近日中に解決したかどうかを今一度報告させていただき増す。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

MVC

MVC(Model View Controller)は、オブジェクト指向プログラミングにおけるモデル・ビュー・コントローラーの総称であり、ソフトフェア開発で使われている構築パターンとしても呼ばれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。