ASP.NET MVC 在 jQuery 表单上处理服务器端验证 wizard/tabs

Question

我正在处理一个大型表单，我希望通过将其分成 jQuery 表单向导（jQuery 选项卡式面板）来提高其可用性。

我已经实现了客户端验证和服务器端验证。在移动到下一个选项卡式面板之前，在每个选项卡式面板上执行客户端验证，并且服务器端验证仅在表单发布到服务器后执行。

我遇到的问题是如何最好地处理服务器端验证错误。目前，如果表单被发布到服务器，它 returns 表单并显示任何错误，但是这对于 jQuery 选项卡式面板并不能很好地工作，因为选项卡式面板一旦表单重置为其默认状态被退回。

如果表单未通过服务器端验证，我该如何重新加载表单并自动显示选项卡式面板，其中包含未通过服务器端验证的输入。例如，假设我的表单向导中有三个选项卡式面板。如果第三个选项卡式面板中的输入未通过服务器端验证，我该如何重新加载显示第三个选项卡式面板的表单。

我已经尝试从向导服务器端创建，其中每个部分都有自己的视图和控制器操作，但是使用这种方法很难创建导航栏以在表单部分之间移动。

Answer 1

我遇到了类似的问题，我使用了以下解决方案：

Post 通过 jquery ajax

形成数据

$("#save").on("click", function (e) {
      //clear error if exists before
      var $form = $("#saveform");          
      $.post($form.attr("action"), $form.serialize(), function(result) {
         if (result.ok) {
            //handle success
         } else {
            handleError($form, result);
         }
      });
});

在服务器端验证数据并将json结果发送给客户端（正常或错误）。

if (ModelState.IsValid)
{
   return Json(new {ok = true});
}
else
{
   return Json(new {ok = false, errors= ModelState.Values.SelectMany(x => x.Errors)});
}

在客户端处理结果（如果在表单和激活选项卡中显示任何错误）

function handleError($form, result) {
    for (var i = 0; i < result.errors.length; i++) {
        var item = result.errors[i];
        for (var j = 0; j < item.MemberNames.length; j++) {
            var input = $form.find("[name=" + item.MemberNames[j] + "]");
            var tab= input.closest(".tab");
            tab.addClass("active");
            //show error(near the input or in summary)
        }
    }
}

ASP.NET MVC 在 jQuery 表单上处理服务器端验证 wizard/tabs

ASP.NET MVC handling server side validation on jQuery form wizard/tabs

asp.net-mvc

asp.net-mvc-validation

model-validation

razor