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

Last post 11-07-2008 10:31 AM by Gary Frank. 6 replies.

Sort Posts:

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

    09-30-2008, 8:09 PM
    • Participant
      918 point Participant
    • Gary Frank
    • Member since 09-27-2006, 7:22 PM
    • Green Bay, WI, USA
    • Posts 336

    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?

    Gary Frank
  • Re: How to perform server-side event and close modalPopup with 1 button click?

    09-30-2008, 8:43 PM
    • Participant
      803 point Participant
    • CompiledMonkey
    • Member since 02-04-2003, 6:05 PM
    • Richmond, VA
    • Posts 179
    Is the component inside of an UpdatePanel that will act as the post back?
    Chris Stewart
  • Re: How to perform server-side event and close modalPopup with 1 button click?

    10-01-2008, 10:43 AM
    • Participant
      918 point Participant
    • Gary Frank
    • Member since 09-27-2006, 7:22 PM
    • Green Bay, WI, USA
    • Posts 336

    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>

          
    

    <!-- 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>

    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.
    Gary Frank
  • Re: How to perform server-side event and close modalPopup with 1 button click?

    10-01-2008, 11:24 AM
    Answer
    • Participant
      918 point Participant
    • Gary Frank
    • Member since 09-27-2006, 7:22 PM
    • Green Bay, WI, USA
    • Posts 336

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

     

    Gary Frank
  • Re: How to perform server-side event and close modalPopup with 1 button click?

    10-31-2008, 11:24 AM
    • Member
      24 point Member
    • LDaniele
    • Member since 09-14-2006, 5:05 PM
    • Sunderland, MA USA
    • Posts 6
    Thanks, Gary! I was searching for exactly the same information. Your post was a big help! Larry
  • Re: How to perform server-side event and close modalPopup with 1 button click?

    11-07-2008, 10:12 AM
    • Member
      2 point Member
    • mohit dwivedi
    • Member since 07-11-2006, 5:46 AM
    • Posts 1

     

    Thanks Gary. Your post helps me a lot
  • Re: How to perform server-side event and close modalPopup with 1 button click?

    11-07-2008, 10:31 AM
    • Participant
      918 point Participant
    • Gary Frank
    • Member since 09-27-2006, 7:22 PM
    • Green Bay, WI, USA
    • Posts 336

    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

    Gary Frank
Page 1 of 1 (7 items)