ASP.NET AJAX Extender Controls Overview
ASP.NET 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 ASP.NET AJAX Control Toolkit. The Control Toolkit provides samples and an SDK that make it simple to create and reuse custom controls and extenders. You can download the ASP.NET AJAX Control Toolkit from the ASP.NET AJAX Web site.
.gif "Important note") Important Note: |
|---|
The ASP.NET AJAX Control Toolkit is a community-supported library, and is not supported by Microsoft. This topic discusses extender controls that are in the Control Toolkit as examples of how to work with extender controls. However, you should not interpret the information in this topic to mean that the extender controls discussed here are an official part of ASP.NET or are supported controls. |
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 standard 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 ASP.NET 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.
Note
The ASP.NET AJAX Control Toolkit is a community-supported library. It is not part of ASP.NET.
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: ASP.NET 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.
Note
If you extend an existing control type that is derived from the WebControl class, implement the IScriptControl interface.
For more information about how to create an ASP.NET 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 ASP.NET AJAX Control Toolkit.
Note
The ASP.NET AJAX Control Toolkit is a community-supported library. It is not part of ASP.NET. The contents of the library and the functionality of individual controls are subject to change.
AJAX extender control |
Description |
|---|---|
CascadingDropDown |
Dynamically populates a DropDownList control, depending on the selection in another DropDownList control. This extender control attaches to a DropDownList control. When the selection of one DropDownList control is changed, the CascadingDropDown extender control calls a specified Web service to retrieve a list of values that is used to populate the next DropDownList in the set. |
CollapsiblePanelExtender |
Enables collapsible sections to be added to a Web page. This extender control attaches to an UpdatePanel control. You can specify a Web server control that can expand or collapse the UpdatePanel control. Alternatively, the UpdatePanel can be set to automatically expand or collapse when users move the mouse pointer over it. |
ConfirmButtonExtender |
Displays a confirmation message box after a Button control has been clicked, but before the page or UpdatePanel is submitted to the server. If users cancel, the page is not submitted. This extender control attaches to a Button control. |
FilteredTextBoxExtender |
Prevents users from typing specific characters into a TextBox control. This extender control attaches to a TextBox control. |
ModalPopupExtender |
Enables content to be displayed, but prevents the user from interacting with the rest of the page. This extender control attaches to any Web server control that can be used to open the modal window. |
PasswordStrength |
Displays the strength of a password. This extender control attaches to a TextBox control. |
RoundedCornersExtender |
Applies rounded corners to existing elements. This extender control typically attaches to a Panel control. |
TextBoxWatermarkExtender |
Displays a message inside a TextBox control when the text box does not contain a text value. This extender control attaches to a TextBox control. |
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.
Note
If an extender has a custom ID (for example, one that you provided), the ID property is not changed when the ID property of any associated Web server control is changed.
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.
Class |
Description |
|---|---|
Provides an abstract base class for an extender control. |
|
Defines the behavior for an extender control. |
Back to top