jquery - Ajax.Beginform 后验证时 Model.State 无效触发 OnSuccess 函数

Question

这显然是一个老生常谈的话题，但我无法通过阅读以前的帖子找到解决方案。希望有人能告诉我“正确的方法”来做到这一点，因为我需要做很多事情。

主要问题:当Ajax.Beginform post ModelState无效时，仍然触发OnSuccess方法。我知道这是正确的行为，但我的 OnSuccess 方法所做的事情只有在(如图)发布“成功”时才有意义。

在这种情况下，如何最好地管理带有验证错误的重新显示表单？如何从 Controller 返回 success=false 以及要重新显示的 View ？

这与问题没有特别相关，但仅供引用，我在这里所做的事情有点类似于尝试在 Bootstrap Modal 中显示表单，但我放弃了。

1) 通过ajax调用 Controller 来加载div中的表单。

$(function addpaneevent() {
    $('.addpane').on("click", function () {
        var url = '/QuizPane/QuickPane?quizId=' + $(this).data("quizid");
        $.ajax({
            url: url,
            type: 'GET',
            contentType: 'application/json',
            success: function (result) {
                $('#overlay').html(result);
            },
            error: function (result) {
                console.log("bummer",result);
            }
        });
    });
});

2)返回包含表单的部分 View

public ActionResult QuickPane(int quizId)
{
    var model = *querytogetmodel*
    return PartialView("QuickPane",model);
}


@using (Ajax.BeginForm("QuickPane", "QuizPane", FormMethod.Post,
    new AjaxOptions
    {
                            InsertionMode = InsertionMode.Replace,
                            HttpMethod = "POST",
                            OnSuccess = "updatePaneList(data)",
                            OnFailure = "massivefail(data)",
    }))
{
   @Html.ValidationSummary(true)

    <fieldset>
        @Html.HiddenFor(model => model.QuizID)
        <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Title, new { @autofocus = "autofocus" })
            @Html.ValidationMessageFor(model => model.Title)
        </div>
        ...more of the same
        <input type="submit" value="Create" class="btn btn-primary"/>
    </fieldset>
}

3) 提交调用帖子时

[HttpPost]
public ActionResult QuickPane(QuizPane quizpane)
{
    if (ModelState.IsValid)
    {
        db.QuizPanes.Add(quizpane);
        db.SaveChanges();
         return PartialView("_quizpanelist", quizpane);
    }
    return View(quizpane); //tried a few different things here
 }

4) 成功后，我会将新记录添加到表中并删除包含输入表单的 div。

function updatePaneList(data) {
    $("#overlay").remove();
    var rowcount = $(".expanded #panetable tr:last").count;
    $('.expanded #panetable  tbody:last').append(data);        
};

Answer 1

我通过执行以下操作解决了这个问题......尽管我不知道这是否是处理它的建议方法。另外，在这两种情况下您都应该返回部分 View 。

在返回部分 View 之前添加以下行

Response.AppendHeader("X-Error", "true")

然后在你的 javascript onsuccess 中

function doOnSuccess(data, status, xhr) {
   if (xhr.getResponseHeader('X-Error')) {
      //validation error occurred
   }
   else
   {
      //validation error did not occur
   }
}