How To: Make an asynchronous call from an AJAX Modal Popup

I have been asked a few times and seen some confusion occasionally around making an asyncronous postback call from an AJAX Modal Popup. The purpose of doing this is to be able to make a server side call from the Modal Popup without having it dissapear or 'Hide', which then reverts the view back to the main page.

There is really no low level magic to making this happen, but rather it just involves making sure the proper AJAX UpdatePanels, and associated AsyncPostBackTriggers are placed in the correct locations.

I think the confusion sometime lies around where the UpdatePanel is to be located. I have seen times where the developer feels it should wrap the entire control referenced by the modalpopupextender, but actually it only needs to be placed around the individual control(s) causing the postback within the modal popup.

For this example, I made a simple page with a 'Show AJAX Modal Popup' button that displays the popup. Then a button within the modal popup calls its server side click event to change the label's 'Text' property. This is all done without the modal popup ever closing.

First, take a look at the source for the .aspx page:

<%@ Register Assembly="AjaxControlToolkit, Version=3.0.30512.20315, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"

    Namespace="AjaxControlToolkit" TagPrefix="AjaxControlToolkit" %>







 

 





 


 


  

  

  

     PopupControlID="pnlTestPostback" BackgroundCssClass="modalBackground" DropShadow="true">

  

  

   










    

     


      

       

                 Width="100%" BackColor="#FFFFDD">

       

       

        

       

      

     
    
    

     


      

       

        

       

      

     
    
    

     


      

     
    
   

  

 

 

Second, look at the code behind:

Partial Public Class _Default

  Inherits System.Web.UI.Page

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

  End Sub

  Protected Sub btnShowModalPopup_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnShowModalPopup.Click

    If Page.IsValid Then

        Me.ModalPopupExtender1.Show()

    End If

  End Sub

  Private Sub btnTestPostback_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnTestPostback.Click

    Me.lblMessage.Text = "We made an asynchronous call server side from a modal popup."

  End Sub

  Private Sub btnCloseModalPopup_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnCloseModalPopup.Click

    'Reset the text back to its default message:

    Me.lblMessage.Text = "Press to test postback without full postback."

    Me.ModalPopupExtender1.Hide()

  End Sub

End Class

As you can see the trick was the placement of the UpdatePanel and having an AsyncPostBackTrigger in the UpdatePanel containing the label, to the '
btnTestPostback' click event. You may ask why both controls (label and button) didn't just go in the same UpdatePanel; well I was trying to show an example that could be more scalable to a larger ModalPopup with a greater number of control that could not be placed in the same UpdatePanel.

If you ever have any problems getting this implemented on a larger project, I recommend removing the UpdatePanels and associated triggers, and adding them back in carefully one at a time to get the behavior you are trying to accomplish.