Blog
Older Versions - Ajax Control Toolkit

DevExpress has stepped up and offered to lead this open source project. In just a few short months, they have implemented a number of modern and strategic changes to the toolkit to help make it a valuable part of your ASP.NET Web Forms arsenal. This release is available NOW from http://devexpress.com/ms-act

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):

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

<asp:Panel ID="pnlCalendar" runat="server"> <asp:UpdatePanel ID="up1" runat="server"> <ContentTemplate> <asp:Calendar ID="c1" runat="server" /> </ContentTemplate> </asp:UpdatePanel> </asp:Panel>

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

<div> Departure date: <asp:TextBox ID="tbDeparture" runat="server" /> Return date: <asp:TextBox ID="tbReturn" runat="server" /> </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.

<ajaxToolkit:PopupControlExtender ID="pce1" runat="server" TargetControlID="tbDeparture" PopupControlID="pnlCalendar" Position="Bottom" /> <ajaxToolkit:PopupControlExtender ID="pce2" runat="server" 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)

This article was originally created on June 2, 2008

Author Information

Christian Wenz

Christian Wenz – Christian Wenz is an author, trainer, and consultant. His main focus of working and writing is on web technologies and security. Christian has written or co-written over 100 books for various publishers. He works with both open source and closed source web technologies. This leads to the unusual situation that he has both been awarded a Microsoft MVP for ASP/ASP.NET and is listed in Zend's Who is Who of PHP. He is also listed in Mozilla's credits (about:credits) and is considered an expert in browser-agnostic JavaScript.