Question

我刚开始学习jquery和JavaScript，所以我可以用我当前的asp.net项目来实现它。然而，我很难理解如何制作一个对话框，当用户试图按下删除按钮时，该对话框将显示出来，然后如果用户选择“是”按钮，它将转到asp.net代码背后的删除功能，或者如果用户选择了“否”，它将被终止，不会采取任何行动。

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

提前谢谢。

Answer 1

在javascript中，您可以使用confirm来阻止表单提交，例如。

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

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

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

Answer 2

我假设您希望删除实际上是调用事件处理程序的回发的结果。正如其他人所指出的，您也可以使用AJAX来实现这一点，而且这可能更容易实现。

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

请参阅对autopostback的引用，了解它是如何工作的，以及如何模拟它。

Answer 3

一个简单的例子（不需要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 4

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

看看http://docs.jquery.com/UI/Dialog和http://jqueryui.com/demos/dialog/了解如何使用它的一些示例。

特别是，看看第二个链接和“Confirmation Dialog”示例。我认为，这几乎完全证明了你想做什么。只需点击演示下方的“查看源代码”链接。

Answer 5

完全未经测试，但你应该明白。。。这个片段将类“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;
});

友情链接