如果我在jQuery UI对话框中运行表单,如何处理服务器端验证错误？

Question

用户发布表单后,我的控制器中有以下代码,但如果验证失败(_applicationValidator.Validate),我通常会重新加载"编辑"视图,但在这种情况下我想保持对话框打开,只是在里面显示这些错误对话框.

控制器代码:

  [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Update(ApplicationUpdater applicationUpdater_)
    {
        if (_applicationValidator.Validate(applicationUpdater_, ModelState, ValueProvider))
        {
            _repo.UpdateApplication(applicationUpdater_);
            ApplicationsViewModel vm = new ApplicationsViewModel();
            vm.Applications = _repo.GetApplications();
            return View("Index", vm);
        }
        else
        {
            ApplicationViewModel vm = GetApplicationVM();
            return View("Edit", vm);
        }
    }

查看代码(jQuery)

 $(".showEditPopup").click(function() {
            $.post("Applications/ShowEdit",
                { recnum: $(this).parents('tr:first').attr("recnum") },
                function(htmlResult) {
                    $("#EditUserControlDiv").remove();
                    $("#container").append(htmlResult);
                    $("#container select[multiple]").asmSelect();
                    $("#EditUserControlDiv").dialog(
                    {
                        height: 675,
                        width: 650,
                        modal: true
                    }
                    );
                }
           );
        });

Answer 1

如上所述

但在这种情况下,我想保持拨号盘打开,只是在对话框中显示这些错误

好.

打开对话框后,您必须这样做

• 隐藏上一条错误消息

...

open: function(event, ui) {
    $(".error").css("display", "none");
}

单击对话框按钮后,您必须

• 禁用JQuery UI
• 显示"loading ..."图像
• 发送表格

...

$("#loading").css("display", "block");

panel.dialog("disable");

panel.dialog("option", "disabled", true);

加载响应后(您可以使用JSON作为响应),您必须

• 检查是否有错误.

...

// var response plays the role of JSON response

var response = {
    "errors":[
        {
            "property-name":"name",
            "error":"Name is required"
        },
        {
            "property-name":"age",
            "error":""
        }
    ]
};

var hasErrors = false;

for(var i = 0; i < response.errors.length; i++) {
    if(response.errors[i].error != "") {
         hasErrors = true;

         $("#" + response.errors[i]["property-name"] + "-error")
           .text(response.errors[i]["error"])
           .css("display", "block");
    }
}

if(!hasErrors) {
    panel.dialog("close");

    alert("success form!");
} else {
    panel.dialog("enable");

    panel.dialog("option", "disabled", false);
}

在这里你可以看到行动

请注意,您有默认行为.所以你可以将它放在外部函数中