即使确认失败,ASP.NET MVC Ajax也会执行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调用时,它会立即对它进行评估,因此当你点击提交时它就会执行fadeDel(5),甚至在进行AJAX调用之前.您可以通过使用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调用应该可以正常工作.