Handling Postbacks from A Popup Control With an UpdatePanel (VB)

by Christian Wenz

Download Code or Download PDF

The PopupControl extender in the AJAX Control Toolkit offers an easy way to trigger a popup when any other control is activated. Special care has to be taken when a postback occurs within such a popup.

Overview

The PopupControl extender in the AJAX Control Toolkit offers an easy way to trigger a popup when any other control is activated. Special care has to be taken when a postback occurs within such a popup.

Steps

When using a PopupControl with a postback, an UpdatePanel can prevent the page refresh caused by the postback. The following markup defines a couple of important elements:

• A ScriptManager control so that the ASP.NET AJAX Control Toolkit works
• Two TextBox controls which will both trigger a popup
• A Panel control that will serve as the popup
• Within the panel, a Calendar control is embedded within an UpdatePanel control
• Two PopupControlExtender controls that assign the panel to the text boxes

[!code-aspxMain]

   1:  <form id="form1" runat="server">

   2:   <asp:ScriptManager ID="asm" runat="server" />

   3:   <div>

   4:   Departure date: <asp:TextBox ID="tbDeparture" runat="server" />

   5:   Return date: <asp:TextBox ID="tbReturn" runat="server" />

   6:   </div>

   7:   <asp:Panel ID="pnlCalendar" runat="server">

   8:   <asp:UpdatePanel ID="up1" runat="server">

   9:   <ContentTemplate>

  10:   <asp:Calendar ID="c1" runat="server" OnSelectionChanged="c1_SelectionChanged" />

  11:   </ContentTemplate>

  12:   </asp:UpdatePanel>

  13:   </asp:Panel>

  14:   <ajaxToolkit:PopupControlExtender ID="pce1" runat="server"

  15:   TargetControlID="tbDeparture" PopupControlID="pnlCalendar" Position="Bottom" />

  16:   <ajaxToolkit:PopupControlExtender ID="pce2" runat="server"

  17:   TargetControlID="tbReturn" PopupControlID="pnlCalendar" Position="Bottom" />

  18:  </form>

Note that the OnSelectionChanged attribute of the Calendar control is set. So when the user selects a date within the calendar, a postback occurs and the server-side method c1_SelectionChanged() is executed. Within that method, the current date must be retrieved and written back to the textbox.

The syntax for that is as follows: First of all, a proxy object for the PopupControlExtender on the page must be generated. The ASP.NET AJAX Control Toolkit offers the GetProxyForCurrentPopup() method. The object this method returns supports the Commit() method which sends a value back to the control that triggered the popup (not the control that triggered the method call!). The following code provides the selected date as the argument for the Commit() method, causing the code to write the selected date back to the text box:

[!code-aspxMain]

   1:  <script runat="server">

   2:   Protected Sub c1_SelectionChanged(sender As object, e As EventArgs)

   3:   Dim pce As PopupControlExtender = AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page)

   4:   pce.Commit(CType(sender, Calendar).SelectedDate.ToShortDateString())

   5:   End Sub

   6:  </script>

Now whenever you click on a calendar date, the selected date appears in the associated text box, creating a date picker control that can currently be found on many websites.

The Calendar appears when the user clicks into the textbox (Click to view full-size image)

Clicking on a date puts it in the textbox (Click to view full-size image)

Previous Next

Comments ( )