This tutorial will use Multiple Popup Controls to populate a textbox in ASP.NET 3.5 AJAX Web App. C#

In this tutorial we will use two PopupControl extender’s from the AJAX Control Toolkit which offers an easy way to trigger a popup if any other control gets activated.

Here is a snapshot of the Popup Control extender:

To start, open Visual Studio 2008. File > New > Web Site > ASP.NET Web site and name it MultPopupCntrl or whatever you would like.

From the Design View of the default.aspx page, locate the Microsoft AJAX extensions tab of the toolbox and double-click the ScriptManager. Then from the same tab double-click the UpdatePanel as well.

Now drag two Textboxes over to the page within the UpdatePanel. Name the first textbox txtBegin, and the second txtEnd. As soon as you are done setting the textbox properties, type in “Begin Date” and “End Date” in front of each corresponding textbox.

Next, from the toolbox drag over a Panel control and place it inside of the UpdatePanel and name it pCal. Within the Panel control you just implemented drag and drop a Calendar control inside of it and name it cal.

Highlight the every control on the page and center, justify them. The Design View should look like this:

Switch to your source view.

Within the calendar tag, add an OnSelectionChanged element.

Then locate the AJAX Toolkit and drag over two PopupControlExtender’s below and outside the UpdatePanel. Then add a TargetControlID and assign it the value txtBegin and txtEnd respectively. This allows the calendar control to place the value selected by the user inside of the specific textbox.

Next, add a PopupControlID for each PopupControlExtender and pass it the value pCal of the Calendar controlID. In this case you can position it at the Bottom.

The TargetControlID attribute provides the ID of the control tied to the extender. The PopupControlID attribute contains the ID of the popup panel. For this instance, both extenders show the same panel, but both panels are possible as well.

Save and Run. Now whenever you click within a text field, a calendar will appear, allowing you to select a date.

Next we need to add some logic to the code behind in order to populate the correct dates for the correct textbox. This is the reason that we added the OnSelectionChanged to the calendar control. Switch to your default.aspx.cs page and add this logic to the cal¬_OnSelectionChanged() event.

The PopupControl is an ASP.NET AJAX extender that can be added to any control in order to open a popwindow that displays additional content, including ASP.NET server controls, HTML elements, etc. In this case, we made the popup window interactive within an ASP.NET AJAX UpdatePanel, this way it could be able to perform complex server-based processing (includeing postbacks) without affecting the rest of the page.