ASP.NET: ModalPopupExtender prevents button click event from firing
ajax, asp.net, c#, modalpopupextender
Solution
Try this.
Create a dummy hidden field:
<asp:HiddenField ID="hdnField" runat="server" />
Set the TargetcontrolID = "hdnField" in your Modal Popup declaration.
In your btnSaveData_Click event, do this:
modalPopup.Show();
Problem
Here is what I'm trying to do: Click a button on my page, which in turn makes (2) things happen: - Display a ModalPopup to prevent the user from pressing any buttons or changing values - Call my code behind method, hiding the ModalPopup when finished Here is the ASP markup: ``` <asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true" UpdateMode="Always"> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnSaveData" EventName="Click" /> </Triggers> <ContentTemplate> <asp:Panel ID="pnlHidden" runat="server" style="display: none;"> <div> <h1>Saving...</h1> </div> </asp:Panel> <cc1:ModalPopupExtender ID="modalPopup" BackgroundCssClass="modalBackground" runat="server" TargetControlID="btnSaveData" PopupControlID="pnlHidden" BehaviorID="ShowModal"> </cc1:ModalPopupExtender> <asp:Button ID="btnSaveData" runat="server" Text="Save Data" OnClick="btnSaveData_Click" /> </ContentTemplate> </asp:UpdatePanel> ``` Now, here is my code behind C# code: ``` protected void btnSaveData_Click(object sender, EventArgs e) { UpdateUserData(GetLoggedInUser()); modalPopup.Enabled = false; } ``` Why doesn't this work? The ModalPopup displays perfectly, but the btnSaveData_Click event NEVER fires. UPDATE: The first suggestion did not work for me. I also tried your second suggestion (insofar as it applied to me). One minor difference on my end is that there is no button on my modal panel (pnlHidden) -- it's just a message. I did try using Javascript events on the client side, which at least did fire concurrently with my server-side event. This was good news, but I can't seem to find or grab a handle on the ModalPopupExtender or its BehaviorID. This doesn't work: ``` function showOverlay() { var popup = $find('modalPopup'); popup.show(); } ``` popup is ALWAYS equal to null. FINAL UPDATE: This is my final solution for getting this to work (Take specific note of the use of OnClientClick AND OnClick): ``` <asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true" UpdateMode="Always"> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnSaveData" EventName="Click" /> </Triggers> <ContentTemplate> <asp:Panel ID="pnlHidden" runat="server" style="display: none;"> <div> <h1>Saving...</h1> </div> </asp:Panel> <cc1:ModalPopupExtender ID="modalPopup" BackgroundCssClass="modalBackground" runat="server" TargetControlID="hdnField" PopupControlID="pnlHidden" BehaviorID="ShowModal"> <asp:HiddenField ID="hdnField" runat="server" /> </cc1:ModalPopupExtender> <asp:Button ID="btnSaveData" runat="server" Text="Save Data" OnClientClick="showModal();" OnClick="btnSaveData_Click" /> </ContentTemplate> </asp:UpdatePanel> ``` Using this Javascript function: ``` function showModal() { $find('ShowModal').show(); } ``` ... And this code behind: ``` protected void btnSaveData_Click(object sender, EventArgs e) { UpdateUserData(GetLoggedInUser()); modalPopup.hide(); } ```