locked
updatepanel and modalpopupextender: Mutiple Modal panels appearing... RRS feed

  • Question

  • User-1507524388 posted

    I'm having a problem calling modalpopupextenders from inside an update panel. For some reason it's calling all of the popups instead of just the one specified in the code.

    Here's the code:

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestupdatePanel.aspx.vb" Inherits="ASPWebAppVB.TestupdatePanel" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
        <ajax:ToolkitScriptManager runat="Server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    
            <ContentTemplate>
    
                <asp:Button ID="Popup1Button" runat="server" Text="Show Popup 1" />&nbsp;&nbsp;&nbsp<asp:Button ID="TestUpdatePanelButton" runat="server" Text="Button" /><asp:Label ID="TestUpdatePanelLabel" runat="server" Text="Label"></asp:Label>
    
                <br />
                <br />
    
                <asp:Button ID="Popup2Button" runat="server" Text="Show Popup 2" />
    
            </ContentTemplate>
    
        </asp:UpdatePanel>
    
        <br />
        <br />
        <asp:Button ID="Button3" runat="server" Text="TestPostback" />
    
    
        <asp:Panel ID="ModalPanel1" runat="server" Width="600px" BackColor="#999999" BorderColor="Black" BorderStyle="Solid" BorderWidth="3px">
        Modal Panel 1<br />
        <asp:Button ID="ModalPanel1YesButton" runat="server" Text="Yes" OnClick="ModalPanel1Yes"/>&nbsp;<asp:Button ID="ModalPanel1NoButton" runat="server" Text="No" />
        </asp:Panel>
        <ajax:ModalPopupExtender ID="ModalPanel1MPE" runat="server" TargetControlId="HiddenButton" PopupControlID="ModalPanel1" />
    
    
    
        <asp:Panel ID="ModalPanel2" runat="server" Width="300px" BackColor="#999999" BorderColor="Black" BorderStyle="Solid" BorderWidth="3px">
        Modal Panel 2<br />
        <asp:Button ID="ModalPanel2YesButton" runat="server" Text="Yes" OnClick="ModalPanel2Yes"/>&nbsp;<asp:Button ID="ModalPanel2NoButton" runat="server" Text="No" />
        </asp:Panel>
        <ajax:ModalPopupExtender ID="ModalPanel2MPE" runat="server" TargetControlId="HiddenButton" PopupControlID="ModalPanel2" />
    
        <asp:Button ID="HiddenButton" style="display:none" runat="server" Text="Button" />
    
    
    </div>
    </form>
    </body>
    </html>

    and the code behind:

    Public Class TestupdatePanel
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
        End Sub
    
        Protected Sub TestUpdatePanelButton_Click(sender As Object, e As EventArgs) Handles TestUpdatePanelButton.Click
    
            If TestUpdatePanelLabel.Text = "Yes" Then
    
                TestUpdatePanelLabel.Text = "No"
    
            Else
    
                TestUpdatePanelLabel.Text = "Yes"
    
            End If
    
        End Sub
    
    
    
    
    
        Protected Sub Popup1Button_Click(sender As Object, e As EventArgs) Handles Popup1Button.Click
    
            ModalPanel1MPE.Show()
    
        End Sub
    
        Public Sub ModalPanel1Yes()
    
            TestUpdatePanelLabel.Text = "Panel 1"
    
        End Sub
    
    
    
        Protected Sub Popup2Button_Click(sender As Object, e As EventArgs) Handles Popup2Button.Click
    
            ModalPanel2MPE.Show()
    
        End Sub
    
    
        Public Sub ModalPanel2Yes()
    
            TestUpdatePanelLabel.Text = "Panel 2"
    
        End Sub
    End Class

    Pressing either Show Popup buttons displays both modalpopups.

    The test update panel button is just used to test that the update panel is working without posting back the entire page (changes the label text). The TestPostback button is just used to test that anything outside the updatepanel is posting back the entire page.

    Anybody got any idea why this isn't working? It works fine if I remove/comment out the update panel. I have also tried putting the ModalPopupExtenders/Panels/Hidden Button inside the update panel but the same thing happens.

    Tuesday, March 15, 2016 12:17 PM

Answers

  • User61956409 posted

    Hi robdquick,

    If you debug your code, you will find that Popup2Button_Click event will not fire if you click Popup1Button, but the second modal popup still appears. It seems that you set same hidden button as target control of ModalPopupExtender controls, when the first modal popup appears, it will be same as you trigger hidden button click event, so the second modal popup appears too. You could set different hidden buttons as target control, and it will resolve the problem.

    <div>
        <asp:ModalPopupExtender ID="ModalPanel1MPE" runat="server" TargetControlID="HiddenButton" PopupControlID="ModalPanel1"></asp:ModalPopupExtender>
    
    
        <asp:ModalPopupExtender ID="ModalPanel2MPE" runat="server" TargetControlID="HiddenButton1" PopupControlID="ModalPanel2"></asp:ModalPopupExtender>
    
        <asp:Button ID="HiddenButton1" Style="display: none" runat="server" Text="Button" />
        <asp:Button ID="HiddenButton" Style="display: none" runat="server" Text="Button" />
    </div>
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 16, 2016 6:01 AM

All replies

  • User61956409 posted

    Hi robdquick,

    If you debug your code, you will find that Popup2Button_Click event will not fire if you click Popup1Button, but the second modal popup still appears. It seems that you set same hidden button as target control of ModalPopupExtender controls, when the first modal popup appears, it will be same as you trigger hidden button click event, so the second modal popup appears too. You could set different hidden buttons as target control, and it will resolve the problem.

    <div>
        <asp:ModalPopupExtender ID="ModalPanel1MPE" runat="server" TargetControlID="HiddenButton" PopupControlID="ModalPanel1"></asp:ModalPopupExtender>
    
    
        <asp:ModalPopupExtender ID="ModalPanel2MPE" runat="server" TargetControlID="HiddenButton1" PopupControlID="ModalPanel2"></asp:ModalPopupExtender>
    
        <asp:Button ID="HiddenButton1" Style="display: none" runat="server" Text="Button" />
        <asp:Button ID="HiddenButton" Style="display: none" runat="server" Text="Button" />
    </div>
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 16, 2016 6:01 AM
  • User-1507524388 posted

    Thank you thank you thank you!

    This totally solves the problem. I wonder why it worked before with only 1 hiddenbutton?? In one page I had over 10 ModalPopupExtenders linked to the same hiddenbutton!

    Wednesday, March 16, 2016 3:17 PM