ASP.NET MVC обрабатывает проверку на стороне сервера в мастере / вкладках формы jQuery

Question

Я работаю над большой формой, которую я ищу, чтобы улучшить удобство использования, разделив ее на мастера форм jQuery (панели с вкладками jQuery).

Я уже реализовал как проверку на стороне клиента, так и проверку на стороне сервера. Проверка на стороне клиента выполняется на каждой панели с вкладками перед переходом на следующую панель с вкладками, а проверка на стороне сервера выполняется только после публикации формы на сервере.

Проблема в том, как лучше всего обрабатывать ошибки проверки на стороне сервера. В настоящее время, если форма отправляется на сервер, она возвращает форму и показывает любые ошибки, однако это не очень хорошо работает с панелями с вкладками jQuery, поскольку панель с вкладками сбрасывается в состояние по умолчанию после возврата формы.

Если форма не проходит проверку на стороне сервера, как мне перезагрузить форму и автоматически показать панель с вкладками, на которой находятся входы, которые не прошли проверку на стороне сервера. Например, допустим, у меня есть три панели с вкладками в мастере форм. Если вход на третьей панели с вкладками не прошел проверку на стороне сервера, как мне перезагрузить форму с показанной третьей панелью с вкладками.

Я попытался создать серверную часть мастера, где каждый раздел имеет свое собственное представление и действие контроллера, однако при таком подходе гораздо сложнее создать панель навигации для перемещения между разделами формы.

Answer 1

У меня была похожая проблема, и я использовал следующее решение:

Опубликовать данные формы через 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)
        }
    }
}