JQueryダイアログ:サーバー側のエラー/メッセージでダイアログを更新する方法

私はJQueryダイアログを使用して、ウィンドウをポップアップさせようとしています。追加ボタンを押すと、Html.BeginForm()フォーム内のダイアログが表示されます。

ダイアログのボタンを使用するか、ダイアログを挿入するか、フォームを送信してフォームを元に戻し、追加が成功した旨の更新を表示するか、フォーム(例:サーバー側のエラー)

例えば:

public ActionResult EventSave(EventManageModel model)
{
        if (fake error, db save failed)
            ModelState.AddModelError("_FORM", "DB save failed!");
        return PartialView("EventManage", model);
}

私はクライアント側の検証が正しく行われたと思います。

$.validator.unobtrusive.parse("#EventManage");

しかし、私の大きな疑問は、実際にはサーバー側の検証/サーバー側のデータ取得です。この種のエラーは特定のテキストボックスではなくフォームベースのエラーの多かれ少なかれであるため、リモート検証は私には当てはまりません。

これをどのように機能させることができますか?私は本当に手がかりがない、私は理論的にこれを動作させるためにどこでも試してみました。

現時点では、ダイアログフォームが送信されるとき、私は次のようなものを持っています:

      "Save": function() {
                    $.validator.unobtrusive.parse("#EventManage");

                    if ($("#EventManage").valid()) {

                        $.ajax({
                            url: "/Home/EventSave",
                            type: 'POST',
                            data: $("#EventManage").serialize(),
                            success: function (result) {
                                $("#EventManage").html(result);
                            },
                            error: function (result) {
                                $("#EventManage").html(result);
                            }
                        });
                    }
                },

しかし、私が望むものが得られないのですが、ダイアログが更新されていないようで、部分的なビューが更新されていないようです。

私はこの例を実際にどのように動作させるかについて次のように説明しています。

http://iwantmymvc.com/dialog-form-with-jqueryui-and -mvc-3

このことをどうやって行うのかに関するヒントを教えてください。 :)

編集:

私のEventManageの部分形式: -

@model Harrods.Web.Models.EventManageModel


<div>
@using (Html.BeginForm("EventSave", "Home", FormMethod.Post, new { id = "EventManage", @class = "Dialog" }))
{
    @Html.ValidationSummary(false, "Please correct the errors below and try again:", new { @class = "ui-state-error ui-corner-all" })

@Html.AntiForgeryToken()
Event Details
@Html.Hidden("Id") <div class="editor-label-dialog"> @Html.LabelFor(m => m.Event_Name) </div> <div class="editor-field-dialog"> @Html.TextBoxFor(m => m.Event_Name)
@Html.ValidationMessageFor(m => m.Event_Name) </div>


<div class="editor-label-dialog"> @Html.LabelFor(m => m.Event_Date) </div> <div class="editor-field-dialog"> @Html.TextBoxFor(m => m.Event_Date)
@Html.ValidationMessageFor(m => m.Event_Date) </div>


<input type="submit" class="addNew" value="Save" /> <div class='loading' style='display: none'></div>
} </div>

EDIT2

It seems like I got it to work for >> success: function (result)

それはエラーには入りません:function(result)

すでにエラーが発生しています。

0

2 答え

.ajaxエラー:モデルステートにエラーがある場合は呼び出されず、ajaxリクエストが失敗した場合に呼び出されます。

あなたがしなければならないことは結果をチェックし、エラーがあればそれを確認することです。これは、Jsonのように複数の方法で行うことができます。

EventSaveが成功した場合はJsonオブジェクトを返し、失敗した場合はpartialViewを返します。その後、成功したかどうかを確認してケースを処理できます。

ここに例があります

JSコード:

"Save": function() {
                $.validator.unobtrusive.parse("#CreateGroup")
                if ($("#CreateGroup").valid()) {
                    $.ajax({
                        url: "/Participant/CreateGroup",
                        type: "POST",
                        data: $("#CreateGroup").serialize(),
                        success: function (result) {
                            if (result.result == "success") {
                                $("#GroupAddDialog").dialog("close");
                                LoadList();
                            }
                            else {
                                $("#GroupAddDialog").html(result);
                            }
                        }
                    });
                }

コントローラコード:

if(Success)
{
     return Json(new
            {
               result = "success"
            });
}
ModelState.AddModelError("", "Unable to save in db");
return PartialView("_CreateGroup", model);
3
追加された
それはコントローラが返すものに依存しますか?結果はコントローラから戻ってくるので、コントローラコードを共有してください。
追加された 著者 TobiasW,
私はあなたがなぜ働いているのか、他の人がいないのかを伝えるためにすべてのコードが必要です。しかし、動作するものだけを使用してください。
追加された 著者 TobiasW,
ほとんどの場合、私はあなたに同意しますが、私のコードはほぼ4歳ですから、私はここから少し離れています:)
追加された 著者 TobiasW,
問題の原因を目の当たりにしました。ありがとう。しかし、1つの質問。私のコード$( "#GroupAddDialog")。html(result);動作しませんでした。しかし、これはうまくいきました:$( "#GroupAddDialog")。html(result.responseText);問題は、これが他の人のために働く理由です:$( "#GroupAddDialog")。html(result);私はAjax.BeginFormを使用しているからですか?
追加された 著者 Ashi,
public ActionResult Create(FinAccountVM accountVM){//ここから保存と成功のコードを削除しました。ModelState.AddModelError(string.Empty、 "Failed"); Response.StatusCode = 400; PartialView(accountVM)を返します。 }
追加された 著者 Ashi,
好奇心が猫を殺した..私はちょうど働くものを使うだろう;)Thanks TobiasW
追加された 著者 Ashi,

特定の入力に固有ではなく、モデルステートに追加されたエラーメッセージを表示するには、 ValidationSummary ヘルパーを使用できます。だから、次の部分をどこかに置く:

@Html.ValidationSummary(true)
1
追加された
@RicL、それは EventManage の部分の中にありますか?また、実際にサーバーからモデルステートにエラーが追加されたことを確認しましたか?次に、成功したAJAXコールバックがクライアント上で呼び出され、DOMの正しい部分が更新されたことを確認しましたか?
追加された 著者 Darin Dimitrov,
@RicL、あなたがあなたのコードを投稿したので、 Html.ValidationSummary(true)を使って Html.ValidationSummary(false、... 差?
追加された 著者 Darin Dimitrov,
@RicL、エラーコールバックは、コントローラアクションが失敗した場合にのみ呼び出されます。たとえば、例外をスローした場合あなたは例外を投げているわけではありません。 HTTPステータスコード200の部分ビューを返すだけです。したがって、成功コールバックが呼び出されます。
追加された 著者 Darin Dimitrov,
@RicL、パラメーターは、プロパティー・エラーを除外するかどうかを示します。これをtrueに設定すると、検証サマリーヘルパーは、モデル状態に追加され、対応する入力フィールド(グローバル検証エラーのようなもの)を持たないエラーのみを表示します。 falseに設定すると、すべてのエラーが表示されます。つまり、検証の要約に1回、対応する入力フィールドの隣に1回、プロパティ検証エラーを2回表示させることができます。
追加された 著者 Darin Dimitrov,
それは間違いなくそこにあり、うまくいきません。
追加された 著者 RicL,
1)それが入っています。2)うん、ModelState.AddModelErrorを直接追加しました。 3)と4)本当に理解されていない(私の新生児を許す)
追加された 著者 RicL,
trueに設定すると、エラーメッセージは表示されません。奇妙なほど。とにかく、私はそれが成功するように働くように思われるが、誤りはない。 ModelStateエラーが発生しても成功する理由は何ですか?
追加された 著者 RicL,
私は混乱のために申し訳ありません。あなたの明確化の相手に感謝します。 ValidationSummary(true/false)はどうですか?違いは何ですか?
追加された 著者 RicL,
百万人の仲間に感謝します。私はすでにこれを解決したことを知るために約16時間を費やしました。本当の奇妙!
追加された 著者 RicL,