jquery - 使用 jQuery Validate 进行验证并执行 AJAX 调用以返回部分 View

Question

我正在使用 ASP.NET MVC 4 和 jQuery Validate。

我的页面上有一个文本框和一个按钮。它是一个按钮，不是提交按钮。单击该按钮时，我会验证输入到文本框中的数字并显示 2 个部分 View 中的 1 个。

这是我的 HTML 标记:

@Html.TextBoxFor(x => x.ChangeIncidentNumber)
<button id="verifyButton" type="button">Verify</button>
@Html.ValidationMessageFor(x => x.ChangeIncidentNumber)

在我开始使用 jQuery Validate 之前，我是这样做的:

$(document).ready(function () {
     $('#verifyButton').click(function () {
          $.ajax(
          {
               type: "POST",
               url: "/Server/GetChangeIncidentDetails",
               data: { changeIncidentNumber: $('#ChangeIncidentNumber').val() },
               dataType: "html",
               success: function (result) {
                    var domElement = $(result);
                    $("#changeIncidentDetails").html(domElement);
               }
          });
     });
});

我的GetChangeIncidentDetails操作方法:

public ActionResult GetChangeIncidentDetails(string changeIncidentNumber)
{
     ImplementationType implementationType = GetImplementationType(changeIncidentNumber);

     try
     {
          if (implementationType == ImplementationType.Change)
          {
               Change change = changeService.FindChangeByNumber(changeIncidentNumber);
               if (change != null)
               {
                    ChangeViewModel viewModel = Mapper.Map<ChangeViewModel>(change);

                    return PartialView("ChangeInformation", viewModel);
               }
               else
               {
                    // If it is null then I want to display an error message on the front end
               }
          }
          else if (implementationType == ImplementationType.Incident)
          {
               // Code is almost similar as above
          }
          else
          {
          }
     }
     catch (Exception ex)
     {
          // Handle error
     }
}

在进入上面的操作方法之前，我将 jQuery Validate 添加到图片中以处理一些客户端验证。这是我目前拥有的:

$(document).ready(function () {
     $("#searchForm").validate({
          rules: {
               ChangeIncidentNumber: "required"
          },
          messages: {
               ChangeIncidentNumber: "Required"
          }
     });

     $('#verifyButton').click(function () {
          $('#searchForm').valid();
     });
});

我不确定如何将两者合并在一起，验证和 ajax 调用是否可以一起完成，我是否需要将其分开，以及如何显示客户端错误消息 if change = = null？

Answer 1

我相信你能做到:

  $('#verifyButton').click(function () {
          $('#searchForm').validate();

          if($('#searchForm').valid()){    
              $.ajax({
                   type: "POST",
                   url: "/Server/GetChangeIncidentDetails",
                   data: { changeIncidentNumber: $('#ChangeIncidentNumber').val() },
                   dataType: "html",
                   success: function (result) {
                       var domElement = $(result);
                       $("#changeIncidentDetails").html(domElement);
                       }
              });
          }
     });

注意我没有检查语法到底可能有多余或缺失的 } 或 )

要返回错误，您可以从操作方法返回一个 json 对象，如下所示

{success:true/false, 
 data:"jsondatafromactionmethod",
 error:"errormessagehere"}

如果成功，您将执行 html 替换/插入，否则您将按照您想要的方式显示错误。