In this tutorial, we will be looking at just a few of the controls in the AJAX Control Toolkit from Microsoft. This tutorial is aimed toward users of Visual Studio.NET 2008.
We will be looking at the following controls: TextBoxWatermarkExtender, ConfirmButtonExtender, DragPanelExtender, and the ModalPopupExtender.

To get started, we will begin a C# project (although it doesn’t really matter which language we choose, as we will just be covering the ASPX implementation of the controls).
Once we have our project open in VS, we should see the AJAX Control Toolkit in our toolbox. Let’s start off by making sure we have the ScriptManager on our page:

Now we can add the AJAX Controls to our page. Let’s start with the TextBoxWatermarkExtender. This AJAX Control extends the ASP.NET TextBox Control to allow you to set a ‘Watermark’ to the textbox. When the user clicks on the textbox, the ‘Watermark’ disappears, and they can input their own text. This is useful for providing more information to users about what is required in the textbox.
So let’s start by adding a regular textbox to the page:

Now if we drag onto the page the WatermarkExtender from the Toolkit, we should see two things: one, the TextBoxWatermarkExtender custom control tag; and two, the Register directive at the top of the page, which allows us to use the AJAX Controls:

Notice that we set further properties of the Extender than was given to us by default. We set the TargetControl to that of the textbox, the WatermarkText to the text we want to be specified in the textbox, and then a CSS class to make the text gray:

Now if you run this application, you will see that there is gray text in the textbox by default, but as soon as you click in it, it disappears. Similarly, if the textbox is empty when it loses focus, then the Watermark re-appears.

The next Extender we will look at is the ConfirmButtonExtender. Let’s go ahead and add a button to our existing form, and then drag a ConfirmButtonExtender from the toolkit:

Notice that the Extender uses the same tag prefix as the Watermark, because they are both from the Toolkit.
Again, we add a couple of extra attributes to the Extender than is given to us by default: ConfirmText will be displayed to the user in a JavaScript popup box when the button is clicked; and we also declare which control to use the Extender with (button_Submit).

If the web application is run at this point, you will see that a standard JavaScript popup box appears when you click on the button. The popup will give you Ok and Cancel buttons.

Next, we will take a look at the DragPanelExtender. For this one, we need to encapsulate our existing controls in an ASP.NET Panel. We will also place the extender on our page from the Toolkit. Let’s do this now:

We surround our existing controls with a Panel and name it, then we add the Extender outside of the panel and reference the panel name in the TargetControlID of the Extender. Once we have done this, ASP.NET will do the rest. Run the web application and try to drag the panel around the page to place it where you want.
NOTE: You will only be able to place it where HTML has been rendered.

Finally, we will take a look at the ModalPopupExtender, which is probably the most exciting. Instead of using a regular JavaScript popup window, we can use a panel to appear in the middle of the screen, and gray-out the rest of the form. To do this, we need to implement a little CSS also.
The first thing to do is to add a button to initiate the popup, and then create another Panel which will act as the popup. We will also need to drag the Extender from the Toolkit:

Notice we have set the TargetControl and PopupControl attributes of the Extender, which identifies both the control to initiate the popup (the button), and also the control which will be the popup (the panel). We also set the CssClass attribute so that we can alter the look – fading out the background whilst it is inaccessible. We use the opacity CSS property, but also include variations to cover different browsers.

Now if we run this web application, we will see that we get a very nice popup window when we click the button, and the rest of the page is grayed out, and disabled, until we click a button in the popup to close it.

Download Source Files