Using an Extender: ConfirmButtonExtender
The AJAX controls are provided in two packages: the smaller set that is placed in the AJAX tab and the far larger set that you placed in the AJAX Control Toolkit tab that you created when you installed the toolkit.
Many of the tools in the AJAX Control Toolkit are not standalone controls, they are extenders; that is, they extend the capabilities of existing AJAX controls . To see this at work, create a new website named ToolkitExtenders that is an exact copy of the previous website.
We'll use an extender to make sure the administrator really, truly wants to delete a user. Rather than creating a special button that confirms the user's intent, or even adding code to the button's Click event, we'll add client-side code to confirm the user's decision by adding a ConfirmButtonExtender and telling it that its "target control" is our Delete button. This will create client-side code to check the decision without requiring a roundtrip to the server, thus creating a much faster and more responsive application.
In Source view, locate the Delete button within the UpdatePanel and drag a Confirm Button Extender from the AJAX Control Toolkit tab directly below the Delete button, taking care that the new control stays within the ContentTemplate element. Your new control will have the prefix CC1 (or AjaxToolkit, depending on how your system is configured). You'll note two other changes: a Register directive will have been placed at the top of your page, and, if you expand your bin directory, you'll see the .dll and .pdb files for the AJAX Control Toolkit. Handy.
While the ConfirmButtonExtender will have automatically been assigned an ID, you'll have to assign the TargetControlID property yourself, though Intellisense will help. You'll also want to set the text for the confirmation in the ConfirmText property, using the following code snippet:
<asp:Button ID="Delete" runat="server" Text="Delete" Enabled="false" /> <cc1:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server" TargetControlID = "Delete" ConfirmText = "Really, truly delete?" />
When the administrator clicks the Delete button, the ConfirmButtonExtender will take control and cause a confirmation dialog to appear with your confirmation text, as shown in Figure 5.
Figure 5. Confirmation Extender (Click to enlarge.)
The Second Face: Customized AJAX
If the extenders that are provided with the toolkit do not meet your needs, you are free to create your own. AJAX will even help, and a walk through is provided, with the Toolkit from which we have borrowed liberally for this example (don't write in, we know we're not being original, but we hope we're adding clarity and context!)
One limitation of the previous examples is that the button does not become enabled until you actually leave the TextBox, at which point the TextChanged event fires. It would be better if you could detect keystrokes in the TextBox directly and enable the Button accordingly.
A custom AJAX Control Extender is just the ticket. To create one, copy the ToolkitExtenders website to a new website, called CustomExtender.
After you've created your copy, immediately right-click on the solution and choose Add New Project. Select ASP.NET AJAX Control Project from the My Templates section of the Add New Project dialog box. Name your new project ChangeAwareButton, as shown in Figure 6.
Figure 6. Adding an AJAX Control Project to the website (Click to enlarge.)
This will add a project to the website, and that project will contain several autogenerated files: ChangeAwareButtonBehavior.js, ChangeAwareButtonDesigner.vb, and ChangeAwareButtonExtender.vb, as shown in the Solution Explorer shown in Figure 7.
Figure 7. Solution Explorer showing the AJAX Control Project
The VB file ending with "Designer" contains a class that enables design time functionality and is not typically modified.