Using ModalPopupExtender from AJAX Control Toolkit C#

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. However, if you're using ASP.NET version 2.0, you can still make use of AJAX by downloading and installing the AJAX Extensions from this page.

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:

Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!

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:

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.

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 are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!

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 (we put these at the bottom of the page)::

I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.

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 link for project longer seems to work.

Download link is working fine for me.

Im starter in .NET so I google to find a solution or try to learn new things. I can tell you that your site is the most significant site Ive seen. Youre sharing the tools and source codes. This is not only good for the .Net developpers but also a good sample for Humanity. This is what I always say: Unshared knowledge is not a knowledge. Because no one knows it, thanks again for the good tips and sharing your knowledge with us.

bbbbb