モーダルメッセージで完了ダイアログを表示させたい。

Question

前提・実現したいこと

モーダルメッセージで完了ダイアログを表示させたい。

発生している問題・エラーメッセージ

「ASP.NET CORE MVC」にて、下記のような処理を実現したいのですが、
一般的にどのように実装するものなのでしょうか?

・「登録」ボタン押下→確認ダイアログをモーダル表示、OKボタン押下→
コントローラーにフォーム送信、処理実行、Viewにreturn
→完了ダイアログをモーダル表示(OKボタン押下で消える。)

コントローラにフォーム送信、処理実行まではいけたのですが、
Viewに返すとき、なにかフラグのようなものを持たせ、
View側でそれを判定し、完了ダイアログをモーダル表示させることなど
可能なのでしょうか?

C#,JqueryUI、Javascript

補足情報（FW/ツールのバージョンなど）

Visual　Studio 2019
ASP.NET CORE MVC

Comments

[退会済みユーザー]

開発環境を書いてください (OS, CORE のバージョン、ブラウザは何かなど。質問の本題とあまり関係ないかもしれませんが念のため)。

確認用のモーダルなダイアログを出したいと言うことですが、もう少し具体的にどういうものが希望か書いてください。JavaScript の confirm とか alert でもいいのですか？

[退会済みユーザー]

OSはWindows10
COREは3.0
ブラウザはIEで動作確認しています。

ダイアログはJQueryUIで作成しています。
Viewのボタン押下で確認ダイアログ表示し、ダイアログのokボタン押下でフォーム送信、サーバーサイドで処理後にviewに値を返すところまで、できています。
Viewに値を返した際に、JQueryでダイアログ表示したいが、方法がわかりません。
JSのconfirmでも、viewに、returnした際に判定してダイアログ表示する方法がわかれば教えていただきたいです。

[退会済みユーザー]

質問欄を編集して上記の情報を追記願います。質問のコメント欄は初期画面では開かないので、読まない人がいますから。

Answer 1

ダイアログはJQueryUIで作成しています。Viewのボタン押下で確認ダイアログ表示し、ダイアログのokボタン押下でフォーム送信、サーバーサイドで処理後にviewに値を返すところまで、できています。

「登録」ボタン押下の際の確認ダイアログの方はできているそうなので余計なお世話かもしれませんが、jQuery UI Dialog ではなくて JavaScript の confirm を使うことをお勧めします。

「登録」ボタンの onclick 属性に以下のように confirm を設定すると、

<input type="submit" 
    onclick="return confirm('登録しますか？');" 
    value="登録" class="btn btn-primary" />

「登録」ボタン押下で以下の画像のような confirm のダイアログがモーダルで現れます。

そこで［OK］をクリックすれば form が submit されて登録されます。［キャンセル］をクリックすれば submit はキャンセルされます。

Viewに値を返した際に、JQueryでダイアログ表示したいが、方法がわかりません。

「Viewに値を返した際」の View というのは元の登録画面（上の画像のような View）のことで、登録に成功したらそれに登録したデータを再度表示するとともにモーダルダイアログで "登録しました" と言うように表示したいのだと理解してます。

その理解でレスします。理解が違っていたらどう違うのか書いてください。

まず、普通は登録を行う場合 Post-Redirect-Get (PRG) パターンを使います。結果 OK で POST 要求への応答をそのまま返すのは、二重 POST の問題が起こりうるので、好ましくないからです。

具体的には以下の記事の 2 つ目の画像あたりから下を読んでください。

EditorFor と DisplayFor の違い
http://surferonwww.info/BlogEngine/post/2013/03/27/editorfor-and-displayfor-display-different-values.aspx

上の記事のサンプルコードの「// 検証 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");
}

Comments

[退会済みユーザー]

ご回答ありがとうございます。
今回は、エラーメッセージ等はViewDataにぶちこんで、Viewに表示させるのですが、確認と完了のメッセージはモーダルダイアログで表示させたいです。
JsでViewDataの中身をif文で判定しようとしてもうまくいきません(文字列型じゃないから？)。
View側で特定の文字列が含まれるかの方法はご存知でしょうか？
また、ネットで調べていると、Ajaxを利用すると実装できるのかも、とか思い始めたのですが、(無知ですみません)このような場合に利用する技術なのでしょうか？

[退会済みユーザー]

まずは上の質問へのコメント欄でお願いした、

質問欄を編集して上記の情報を追記願います。質問のコメント欄は初期画面では開かないので、読まない人がいますから。

をやってください。

[退会済みユーザー]

そして、

> JsでViewDataの中身をif文で判定しようとしてもうまくいきません(文字列型じゃないから？)。

というところ、うまくいきませんだけでは他人には分かりません。

どういうことを期待して、それを実現するためにどのように実装して、結果がどうなるのか期待とはどう異なるのか、何が分かれば解決できるのか具体的に、質問欄を編集して書いてください。