Question

我刚开始学习jquery和JavaScript，所以我可以用我当前的asp.net项目来实现它。但是我很难理解如何创建一个对话框，当用户尝试按下删除按钮时会显示该对话框然后如果用户选择“是”按钮，它将在asp.net后面的代码中执行删除功能。如果用户选择“否”，那么它将被终止，不会采取任何行动。

注意：我不想找人教我，我只是想要一些解释，代码示例和信息链接，我可以阅读和理解并亲自尝试。

提前致谢。

Answer 1

一个简单的例子（不需要jQuery）将是：

function deleteConfirm ()
{
    if ( confirm('Are you sure you want to delete this?') )
    {
        // do ajax call (jquery would be handy for this)
        // or redirect to delete script
    }

    return false;
}

此方法使用内置的javascript confirm（）函数。如果您打算进行ajax调用来访问您的asp.net代码，那么我建议使用jQuery的ajax函数：

jQuery.ajax，jQuery.post，jQuery.get

Answer 2

我假设您希望删除实际上是调用事件处理程序的回发的结果。您也可以像其他人注意到的那样使用AJAX执行此操作，这样做可能会更容易。

基本思路是让按钮上的click功能弹出对话框，然后返回false以停止正常动作。在“是”回调处理程序中，您需要设置__EVENTTARGET并使用__doPostback来模拟按钮单击。

请参阅此reference on autopostback，了解其工作原理以及如何模拟它。

Answer 3

在javascript中，您可以使用“确认”来阻止表单提交，例如

<form onsubmit="return confirm('do you really want to delete this?');" method="post">
<input type="submit" value="click me">
</form>

如果您在确认框中单击[确定]然后表单将被提交，则'return'将返回'true'，如果您单击[取消]则返回'false'，然后表单将不会被提交。

[编辑] 一些可能有用的链接：

Answer 4

jQuery UI 1.7现在内置了一个对话框组件。

有关如何使用它的一些示例，请查看http://docs.jquery.com/UI/Dialog和http://jqueryui.com/demos/dialog/。

特别是，请查看第二个链接和“确认对话框”示例。它完全展示了我想要做的事情。只需点击演示下方的“查看来源”链接即可。

Answer 5

完全未经测试，但您应该明白...此片段将所有元素的click事件与“delete_user”类绑定到确认对话框。

// Bind the click event to all
$('.delete_user').click(function () {
    // Find the user's ID which is the value of a hidden INPUT element with the
    // same parent as the deletion button.
    var userId = $(this).siblings(':hidden').eq(0).val();

    // Make the user confirm the deletion.
    var result = confirm('Are you sure?');

    // If the user has confirmed deletion, make an AJAX request to:
    // /delete_user/?user=<ID>
    if (result) {
        $.ajax({
            data: { user: userId },
            url: '/delete_user/',
            success: function () { alert('Successfully deleted user!'); },
            error: function () { alert('Error when trying to delete user!'); }
        });
    }

    // Don't ever do what the browser wants you to do by returning false.
    return false;
});

需要一些关于jquery中对话框的简单解释吗？

5 个答案: