In this tutorial, we will be looking at the Modal Popup Extender in the AJAX Control Toolkit from Microsoft. The aim of the Control Toolkit is to make it easier for developers to implement AJAX functionality into Web Applications. It is made even easier in ASP.NET 3.5 as AJAX comes built-in. This tutorial is written with and aimed at ASP.NET 3.5, as it ships with native AJAX support.

The AJAX Control Toolkit is an add-on for ASP.NET that can be downloaded from Microsoft’s Codeplex. Upon visiting this page, you will notice that you have the choice of downloading the source code for all Controls and Extenders, or just the compiled DLL. Unless you plan on modifying the existing controls, you should get the DLL or NoSource. We would recommend getting the NoSource version, as it comes with the sample site which demonstrates how each of the new Controls and Extenders work.

Download and extract the ZIP file to somewhere on your computer, make note of where. You will notice in the ZIP archive that there is DLL: AjaxControlToolkit.dll; this is what we want. Open up Visual Studio and create a new Web Application project. Open up the toolbox panel (View > Toolbox) and right-click in an empty space, then choose Add Tab. Enter a descriptive name like AJAX Toolkit and press Enter. Now right-click in an empty space beneath this new tab and click Choose Items, and on the .NET Framework Components tab click the Browse button and navigate to the dll we just downloaded. Once chosen, click Ok to return to Visual Studio. You should see that all Toolkit controls and extenders have been added to the tab we created.
In this tutorial, we are going to look more closely at the Modal Popup Extender. We will be creating a button that will cause the popup, and then within the popup, we will display a Repeater control to demonstrate how we can have functionality and data within a popup.

The first thing we do is to create a textbox and a button. We will be using the textbox to display data back to the user, in this example. Because the popup will use JavaScript, the easiest way to pass back the information will be via a JavaScript function, and a textbox is easiest to assign from JavaScript:

Notice here we are disabling the textbox, and also hiding the border. We created a CSS class for it:

The Modal Popup extender uses an ASP.NET Panel control, which opens up within the browser. Our next step is to create that Panel, and for this example, we will include a Repeater within to demonstrate our ability to display dynamic data within a popup, and not just static text. We will also add an Ok and a Cancel button, and demonstrate how we can pass values back from the Popup using JavaScript:

In our simple Repeater, we are going to display columns Name, Age and City. Using this structure, we will programmatically create a DataTable on Page_Load and then assign that to the Repeater, like so:

This will be the only code we write, because the Modal Popup Extender is pre-built: all there is to do is to pop it in from the toolbox and configure it. So let’s go ahead and do that – drag the ModalPopupExtender from the AJAX Toolkit in the Toolbox, then add the following attributes:

We set the TargetControlID as the button that will cause the popup, the OkControlID and the CancelControlID reference the buttons within the Panel to let the extender know which controls handle these tasks. We also create another CSS style for the background when the popup is open, and finally, we call JavaScript functions on Ok and on Cancel. First, the CSS classes looks like this

Next, the JavaScript functions look like this:

Now that everything is in place, we can run this and notice that when the button is clicked, the Popup shows instantly. Then we can close the panel with either Ok or Cancel – and the results of which button you clicked will be displayed on the page. Notice also that the Repeater displays the data within the panel, even though we’re binding it on Page_Load. The ASPX page will looks something like this:

Download Source Files