Using Multiple Popup Controls (C#)

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. It is also possible to use more than one popup control on one page.

Overview

The PopupControl extender in the AJAX Control Toolkit offers an easy way to trigger a popup when any other control is activated. It is also possible to use more than one popup control on one page.

Steps

In order to activate the functionality of ASP.NET AJAX and the Control Toolkit, the ScriptManager control must be put anywhere on the page (but within the <form> element):

[!code-aspxMain]

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

Next, add a panel which serves as the popup. In the current scenario, the panel contains a Calendar control. In order to avoid the page refreshes caused by the Calendar’s postbacks, the panel is put within an UpdatePanel control:

[!code-aspxMain]

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

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

   3:   <ContentTemplate>

   4:   <asp:Calendar ID="c1" runat="server" />

   5:   </ContentTemplate>

   6:   </asp:UpdatePanel>

   7:  </asp:Panel>

The page also contains two text boxes. For each text box, the calendar popup shall appear once the text box is activated.

[!code-aspxMain]

   1:  <div>

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

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

   4:  </div>

Now extend each of the two text boxes with a PopupControlExtender. The TargetControlID attribute provides the ID of the control tied to the extender. The PopupControlID attribute contains the ID of the popup panel. In this case, both extenders show the same panel, but different panels are possible, as well.

[!code-aspxMain]

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

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

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

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

Now whenever you click within a text field, a calendar appears below the field, allowing you to select a date. (Getting the selected date back into the text boxes will be covered in a different tutorial.)

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

Next

Comments ( )