使用 jQuery 选择 DropDownlist 时如何防止 AutoPostBack答案

【问题标题】：How to prevent AutoPostBack when DropDownlist is selected using jQuery使用 jQuery 选择 DropDownlist 时如何防止 AutoPostBack
【发布时间】：2010-07-21 10:11:24
【问题描述】：

我想在用户选择 DropDownList 中的项目时显示确认对话框。如果用户按“取消”，我想停止回发。这是我添加到 onchange 事件的函数：

function imitateConfirmUnload(event) {
    if (window.onbeforeunload = null)
        return true;

    return confirm("Are you sure you want to navigate away from this page?\n\nYou have unsaved changes\n\nPress OK to continue or Cancel to stay on the current page.");
}

这是我的启动脚本中用于将处理程序添加到事件的相关代码：

function addConfirmToWarnClasses() {

    $('.warn').change(function() {
        imitateConfirmUnload()
    });
}

问题是即使用户选择“取消”也会发生回发。如果我将处理程序移到单击事件上，它就可以工作。但我觉得它很笨重。

编辑

更正：在点击时它不起作用，因为对话框阻止选择，所以当用户选择确定时，没有发生任何更改，并且在你想要的时候也没有回发！

编辑 2

DropDownList 位于 UpdatePanel 内，因此可能会影响行为。

【问题讨论】：

标签： asp.net jquery javascript-events

【解决方案1】：

阅读this solution后，我刚刚删除了DropDownLists上的AutoPostBack并使用它，因为它是如此简单：

$("#DropDownList1").change(function (e) {
    if ($(this).val() == "0") {
        //do nothing
    }
    else {
        //do postback
        setTimeout("__doPostBack('DropDownList1','')", 0);
    }
});

或者如果你有多个DropDownLists，你想创建AutoPostBack：

$("select").change(function (e) {
    if ($(this).val() == "0") {
        //do nothing
    }
    else {
        //do postback
        setTimeout("__doPostBack('" + this.id + "','')", 0);
    }
});

【讨论】：

【解决方案2】：

您还需要从该函数中return，如下所示：

$('.warn').change(imitateConfirmUnload);

当前未使用 return 值。这也可以：

$('.warn').change(function() {
  return imitateConfirmUnload();
});

另外，我很漂亮确定你想在这里进行等号检查：

if (window.onbeforeunload == null)
    return true;

目前，如果 onbeforeunload 处理程序存在，它会将其清除。

【讨论】：

感谢您的回答。它很快发现了两个问题。我认为这会解决它。令人惊讶的是它没有。回发仍然发生。 DropDownList 在 UpdatePanel 内，所以我想知道这是否会影响行为....？
@Colin - 是的，绝对的。 UpdatePanel 彻底改变了游戏，它在尝试发布时被 Microsoft 脚本捕获和处理。

【解决方案3】：

我知道这个问题有点老了，但是当我需要答案时它会在谷歌搜索中弹出，所以我会在这里发布解决方案。我认为它比以前发布的更简单。

我从http://forums.asp.net/p/1475520/3432980.aspx：

<script type="text/javascript">
    function stopPostback()
    {
        if (blahblah)
            return true; // stop postback


        return false;
    }
</script>

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" onchange="if (stopPostback()) return false;">

这里的关键部分是 onchage 中的代码：要取消 AutoPostBack，它必须返回一些东西（不管是真还是假），并且要继续 AutoPostBack，它不应该返回任何东西。

【讨论】：

您应该尝试将标记与行为分开。看到这个：superprofundo.com/2010/12/29/… Javascript 事件作为内联属性不再存在于我的脑海中。 Nick Craver 的代码很好，但由于 UpdatePanel，它不是公认的答案

【解决方案4】：

果然，从更新面板取消异步回发需要不同的技术：

http://msdn.microsoft.com/en-us/magazine/cc163413.aspx

Prevent ASP.net __doPostback() from jQuery submit() within UpdatePanel

//Adds an event handler to confirm unsaved changes when an asynchronous postback is initialised by an UpdatePanel
function setConfirmAsyncPostBack() {

    if (typeof (Sys.WebForms) === "undefined" || typeof (Sys.WebForms.PageRequestManager) === "undefined")
        return;

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(confirmAsyncPostBack);
}

//An event handler for asynchronous postbacks that confirms unsaved changes, cancelling the postback if they are not confirmed
//Adds the confirmation to elements that have a css class of "warn"
function confirmAsyncPostBack(sender, args) {
    if (window.onbeforeunload != null && args.get_postBackElement().className == "warn" && !unloadConfirmed())
        args.set_cancel(true);
}

//Displays a confirmation dialog that imitates the dialog displayed by onbeforeunload
function unloadConfirmed() {

    var confirmed = confirm("Are you sure you want to navigate away from this page?\n\n" + unloadMessage() + "\n\nPress OK to continue or Cancel to stay on the current page.");
    if (confirmed)
        window.onbeforeunload = null;
    return confirmed;
}

function unloadMessage() {

    return 'You have unsaved changes.';
}

此代码与我的另一个问题中描述的问题有关：DropDownList not firing onbeforeunload when AutoPostBack="True"

【讨论】：