oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button

The Three Faces of ASP.NET AJAX
Pages: 1, 2, 3, 4, 5, 6

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" />

   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.

False Triggers
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!)

To create your own AJAX Control Extenders, you must use Visual Studio 2005. Visual Web Developer (the free download) will not work.

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.

When you copy the website, the .dlls and Register directive may not copy correctly. If that happens, don't panic. Simply select the ConfirmButtonExtender and press Control-X to delete it. Drag a new ConfirmExtender into its place, which will cause it to be registered and cause the .dlls to be put in place. Then select the new one and hit Ctrl-V to overwrite it with the one you deleted, and Hey! Presto! You're back in business.

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.

If you would rather work in a language other than Visual Basic, drill down through the corresponding project type from the dialog box.

False Triggers
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.

Solution Explorer
Figure 7. Solution Explorer showing the AJAX Control Project

The JavaScript file is the one where you will be doing most of your coding. This file contains the script that runs on the client, implementing the logic and behavior (hence the name of the file) of the control.

The VB file ending with "Designer" contains a class that enables design time functionality and is not typically modified.

You will be coding in the other VB file, ChangeAwareButtonExtender.vb. This is the server-side class that allows an extender to be created. It also allows you to create and access properties of the control extender. Any properties created in this class must also have matching properties defined in the JavaScript Behavior file.

Pages: 1, 2, 3, 4, 5, 6

Next Pagearrow