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进行检查并调用Delete链接。

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>

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

2 个答案: