ASP.NET: ModalPopupExtender prevents button click event from firing

Question

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();
}

Jack Marchetti · Accepted Answer · 2010-05-21T16:17:07.560

17

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();

edited May 21 '10 at 16:17

answered May 21 '10 at 16:10

Jack Marchetti

15,536
14
81
117

1

You know what's weird, I tried this exact concept but with a dummy Button instead of a HiddenField. That didn't work (with the Button), but now it DOES work with a HiddenField. Follow-up question though: The popup shows, my database call is made, but the modalPopup.Hide() executes too fast, and any attempts to slow it result in no display of the popup at all. Any ideas for a workaround? – C. Griffin May 21 '10 at 18:02
If you just want to use a modal popup as like a "loading" screen, I'd suggest putting it into the asp:UpdateProgress. If it goes fast, that's good right? You kinda want it to go fast. Of course you can delay anything by doing System.Threading.Thread.Sleep(2000); (2 seconds). I def don't recommend doing that. – Jack Marchetti May 21 '10 at 19:58
I tried the System.Threading.Thread.Sleep(2000); before I posted my last comment, and when I did that, the modal disappeared completely (having never popped up). I will try the asp:UpdateProgress control. – C. Griffin May 24 '10 at 15:12
This fix worked for me, with the caveat that on your hiddenfield DONT go the extra mile and add visible="false". this kills your modalPopup.Show(); event in the code behind for some reason. – Ben Barreth May 24 '12 at 14:07

score 3 · Answer 2 · edited May 14 '12 at 16:20

Try this. It is 100% working

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="Btnshow" runat="server" Text="Show" OnClick="Btnshow_Click" />
        <asp:Button ID="BtnTarget" runat="server" Text="Target" Style="display: none" />
        <asp:TextBox ID="TextBox1" runat="server">
        </asp:TextBox>
        <input type="button" value="Get" onclick="abc()" />
        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="BtnTarget"
            PopupControlID="Panel1">
        </asp:ModalPopupExtender>
        <asp:Panel ID="Panel1" runat="server" BackColor="Black" Width="300px" Height="300px">
            <asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Button ID="BtnHide" runat="server" Text="Hide Button" OnClick="BtnHide_Click" />
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="BtnHide" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>
        </asp:Panel>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Btnshow" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

Server side code

protected void Btnshow_Click(object sender, EventArgs e)
{
    ModalPopupExtender1.Show();
}
protected void BtnHide_Click(object sender, EventArgs e)
{
    ModalPopupExtender1.Hide();
}

score 2 · Answer 3 · answered May 20 '10 at 20:38

First attempt: Try to set your ButtonID into OkControlID Tag and try again

OR

Second attempt: Call your event over javascript there seems to be some problems with click events

<div> 
    <cc1:ModalPopupExtender PopupControlID="Panel1"  
         ID="ModalPopupExtender1" 
         runat="server" TargetControlID="LinkButton1" OkControlID="Ok"  
         OnOkScript="__doPostBack('Ok','')"> 
    </cc1:ModalPopupExtender> 
    <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>  
</div>         

<asp:Panel ID="Panel1" runat="server"> 
    <asp:Button ID="Ok" runat="server" Text="Ok" onclick="Ok_Click" />             
</asp:Panel>

score 1 · Answer 4 · answered Jul 31 '14 at 15:58

From this example you can easily control panel show up depends on conditions instead of just immediately show up panel once you click button.

<asp:Button ID="btnAdd" runat="server" OnClick="btnAdd_Click"/>
<asp:HiddenField ID="hdnField" runat="server" />
<ajaxToolkit:ModalPopupExtender runat="server" 
  TargetControlID="hdnField" 
  ID="btnAdd_ModalPopupExtender"
  PopupControlID="pnlPrintName">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlPrintName" runat="server">
.
.
</asp:Panel>

//Server side code:
protected void btnAdd_Click(object sender, EventArgs e)
{
  if( dt.Rows.Count == 0 )
  {
     btnAdd_ModalPopupExtender.Show();
  }
  else
  {
     add();
  }
}

score 1 · Answer 5 · edited Nov 04 '16 at 14:50

1

In code behind, you can do this:

if (true)
{
    var script = @"Sys.Application.add_load(function() { $find('behavoirIDModal').show(); });";
    ScriptManager.RegisterStartupScript(this, GetType(), "Show", script, true);
}

Change this 'behavoirIDModal'

edited Nov 04 '16 at 14:50

krlzlx

5,752
14
47
55

answered Nov 04 '16 at 14:28

Diego Venâncio

5,698
2
49
68

ASP.NET: ModalPopupExtender prevents button click event from firing

5 Answers5

Linked