Share via

How to perform server-side event and close modalPopup with 1 button click?

  • Article

Question

Tuesday, September 30, 2008 8:09 PM

The modalPopup form allows you to specify an "OK" button.  The button closes the form when it is clicked.  You can specify a server-side event for the OK button, but it will not perform it.  I would like to click a single button on a modalPopup form, and have it execute a server-side click event, then immediately close the popup form.  Execute an event on the server and close the form all with a single button click --  How can you do it?

If the OK button can't so it, how about doing some kind of trickery to make it happen?  Can you possibly click another button on the modalPopup form, and have it perform its server-side click event, and then somehow programatically click the OK button, which will close the form?  In that case you could hide the OK button with CSS.  Can a button click execute a javasript that will execute the OK button?  Has anyone done this or have any ideas how it might be done?

All replies (8)

Wednesday, October 1, 2008 11:24 AM âś…Answered

I found what I was looking for in the following post:

Modal: Can I execute server code on OK before executing onOKScript

Remove cancelcontrolid, and okcontrolid from your modalpopupextender..
In your codebehind use the normal OnClick event for the buttons.

Then in the code behind use ModalPopupExtender.hide()

You have then more control and can do something after the OK button has been pressed.
If the cancel button is pressed, you only need to call the ModalPopupExtender.hide()

I added the following code to the event for the Apply button and it closed the ModalPopup.
So now the ModalPopup works great.

The user types in data and clicks a button.  That fires a server-side event that perform actions
on the server and closes the ModalPopup all in one swell foop!

protected void btnAddTextItem_Apply_Click(object sender, EventArgs e)
{
      // Add your server-side event code here.

      // Hide the ModalPopup.
      this.mpeAddText_ModalPopupExtender.Hide();
}

 

Tuesday, September 30, 2008 8:43 PM

Is the component inside of an UpdatePanel that will act as the post back?

Wednesday, October 1, 2008 10:43 AM

I'm not sure what you mean by component.
The OK and Cancel buttons for the ModalPopup may not be within an UpdatePanel.
Here's how it's setup:

<cc1:ModalPopupExtender ID="mpeAddText_ModalPopupExtender" runat="server" DynamicServicePath=""
     Enabled="True" TargetControlID="btnAddText" PopupControlID="pnlAddTextItem" BackgroundCssClass="modalBackground"
     OkControlID="btnAddTextItem_OK" CancelControlID="btnAddTextItem_Cancel">
</cc1:ModalPopupExtender>

<?xml:namespace prefix = cc1 /><cc1:ModalPopupExtender class=st><?xml:namespace prefix = asp /><asp:Panel class=st id="<asp:Button class=st id="<asp:Button class=st id="<asp:Button class=st id="      </asp:Panel>
<!-- Add Text ModalPopup --><asp:Panel ID="pnlAddTextItem" runat="server" CssClass="pnlAddTextItem"><div class="TitleAddTextItem">Add a new text item to the note.</div><asp:TextBox ID="tbAddTextItem" runat="server" CssClass="tbAddTextItem"></asp:TextBox> <asp:UpdatePanel ID="upAddTextItem" runat="server"><ContentTemplate><asp:Button ID="btnAddTextItem_Apply" runat="server" CssClass="btnAddTextItem_Apply"Text="Apply" OnClick="btnAddTextItem_Apply_Click" /></ContentTemplate></asp:UpdatePanel> <asp:Button ID="btnAddTextItem_OK" runat="server" CssClass="btnAddTextItem_OK" Text="Finished" /><asp:Button ID="btnAddTextItem_Cancel" runat="server" CssClass="btnAddTextItem_Cancel"Text="Cancel" /></asp:Panel>

</cc1:ModalPopupExtender>When the user clicks the OK button, the event is client-side only, and it closes the form.
So I created another button that has a server-side event.  There are 2 buttons:
   - The APPLY button applies the changes to a database within the server-side event.
   - The OK button closes the form.  
That works but it would be clearer and quicker if the user could click a single button 
that would run a server-side event and close the modalPopup.

</asp:Button></asp:Button></asp:Button>

Friday, October 31, 2008 11:24 AM

Thanks, Gary! I was searching for exactly the same information. Your post was a big help! Larry

Friday, November 7, 2008 10:12 AM

 

Thanks Gary. Your post helps me a lot

Friday, November 7, 2008 10:31 AM

I created this post after exploring ModalPopups and writing some code.  It goes into detail about creating code that interacts between ModalPopup and codebehind.

http://forums.asp.net/t/1335687.aspx

Friday, July 9, 2010 2:42 PM

Thanks a lot Gary It works absolutely fine for me. you made my day.

 

Wednesday, November 24, 2010 9:23 AM

Thanks a lot Gary It works absolutely fine for me. you made my day.