如何防止使用jQuery選擇DropDownlist時的AutoPostBack

Question

我想在用戶選擇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() 
    }); 
} 

的問題是，即使用戶選擇「取消」，也會發生回傳。如果我將處理程序移至click事件，它就會起作用。但對我來說感覺很笨拙。

編輯

更正：它不工作的onclick，因爲對話可以防止選擇，因此當用戶選擇OK，沒有任何變化已經發生，也沒有回傳當你想要它！

編輯2

DropDownList控件是一個UpdatePanel內部，使得可能影響行爲。

Answer 1

果然，從更新面板取消異步回送需要不同的技術：

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"

Answer 2

您需要return從功能以及，像這樣：

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

目前不被使用的return值。這也將工作：

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

此外，我相當確定要等號點擊這裏：

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

目前它的歸零了onbeforeunload處理程序，如果它存在。

Answer 3

閱讀this solution後，我只是r我DropDownLists emoved的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); 
    } 
}); 

Answer 4

我知道這個問題是慈祥的老人，但是因爲它在谷歌搜索中彈出，當我需要一個答案時，我會在這裏發佈解決方案。我認爲它比之前發佈的更簡單。

我把它從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設置爲前進它不應該返回任何東西。