Microsoft Ajax Extender Controls Overview

Microsoft Ajax extender controls enhance the client capabilities of standard ASP.NET Web server controls. You can target standard Web server controls such as TextBox controls, Button controls, and Panel controls by using one or more extender controls to provide a richer user experience in the browser. For example, to let users confirm before they submit a form to the server, you can use an extender control that adds client functionality to a Button control.

You can add ASP.NET AJAX extender controls to Visual Studio and work with them as you do with other controls. You can create your own extender controls or get them from other sources.

One source for extender controls is the Ajax Control Toolkit. The Control Toolkit provides samples and an SDK that make it simple to create and reuse custom controls and extenders. For more information, see the Ajax Control Toolkit on the ASP.NET Web site.

This topic contains information about the following:

• AJAX Extender Control Features

• Background

• Class Reference

Features

Visual Studio supports the following extender control features:

• Adding extender controls.

• Removing extender controls.

• Setting extender control properties.

• Managing extender controls.

Back to top

Background

Extender controls can be used to enhance the client functionality of ASP.NET Web server controls. You do not use extender controls by themselves. Instead, you attach them to another ASP.NET Web server control. Extender controls are attached to a Web server control by setting the TargetControlID property of the extender control to the ID of the server control being extended.

Working with Extender Controls in Visual Studio

If you install the Ajax Control Toolkit, extender controls are shown in their own tab in the Toolbox. The extender control section of the Toolbox is shown only for Web pages, as with the Standard section of the Toolbox.

Adding Extender Controls

You can use the following methods to add extender controls to a Web server control in Design view:

• Drag the extender control onto the Web server control. You can drop the extender control only onto Web server controls that support extender controls. As you drag the extender control over the design surface, the pointer indicates whether you can drop the extender control onto the Web server control.

• Right-click the Web server control and then click Add Extender.

• Select the Button Tasks smart tag and then click Add Extender.

  Note

  In Design view, extender controls are not ordinarily displayed. However, if an error occurs that is related to an extender control, the extender control is displayed.

When you add an extender in the designer, the TargetControlID property of the extender control is set to the attached Web server control. The name of the extender control is based on the name of the Web server control that it is attached to.

An extender control might support user interface (UI) elements that you can configure. If so, you can set these elements by using a smart tag menu of the Web server control that has been extended.

The extender control is not shown on the design surface when it is attached to a target control. If the extender control is not attached to a target control, or if the association cannot be determined at design time, the extender control is displayed as a placeholder on the design surface. Scenarios where this result can occur include the following:

• The TargetControlID property is empty.

• The TargetControlID property does not match an existing control.

• The TargetControlID property references a control that cannot be extended by the extender control.

If the extender control is attached to a valid target control, Visual Studio hides the following extender control properties in the Properties window:

• TargetControlID

• EnableViewState (inherited from Control)

• ID (inherited from Control)

For more information about how to add extender controls to Web server controls, see Walkthrough: Microsoft Ajax Extender Controls.

Removing Extender Controls

You can remove the association between an extender control and a Web server control by doing the following:

• In Design view, right-click the Web server control, click Remove Extender, and then select the extender control that you want to remove.

• In Design view, select the Button Tasks smart tag, click Remove Extender, and then select the extender control that you want to remove.

• Delete the extender control markup in Source view.

Extender Controls and the ScriptManager Control

Extender controls that derive from the ExtenderControl class require a ScriptManager control on the page. The ExtenderControl base class performs a test to make sure that a ScriptManager control exists on the page.

However, if you want to create an extender control that does not require a ScriptManager control, you can create a class that implements the IExtenderControl interface directly. Additionally, if you are creating a class that derives from Control, or if you are extending an existing control that derives from Control, you can implement the IExtenderControl interface yourself.

The IExtenderControl interface registers the script libraries for a control by calling the GetScriptReferences method. It registers ScriptDescriptor objects by calling the GetScriptDescriptors method. The GetScriptDescriptors method returns an IEnumerable list of ScriptDescriptor objects.

For more information about how to create an Microsoft Ajax extender control, see Adding Client Capabilities to a Web Server Control.

Extender Controls in the Ajax Control Toolkit

The following table describes some of the Ajax extender controls that are available in the Ajax Control Toolkit.

Setting Extender Control Properties

You can set extender control properties in the Properties window. Some extender controls also provide additional UI elements that you can access through the smart tag menu of the Web server control.

When a Web server control is extended, the Properties window shows a new category named Extenders. In this section, a new multi-level property is shown for each extender control that has been added to the Web server control. Each extender control provides unique properties that are specific to the control.

For more information about how to set Web server control properties, see How to: Enable the Properties Window in Visual Web Developer.

Managing Extender Controls

Because extender controls do not display UI directly in Design view, you manage them as part of the control to which they were added. If the Web server control is moved to a different location or is put inside another control, the attached extender controls are moved.

The markup of the extender control is included directly after the markup for the Web server control. If several extender controls are attached to a Web server control, the order of the extender controls is maintained during any move. This reduces the chance of conflicts at run time.

When a Web server control with attached extender controls is deleted from the design surface, the associated extenders are deleted also. If you change the ID property of a Web server control with attached extender controls in the Properties window, the TargetControlID property and ID property of the extender controls is updated to match.

If a Web server control with attached extender controls is cut or copied to the Clipboard, the copy includes the associated extender controls on the Clipboard. They are copied as markup and immediately follow the control. This occurs even if in the source, the extender markup is not contiguous with the control. When the Web server control is pasted, the extender controls are also pasted.

If an error is introduced into the markup of an extender control, it is shown in Design view with a message stating "Error Rending Control". To fix this error, correct the markup in Source view.

Back to top

Class Reference

The key server classes for extender controls are shown in the following table.

Back to top

See Also

Tasks

Walkthrough: Microsoft Ajax Extender Controls