Saturday, September 26, 2009

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







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.

5 comments:

  1. Hi,
    Can you do a tutorial on how to implement event based async pattern in VB.NET?

    Thanks

    ReplyDelete
  2. Thanks for reading, and I will try to put something together on this topic in the near future.

    In the meantime, there is some good information in the MSDN that can get you started, including full examples. Below are the links-

    Event-based Asynchronous Pattern Overview:
    http://msdn.microsoft.com/en-us/library/wewwczdw.aspx

    Implementing the Event-based Asynchronous Pattern:
    http://msdn.microsoft.com/en-us/library/e7a34yad.aspx

    How to: Implement a Component That Supports the Event-based Asynchronous Pattern:
    http://msdn.microsoft.com/en-us/library/9hk12d4y.aspx

    Walkthrough: Implementing a Component That Supports the Event-based Asynchronous Pattern:
    http://msdn.microsoft.com/en-us/library/bz33kx67.aspx

    The last link I provided above has a thorough example, and is probably a good place to start.

    ReplyDelete
  3. Many many thanks - after hours of fighting with this - your solution worked brilliantly

    ReplyDelete
  4. Thanks a lot Allen.. I googled almost everything but nothing worked .. finally came across your code .. it works perfectly.. too good:-)

    ReplyDelete