質問: ### 前提・実現したいこと モーダルメッセージで完了ダイアログを表示させたい。 ### 発生している問題・エラーメッセージ 「ASP.NET CORE MVC」にて、下記のような処理を実現したいのですが、 一般的にどのように実装するものなのでしょうか? ・「登録」ボタン押下→確認ダイアログをモーダル表示、OKボタン押下→ コントローラーにフォーム送信、処理実行、Viewにreturn →完了ダイアログをモーダル表示(OKボタン押下で消える。) コントローラにフォーム送信、処理実行まではいけたのですが、 Viewに返すとき、なにかフラグのようなものを持たせ、 View側でそれを判定し、完了ダイアログをモーダル表示させることなど 可能なのでしょうか? ``` C#,JqueryUI、Javascript ``` ### 補足情報(FW/ツールのバージョンなど) Visual Studio 2019 ASP.NET CORE MVC
回答: > > ダイアログはJQueryUIで作成しています。Viewのボタン押下で確認ダイアログ表示し、ダイアログのokボタン押下でフォーム送信、サーバーサイドで処理後にviewに値を返すところまで、できています。 > > > 「登録」ボタン押下の際の確認ダイアログの方はできているそうなので余計なお世話かもしれませんが、jQuery UI Dialog ではなくて JavaScript の confirm を使うことをお勧めします。 「登録」ボタンの onclick 属性に以下のように confirm を設定すると、 ``` ``` 「登録」ボタン押下で以下の画像のような confirm のダイアログがモーダルで現れます。 !イメージ説明 そこで[OK]をクリックすれば form が submit されて登録されます。[キャンセル]をクリックすれば submit はキャンセルされます。 > > Viewに値を返した際に、JQueryでダイアログ表示したいが、方法がわかりません。 > > > 「Viewに値を返した際」の View というのは元の登録画面(上の画像のような View)のことで、登録に成功したらそれに登録したデータを再度表示するとともにモーダルダイアログで "登録しました" と言うように表示したいのだと理解してます。 その理解でレスします。理解が違っていたらどう違うのか書いてください。 まず、普通は登録を行う場合 Post-Redirect-Get (PRG) パターンを使います。結果 OK で POST 要求への応答をそのまま返すのは、二重 POST の問題が起こりうるので、好ましくないからです。 具体的には以下の記事の 2 つ目の画像あたりから下を読んでください。 EditorFor と DisplayFor の違い 上の記事のサンプルコードの「// 検証 OK ⇒ 再確認」とコメントのあるあたりで ViewBag に "登録に成功しました" というような文字列を設定して、それを View で表示するようにしてはいかがですか? どうしてもモーダルダイアログで表示したいということであれば、JavaScript で ViewBag にその文字列があるかを判定して jQuery UI Dialog を表示すれるとかすればよさそうです。 ただ、上記のような実装はちょっと面倒ですし、そこまでする必要はないという場合がほとんどなので、以下のように実装して、登録に成功したら最初の一覧ページ(下のケースでは Home/Index)にリダイレクトするのが普通なのですが。 ``` [HttpPost] [ValidateAntiForgeryToken] public IActionResult Create6(Book model) { if (!ModelState.IsValid) { // DB に登録 return View(model); } return RedirectToAction("Index", "Home"); } ```