解决ajaxToolkit:ModalPopupExtender嵌套弹窗关闭异常问题

我开发了一个网页，流程如下：

• 先显示ajaxToolkit:ModalPopupExtender（ID为MPE_Example_Panel_Like_Browser）弹窗
• 点击该弹窗内的按钮后，弹出第二个ajaxToolkit:ModalPopupExtender（ID为MPE_Example_Panel_Like_Browser_Confirmation）确认弹窗
• 点击第二个弹窗的OK按钮执行事件时，会隐藏第二个弹窗并为标签赋值，但第一个弹窗也随之关闭，我希望仅关闭第二个弹窗。

标记代码 #

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<%@ Register Assembly="CrystalDecisions.Web, Version=13.0.4000.0, Culture=neutral, PublicKeyToken=692fbea5521e1304" Namespace="CrystalDecisions.Web" TagPrefix="CR" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Tests</title>
<link href="../Style_Sheet/Stylesheet1.css" rel="stylesheet" type="text/css" />
<style>
</style>
<script>
</script>

</head>
<body>

    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
        <asp:Label ID="lbModal_Response_Display" runat="server" Text=""></asp:Label>

        <!-- ModalPopupExtender Panel Like Browser -->

        <asp:Button ID="btnMPE_Example_Panel_Like_Browser" runat="server" Text="Display Panel Like Browser In A Modal Popup Extender"  />        
        <!-- Modal Popup Panel -->
        <asp:Panel ID="pnlMPE_Example_Panel_Like_Browser" style="border: 2px solid #ccc; width: 780px; height:950px;" runat="server" BackColor="#666666">    
            <!-- Title Bar & Controls -->
            <asp:Panel ID="pnlMPE_Example_Panel_Like_Browser_Header" runat="server" >
                <div > 
                </div>
            </asp:Panel>

            <!-- Main Content -->
            <asp:Panel ID="pnlMPE_Example_Panel_Like_Browser_Content" runat="server" style="height:945px;" BackColor="White">
                <h3>We are restricted to the Browser Height/Width</h3>
                <p>This panel acts as an inner browser window.</p>

                <asp:Label ID="lbMPE_Example_Panel_Like_Browser_Saved" runat="server" Text=""></asp:Label>
                <asp:Button ID="btMPE_Example_Panel_Like_Browser_Save" runat="server" Text="Save" CausesValidation = "false" onclick="btnMPE_Example_Panel_Like_Browser_Save_Click"/>
                <asp:Button ID="btnMPE_Example_Panel_Like_Browser_Close" runat="server" Text="Close" onclick="btnMPE_Example_Panel_Like_Browser_Close_Click" CausesValidation = "false"/>
                <asp:Button ID="btnMPE_Example_Panel_Like_Browser_Message" runat="server" Text="Message" CausesValidation="false" onclick="btnMPE_Example_Panel_Like_Browser_Message_Click"/>

            </asp:Panel>    
        </asp:Panel>


        <!-- ModalPopupExtender Control -->
        <ajaxToolkit:ModalPopupExtender ID="MPE_Example_Panel_Like_Browser" runat="server"
            TargetControlID="btnMPE_Example_Panel_Like_Browser"
            PopupControlID="pnlMPE_Example_Panel_Like_Browser"
            BackgroundCssClass="modalBackground"
            BehaviorID="mpe_bhid2">
        </ajaxToolkit:ModalPopupExtender>

        <!-- ModalPopupExtender Panel Like Browser Confirmation -->
        <!-- Modal Popup Panel -->
        <asp:Panel ID="pnlMPE_Example_Panel_Like_Browser_Confirmation" runat="server" CssClass="modalPopup" >
            <h3>Modal Popup</h3>
            <p>Are you sure you want to Save?</p>
            <asp:Button ID="btnMPE_Example_Panel_Like_Browser_Confirmation_OK" runat="server" Text="OK" OnClick="btnMPE_Example_Panel_Like_Browser_Confirmation_OK_Click" CausesValidation="false"/>
            <asp:Button ID="btnMPE_Example_Panel_Like_Browser_Confirmation_Cancel" runat="server" Text="Cancel" OnClick="btnMPE_Example_Panel_Like_Browser_Confirmation_Cancel_Click" CausesValidation="false"/>
        </asp:Panel>
        <!-- ModalPopupExtender Control -->
        <ajaxToolkit:ModalPopupExtender ID="MPE_Example_Panel_Like_Browser_Confirmation" runat="server"
            TargetControlID="btMPE_Example_Panel_Like_Browser_Save"
            PopupControlID="pnlMPE_Example_Panel_Like_Browser_Confirmation"
            BackgroundCssClass="modalBackground"
            BehaviorID="mpe_bhid3">
        </ajaxToolkit:ModalPopupExtender>
        <!-- ModalPopupExtender Panel Like Browser Confirmation -->

        <!-- ModalPopupExtender_Panel Like Browser -->

    </form>
</body>

</html>

后台代码 #

using AjaxControlToolkit;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using System.Runtime.CompilerServices;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        
        #region Modal Popup Example Panel Like Browser.
        protected void btnMPE_Example_Panel_Like_Browser_Close_Click(object sender, EventArgs e)
        {
            // DONT SET THE CANCELCONTROLID on the ModalPopupExtender
            // Set the CausesValidation = false on btnModal_Popup_No 
            // for this event to be fired
            MPE_Example_Panel_Like_Browser.Hide();
            lbModal_Response_Display.Text = "Modal Popup Example Panel Like Browser - Close";
        }

        protected void btnMPE_Example_Panel_Like_Browser_Save_Click(object sender, EventArgs e)
        {
            lbMPE_Example_Panel_Like_Browser_Saved.Text = "Save";           
            MPE_Example_Panel_Like_Browser_Confirmation.Show();            
        }
        #endregion Modal Popup Example Panel Like Browser.

        #region Modal Popup Example Panel Like Browser Confirmation.
        protected void btnMPE_Example_Panel_Like_Browser_Confirmation_OK_Click(object sender, EventArgs e)
        {
            MPE_Example_Panel_Like_Browser_Confirmation.Hide();            
            lbMPE_Example_Panel_Like_Browser_Saved.Text = "Saved";            
            lbModal_Response_Display.Text = "Modal Popup Example Panel Like Browser Confirmation - OK";
        }
        protected void btnMPE_Example_Panel_Like_Browser_Confirmation_Cancel_Click(object sender, EventArgs e)
        {
            MPE_Example_Panel_Like_Browser_Confirmation.Hide();            
            lbMPE_Example_Panel_Like_Browser_Saved.Text = "Cancel";            
            lbModal_Response_Display.Text = "Modal Popup Example Panel Like Browser Confirmation - Cancel";
        }
        #endregion Modal Popup Example Panel Like Browser Confirmation.

    }
}

CSS代码 #

.modalPopup {
    background-color: #fff;
    border: 3px solid #ccc;
    padding: 10px;
    width: 300px;
}

问题原因是：点击第二个弹窗的按钮触发回发后，第一个弹窗的显示状态未被保留，导致回发完成后第一个弹窗自动关闭。

只需在第二个弹窗的OK和Cancel按钮事件中，隐藏第二个弹窗后重新显示第一个弹窗即可。修改后的后台代码如下：

#region Modal Popup Example Panel Like Browser Confirmation.
protected void btnMPE_Example_Panel_Like_Browser_Confirmation_OK_Click(object sender, EventArgs e)
{
    MPE_Example_Panel_Like_Browser_Confirmation.Hide();            
    lbMPE_Example_Panel_Like_Browser_Saved.Text = "Saved";            
    lbModal_Response_Display.Text = "Modal Popup Example Panel Like Browser Confirmation - OK";
    MPE_Example_Panel_Like_Browser.Show();
}
protected void btnMPE_Example_Panel_Like_Browser_Confirmation_Cancel_Click(object sender, EventArgs e)
{
    MPE_Example_Panel_Like_Browser_Confirmation.Hide();            
    lbMPE_Example_Panel_Like_Browser_Saved.Text = "Cancel";            
    lbModal_Response_Display.Text = "Modal Popup Example Panel Like Browser Confirmation - Cancel";
    MPE_Example_Panel_Like_Browser.Show();
}
#endregion Modal Popup Example Panel Like Browser Confirmation.

内容的提问来源于stack exchange，提问作者Yuppski