views:

971

answers:

3

Here is what I'm trying to do: Click a button on my page, which in turn makes (2) things happen:

  1. Display a ModalPopup to prevent the user from pressing any buttons or changing values
  2. 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();
}
A: 

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>
MUG4N
+1  A: 

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();
Jack Marchetti
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
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
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
if you use the updateprogress, set DisplayAfter="0"
Jack Marchetti
A: 

I think the problem with onclick events in the most recent build of ajax is that even when you specifiy usesubmitbehavior = true and button1.attributes.add("onclick", "button1_click"), it puts a semicolon on the end of the onclick="button1_click;" in the compiled client source. Anyone notice this before?

dmp812