使用 jQuery $.ajax 进行 ASP.NET MVC 验证答案

【问题标题】：ASP.NET MVC Validation with jQuery $.ajax使用 jQuery $.ajax 进行 ASP.NET MVC 验证
【发布时间】：2011-05-08 16:34:58
【问题描述】：

我有一种情况，我通过 jQuery $.ajax 向控制器发送数据，数据是一个序列化的 json 字符串。 (MVC 3.0)

它很好地绑定了它 - 我的控制器收到了结果并且它们是正确的。现在，我在回发验证时遇到问题。我怀疑这是因为并非我的所有对象都必须在本地形成控件。

问题是我必须使用 javascript 将数据“添加”到我的模型中，因为模型需要集合中的一个项目。使用 javascript、jquery 和模板，我选择了这个项目，并在模型将其发送到控制器之前将其添加到模型中。但是在回发时，此数据不存在（这是意料之中的，因为它必须将其反序列化到 javascript 数组中 - 这不是我的问题）。

我的问题是它执行双重回发以进行验证，或者根本不执行。如果我使用e.preventDefault(); 停止正常的表单发布，我永远不会得到验证。但是，如果我不使用它，那么我总是会收到一个重复的帖子，在我看来最终不会重定向。

我的jQuery代码如下..

   $('form').submit(function(e){

    var data = $('form').serializeObject();
    data.Quality = // this line adds some data from a JSON object.

    var json = JSON.stringify(data);

    $.ajax({
      url: location.href,
      type: 'POST',
      dataType: 'json',
      data: json,
      contentType: 'application/json',
      success: function (data) {
       $("#jsonOutput").html(json);
      }
    });

    e.preventDefault();
   });

这里是 serializeObject 函数。

$.fn.serializeObject = function () {
 var o = {};
 var a = this.serializeArray();
 $.each(a, function () {
  if (o[this.name]) {
   if (!o[this.name].push) {
    o[this.name] = [o[this.name]];
   }
   o[this.name].push(this.value || '');
  } else {
   o[this.name] = this.value || '';
  }
 });
 return o;
};

这是我的控制器动作。

  [HttpPost]
  public ActionResult Blueprint(Blueprint blueprint)
  {
   if (ModelState.IsValid)
   {
    using (var context = new Mapping.DataContext())
    {
     context.Blueprints.Add(blueprint);
     context.SaveChanges();

     return Json(Redirect("/List/Blueprints")); 
    }
   }

   return View(blueprint);
  }

如果需要，我会发布更多代码，但我认为这就是相关的全部内容。我正在使用库 knockoutjs 进行模板，如果这完全相关的话。如果适用，请告诉我您还需要查看什么。

【问题讨论】：

标签： jquery asp.net-mvc-3 validation knockout.js

【解决方案1】：

 $("#jsonOutput").html(json);

就双重发布而言，发生这种情况是因为您的事件处理程序正在提交请求，而实际的表单提交。为了摆脱这个问题，你需要这样的东西：

$('form').submit(function(e){

    var data = $('form').serializeObject();
    data.Quality = // this line adds some data from a JSON object.

    var json = JSON.stringify(data);

    $.ajax({
      url: location.href,
      type: 'POST',
      dataType: 'json',
      data: json,
      contentType: 'application/json',
      success: function (data) {
       $("#jsonOutput").html(json);
      }
    });

    return false;
   });

return false，将告诉表单阻止事件被处理，就像你告诉系统你已经处理了它一样。

我看到的另一个问题是，您通过设置 dataType:'json' 请求 json 这意味着您的请求需要一个 json 对象，并且在验证失败的情况下，您将返回完整视图.这可能不是您想要做的。

另请注意：

$("#jsonOutput").html(json);

成功响应时调用的是加载您随请求发送的 json 的值，而不是响应中的数据。

【讨论】：