在确认删除之前做 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，链接仍会激活。我认为，当您使用锚标记并使用 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;
}

Answer 2

我是这样做的：删除链接并将 OnClick 事件赋予图像。用于检查和调用删除链接的 Javascript。

columns.Template(
            @<text>
                <img src="~/Content/Images/DeleteItem.gif" alt="Delete" style="cursor:pointer;" onclick="deleteConfirmation(@item.Id)" />
            </text>
        ).Width(50).HtmlAttributes(new { style = "text-align:center" });
<script type="text/javascript">
    function deleteConfirmation(recordId) {
        $.ajax({
            url: '@Url.Action("ValidateDelete")',
            type: 'GET',
            data: { id: recordId },
            success: function (result) {
                if (result) {
                    var userConfirm = confirm('Are you sure you want to delete this record?')
                    if (userConfirm) {
                        window.location.href = '@HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString()/Delete/' + recordId;
                    }
                }
                else {
                    alert('Delete not allowed, the record is in use!');
                }
            }
        });
    }
</script>