jquery - 即使确认失败，ASP.NET MVC Ajax Post 也会执行 OnComplete

Question

我有一个 Ajax 表单，可以使用 OnComplete AjaxOption 从表中动态删除行。效果很好。

问题是，即使我在确认对话框中点击“取消”，它仍然会执行 OnComplete javascript。因此，表单不会发布，但看起来就像对用户所做的那样(该行已从表中删除)。

有什么想法吗？源码如下:

OnComplete JS:

 function fadeDel(id) {
    $("#product" + id).fadeOut(500);
  }

表单代码:

<% using (Ajax.BeginForm("DeleteProduct", "Commerce", new { id = product.Id }, 
    new AjaxOptions 
    { 
      OnSuccess = "fadeDel(" + product.Id + ")", 
      Confirm = "Are you sure you want to delete" + product.Title 
    }, new { id = "frm" + product.Id }))
  { %>
    <%= Html.SubmitImage("Delete", Url.Content("~/content/images/12-em-cross.png"))%>
<%} %>

Answer 1

OnSuccess 参数采用一个字符串，该字符串给出要调用的函数的名称，而不是实际的函数调用。所以你可以传递“fadeDel”，但不能传递“fadeDel(5)”。当您向它传递 Javascript 调用时，它会立即对其进行评估，因此当您单击“提交”时，甚至在进行 AJAX 调用之前，它就会立即执行 fadeDel(5)。您可以通过使用 Firebug 或 IE 测试工具进行调试来验证这一点。

如果您想使用 OnSuccess 方法来处理此问题，则该方法需要是不带任何参数的方法。一种方法是从“this”中获取产品 ID，这将是提交表单。您可以从表单 ID 解析它，也可以将其包含在表单的 Title 或 Name 属性中:

<% using (Ajax.BeginForm("DeleteProduct", "Commerce", new { id = product.Id }, 
new AjaxOptions 
{ 
  OnSuccess = "fadeDel", 
  Confirm = "Are you sure you want to delete" + product.Title 
}, new { id = "frm" + product.Id, name = product.Id }))
{ %>
  <input type="submit" name="Delete" />
<%} %>

然后您可以更新 fadeDel 以从“this”中提取值:

function fadeDel() {
    var id = this.name;
    $("#product" + id).fadeOut(500);
}

还有其他方法可以处理这个问题 - 例如jQuery.ajax() 调用 - 但无参数 OnSuccess 调用应该可以正常工作。