如何使用 Jquery 在 Ajax 调用中调用 Mvc 服务器端验证 [关闭]

Question

HTML

<div class="portlet-body"> @using (Html.BeginForm()) { @Html.AntiForgeryToken()
  <div class="form-horizontal">
    <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group"> @Html.LabelFor(model => model.Details, htmlAttributes: new { @class = "control-label col-md-2" })
      <div class="col-md-10"> @Html.EditorFor(model => model.Details, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Details, "", new { @class = "text-danger" }) </div>
    </div>
    <div class="form-group">
      <div class="col-md-offset-2 col-md-10">
        <input type="button" onclick="MainSave()" value="Create" class="btn btn-primary" /> </div>
    </div>
  </div> } </div> 

Java Script JQuery

var MainSave = function() {
  var Geturl = $("#hidUrlofsave").val();
  var Details = $("#Details").val();
  var Id = $("#hidid").val();
  if (Details != "") {
    $.ajax({
      url: Geturl,
      type: "Post",
      data: {
        Details: Details,
        Id: Id
      },
      success: function(res) {
        if (res == "true") {
          Loaditem();
          AutoLoader("Save", "success");
          $("#Details").val("");
        } else if (res == "update") {
          Loaditem();
          AutoLoader("Update", "success");
          $("#hidid").val("");
        } else {
          AutoLoader("error", "error");
        }
      }
    })
  } else {
    $("#Details").css("border", "solid 1px red")
  }
}

C Sharp Mvc 动作代码

[HttpPost] 
public string ErpMainItem(tbl_inv_Main main) {
      try {
        if (main.Id == 0) {
          var ad = new MainRepoistory().Add(main);
          if (ad) {
            return "true";
          } else {
            return "false";
          }
        } else {
          var ad = new MainRepoistory().Update(main);
          if (ad) {
            return "update";
          } else {
            return "false";
          }
        }
      } catch (Exception e) {
        return "false";
      }
    }

Answer 1

您不能只调用使用 ajax 在服务器端编写的验证，这样做也不是一个好方法。

您可以在发布表单时验证您的模型

//Check if posted model data is valid or not
//checks every validation data annotation
if(ModelState.IsValid)
{
  //<Model is valid
}

为了在客户端获得相同的效果（验证），您必须包含 3 个文件

1. jQuery.js
2. jquery.validate.js
3. jquery.validate.unobtrusive.js

您可以使用上述文件的缩小版本，但应保持顺序。之后执行客户端验证而不向服务器发送数据。您将获得在服务器端编写的所有验证规则。像 Required、MaxLength、Email 等用于绑定到模型属性的 HTML 元素。

@Html.TextBoxFor(m=>m.Email, new{@class="form-control"}

更新

如果通过 Ajax 发布数据并且按钮不是提交类型，则可以使用 .valid() 函数验证表单。

$("#postMyData").on('click', function(e){
   var isFormValid = $("#myForm").valid();
   if(isFormValid)
   {
    //Ajax Call
   }
});