javascript - 在确认删除之前进行 AJAX 检查

Question

我有一个 Telerik 网格。对于外行来说，这仅意味着我在页面上有一个表格。

在这个 Telerik 网格上，我有一个用于删除记录的列。我最初拥有它是为了让用户可以单击，然后它会触发一个 javascript 确认对话框。如果用户点击“确定”，它将调用“删除”链接；如果没有，那么它将取消而不刷新页面。原始代码如下。

    columns.Template(
                @<text><a href='@Url.Content("~/HazardControl/Delete/" + @item.Id)' 
style="cursor:pointer;" onclick = "return confirm('Are you sure you want to delete this record?');">
                    <img src="~/Content/Images/DeleteItem.gif" alt="Delete" />
                </a></text>
            ).Width(50).HtmlAttributes(new { style = "text-align:center" });

现在，我现在的要求是他们想要在确认删除之前检查记录是否符合删除条件，所以现在我的代码如下所示:

    columns.Template(
                    @<text><a href='@Url.Content("~/Training/Delete/" + @item.Id)' 
style="cursor:pointer;" onclick="deleteConfirmation(@item.Id)">
                        <img src="~/Content/Images/DeleteItem.gif" alt="Delete" />
                    </a></text>
                ).Width(50).HtmlAttributes(new { style = "text-align:center" });    

    <script type="text/javascript" >
            function deleteConfirmation(recordId) {
                $.ajax({
                    url: '@Url.Action("ValidateDelete", "Training")',
                    type: 'POST',
                    data: { id: recordId },
                    success: function (result) {
                        var deleteRecord = false;
                        if (result) {
                            var userConfirm = confirm('Are you sure you want to delete this record?')
                            if (userConfirm) {
                                deleteRecord = true;
                            }
                        }
                        else {
                            alert('Delete no allowed, the record is in use!');
                        }
                        return deleteRecord;
                    }
                });
                return false;
            }
        </script>

我以为我可以在确认之前使用 AJAX 调用来完成此操作，但实际发生的情况是验证部分正确发生，然后尽管返回 false 或 true，链接仍然会激活。我认为当您使用 anchor 标记并使用 onclick 方法并返回 false 时，什么都不会发生，但使用 AJAX 时似乎并非如此。我在这里做错了什么？这以前做过吗？这里可以吗？

Answer 1

AJAX 调用是异步发生的，因此返回 true 或 false 对事件冒泡没有影响。

在下面的示例中，如果它返回 true，它将触发原始元素的单击，这次将返回 true 并允许链接单击通过。如果您有多个链接，则变量 deleteRecord 可能需要重命名，并且 #linkid 应针对最初单击的元素。如果您为 deleteItem-@item.Id 的链接分配了一个 ID，则可以在 JavaScript 中获取它。

var deleteRecord = false;

function deleteConfirmation(recordId) {
    if(!deleteRecord)
    {
        $.ajax({
            url: '@Url.Action("ValidateDelete", "Training")',
            type: 'POST',
            data: { id: recordId },
            success: function (result) {
                if (result) {
                    var userConfirm = confirm('Are you sure you want to delete this record?')
                    if (userConfirm) {
                        deleteRecord = true;
                        $("#linkid").click();
                    }
                }
                else {
                    alert('Delete not allowed, the record is in use!');
                }
            }
        });
    }
    return deleteRecord;
}