Walkthrough: ASP.NET AJAX Extender Controls

  • Artikel

ASP.NET AJAX extender controls enhance the client functionality of ASP.NET Web server controls, such as TextBox controls, Button controls, and Panel controls. By using extenders, you can give users a richer Web-based experience. In this walkthrough you will use an extender control to enhance the functionality of an ASP.NET Button Web server 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 to 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 Control Toolkit Web site.

Important noteImportant Note:

The 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 that they are supported controls.

For more information about extender controls in Visual Studio 2008, see ASP.NET AJAX Extender Controls Overview. For additional details about the ASP.NET AJAX Toolkit, see the ASP.NET AJAX Control Toolkit Web site.

Prerequisites

In order to complete the procedures in this walkthrough, you will need:

  • Visual Studio 2008 or Microsoft Visual Web Developer Express.

  • The ASP.NET AJAX Control Toolkit. You can download the Control Toolkit from the ASP.NET AJAX Control Toolkit Web site.

Creating a Web Site

To begin, you will create an ASP.NET Web site that is enabled for AJAX functionality.

To create a file system Web site

  1. Open Visual Studio 2008 or Microsoft Visual Web Developer Express.

  2. On the File menu, click New Web Site.

  3. In the New Web Site dialog box under Visual Studio installed templates, click ASP.NET Web Site.

  4. In the Location box, select the File System check box, and then type the name of the folder where you want to keep the pages of the Web site.

    For example, type the folder name C:\WebSite1.

  5. In the Language list, click Visual Basic or Visual C#, and then click OK.

    Visual Studio creates the folder and opens a new Web page named Default.aspx in Source view.

Adding an AJAX Extender Control

The ASP.NET AJAX Control Toolkit includes several extender controls that can be used to enhance the client functionality of Web server controls.

Note

Before you add an extender control to a server control in the following procedure, you must install the ASP.NET AJAX Toolkit. You can download the Control Toolkit from the ASP.NET AJAX Control Toolkit Web site.

To add an AJAX extender control

  1. Switch to Design view.

  2. If the page does not already contain a ScriptManager control, from the AJAX Extensions tab of the Toolbox, drag one onto the page.

    Note

    A ScriptManager control is required to support AJAX functionality.

  3. From the Standard tab of the Toolbox, drag a Button control onto the page.

  4. If the Button Tasks shortcut menu does not appear, right-click the Button control and then click Show Smart Tag.

  5. On the Button Tasks menu, click Add Extender.

  6. In the Extender Wizard, in the Choose the functionality to add to Button1 list, click ConfirmButtonExtender, and then click OK.

    Note

    You can also add an extender control by dragging the extender control from the Toolbox directly onto the Button control.

  7. In the Properties window, expand the Extenders tab, and then expand Button1_ConfirmButtonExtender.

  8. Set the ConfirmText property to Continue?

Testing the Extender Control

You can now run the page to test the extender control.

To test the extender control

  1. Press CTRL+F5 to run the page in the browser.

  2. Click the button that you added to the page.

    A confirmation message box is displayed, which is the behavior added by extender control.

  3. Close the browser.

Removing an AJAX Extender Control

If the functionality of an extender control is no longer needed, you can remove the extender control.

To remove an AJAX extender control

  1. Switch to Design view.

  2. Select the Button control, and then on the Button Tasks menu, click Remove Extender.

  3. In the Extenders attached to Button1 list, select ConfirmButtonExtender.

  4. Click Remove, and then click OK.

See Also

Concepts

ASP.NET AJAX Extender Controls Overview