ASP.NET button event not firing when using modelpopupextender

Question

I have one Panel that is linked to a ModelPopupExtenderand there is a button inside the first panel. When I click the first panel's button I want it to execute the event and inside this event I want to pop up the second Panel which is also linked to a ModelPopupExtender, but when I click the first Panel's button the event does not trigger.

Asp Code :

<input type="hidden" runat="server" id="hdnEditBank1" />
<asp:Panel runat="server" ID="pnl1" CssClass="Modal450h450w" Height="300px">
    <table id="tblEditBank1" runat="server">
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td align="right" colspan="2"><img runat="server" id="imgExitEdit1"  src="../images/Exit_cross.png" /></td>
        </tr>
        <tr>
            <td colspan="3">Name : </td>
            <td colspan="2"><telerik:RadTextBox ID="txt1" runat="server" CssClass="largebox"></telerik:RadTextBox></td>
        </tr>

        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>                            
            <td colspan="4">
                <asp:Button runat="server" ID="btnClose" Text="Close" OnClick="btnAdd_Close_Click" />                    
            </td>
            <td align="right">
                <asp:Button runat="server" ID="btnNext" Text="Next" OnClick="btnEdit_Next_Click" />
            </td>
        </tr>
    </table>
</asp:Panel>

<!-- second panel -->
<asp:ModalPopupExtender ID="ModalPopupExtender6" runat="server" TargetControlID="btnNext" OkControlID="imgExitEdit1"
    PopupControlID="pnl2" BackgroundCssClass="LoadingBackground" >
</asp:ModalPopupExtender>

<input type="hidden" runat="server" id="Hidden1" />
<asp:Panel runat="server" ID="pnl2" CssClass="Modal450h450w" Height="300px">
    <table id="Table1" runat="server">
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td align="right" colspan="2"><img runat="server" id="img1"  src="../images/Exit_cross.png" /></td>
        </tr>
        <tr>
            <td colspan="3">Some Label : </td>
            <td colspan="3"><telerik:RadTextBox ID="txtSomeText" runat="server" CssClass="largebox"></telerik:RadTextBox></td>
        </tr>        
        <tr>                            
            <td colspan="4">
                <asp:Button runat="server" ID="btnIbanClose" Text="Close" OnClick="btnAdd_Close_Click" />                    
            </td>
            <td align="right">
                <asp:Button runat="server" ID="btnIbanReview" Text="Next" OnClick="btnEdit_Next_Click" />
            </td>
        </tr>
    </table>
</asp:Panel>

The code behind :

protected void btnEdit_Next_Click(object sender, EventArgs e)
{          
        ModalPopupExtender6.Show();
}

I am thinking it's about the AutoPostBack but I am not sure how to resolve this

Answer 1

I have found the solution to this if anybody is interested.

What you need to do is create a hidden input field and set the TargetControlID to the hidden control and from there you are able to fire off the buttons event.

<input type="hidden" runat="server" id="hdnNext" />

<asp:ModalPopupExtender ID="ModalPopupExtender6" runat="server" TargetControlID="hdnNext" OkControlID="imgExitEdit1"
    PopupControlID="pnlIban" BackgroundCssClass="LoadingBackground" >
</asp:ModalPopupExtender>

The input field is used in this case as a Dummy control where the ModalPopupExtender points to and from the buttons event you are able to control which other ModalPopupExtenders you want to control.