If you were looking for a Tutorial based on the AJAX Control PopUP Control Extender, then you reached the right place.

In Today’s AJAX tutorial we will go over the PopUp Control Extender from the AJAX control toolkit Library. Chances are you have experienced this Control several times a day on many of your favorite websites and social communities. One in particular has 500 Million Members.

Ever found you typing in a search bar and getting suggestions automatically? And wondering how they do that? Well they were using a combination of the PopUp control along with other extenders.
This is an awesome tool to process a certain region without having to postback the entire application, leading to better Server and client side performance.

In a few weeks we will do an awesome Facebook Style PopUp Style Examples where you get Auto Suggestions from a Database. Stay tuned for that one.

In the meantime we will show you a basic Example using this control in Visual Studio 2010.

Below We Referenced the AJAX controls and Properties from ASP.NET

PopupControl is an ASP.NET AJAX extender that can be attached to any control in order to open a popup window that displays additional content. This popup window will probably be interactive and will probably be within an ASP.NET AJAX UpdatePanel, so it will be able to perform complex server-based processing (including postbacks) without affecting the rest of the page. The popup window can contain any content, including ASP.NET server controls, HTML elements, etc. Once the work of the popup window is done, a simple server-side call dismisses it and triggers any relevant script on the client to run and update the page dynamically.

TargetControlID – The ID of the control to attach to
PopupControlID – The ID of the control to display
Position – Optional setting specifying where the popup should be positioned relative to the target control. (Left, Right, Top, Bottom, Center)
CommitProperty – Optional setting specifying the property on the control being extended that should be set with the result of the popup
CommitScript – Optional setting specifying additional script to run after setting the result of the popup
OffsetX/OffsetY – The number of pixels to offset the Popup from its default position, as specified by Position.
Animations – Generic animations for the PopupControlExtender. See the Using Animations walkthrough and Animation Reference for more details.
OnShow – The OnShow animation will be played each time the popup is displayed. The popup will be positioned correctly but hidden. The animation can use to display the popup along with any other visual effects.
OnHide – The OnHide animation will be played each time the popup is hidden.

Let’s Add a new WebForm to this project and name it Popup.aspx
· Next we will add a ScriptManager to the page.
· Then for this project we will
· Add Target controls (like text box,button), PopUp controls(panels) and Popup Control extender. Set target and Popup controls.
· You can add as few or as many as you like just remember to set the Target properties. For this tutorials please reference the markup below to see how we did and Set up the target properties and Extenders.
· You may also download the source file as well to follow along exactly to see how we did it. This is just an example of the PopUp Extender.
· For this Example we drag and drop 2 Text Boxes, Remember to name them and Set Properties.
· Add 2 labels and 1 Button and name the button Add Reminder.

The markup of the page will look like:

Load the page in a browser and it should look like this:

Thank you for reading our tutorial on AJAX Controls, we aim to provide the best AJAX tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a tutorial or you can comment below in the comments section.