Unobtrusive Ajax删除确认功能失效问题排查

问题原因 #

原代码里的onclick="ConfirmDelete"只是引用了函数名称，没有执行函数，也没有返回函数的结果，导致点击按钮时不会触发确认弹窗，表单直接执行提交逻辑。

修正方法 #

方法1：修复onclick事件

将提交按钮的onclick属性改为执行函数并返回结果，这样才能根据用户的选择阻止或允许表单提交：

修正后的表单代码：

<form data-ajax="true" data-ajax-method="post"  
    data-ajax-url="@(Url.Action("DeleteUserModel", "AccountAdmin"))"
    data-ajax-mode="replace" data-ajax-update="#deleteDiv"
    data-ajax-loading="#ajax" data-ajax-failure="failed"
    data-ajax-success="ondeletesuccess">
     <input type="hidden" name="userName" value="@user.UserName" />
     <input type="submit" class="btn btn-danger" onclick="return ConfirmDelete()"
            value="Delete" />
 </form>

对应的JS函数可简化：

<script>
  function ConfirmDelete() {
      return confirm("Are you sure to delete?");
  }
</script>

方法2：使用jQuery Unobtrusive Ajax自带的确认属性

jQuery Unobtrusive Ajax提供了data-ajax-confirm属性，无需手动编写JS函数，直接在form标签添加该属性即可实现确认弹窗：

修正后的表单代码：

<form data-ajax="true" data-ajax-method="post"  
    data-ajax-url="@(Url.Action("DeleteUserModel", "AccountAdmin"))"
    data-ajax-mode="replace" data-ajax-update="#deleteDiv"
    data-ajax-loading="#ajax" data-ajax-failure="failed"
    data-ajax-success="ondeletesuccess"
    data-ajax-confirm="Are you sure to delete?">
     <input type="hidden" name="userName" value="@user.UserName" />
     <input type="submit" class="btn btn-danger" value="Delete" />
 </form>

这种方式可直接移除原来的ConfirmDelete函数，更符合框架设计思路。

内容的提问来源于stack exchange，提问作者mz1378