Walkthrough: Microsoft Ajax Extender Controls

  • Article

Microsoft 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 Microsoft 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 Ajax Control Toolkit provides samples and an SDK to make it simple to create and reuse custom controls and extenders.

Important

The Ajax Control Toolkit is a community-supported library, and is not supported by Microsoft. This topic discusses extender controls that are in the Ajax 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, see Microsoft Ajax Extender Controls Overview. For additional information, see the Ajax Control Toolkit.

Prerequisites

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

  • Visual Studio or Visual Web Developer Express installed on your computer.

    Note

    If you are using Visual Studio, the walkthrough assumes that you selected the Web Development collection of settings when you started Visual Studio the first time. For more information, see How to: Select Web Development Environment Settings.

  • The Ajax Control Toolkit. For download information, see the Ajax Control Toolkit.

Creating a Web Site

To begin, you will create an ASP.NET Web site that is enabled for Ajax functionality. If you have already created a Web site in Visual Studio or Visual Web Developer Express (for example, by completing Walkthrough: Creating a Basic Web Forms Page in Visual Studio), you can use that Web site and go to the next section. Otherwise, create a new Web site and page by following these steps.

To create a file system Web site

  1. Open Visual Studio or Visual Web Developer Express.

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

    The New Web Site dialog box is displayed.

  3. Under Installed Templates, click Visual Basic or Visual C# and then select ASP.NET Web Site.

  4. In the Web location box, select File System, and then enter the name of the folder where you want to keep the pages for your Web site.

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

  5. Click OK.

    Visual Studio creates a Web site project that includes prebuilt functionality for layout (a master page, the Default.aspx and About.aspx content pages, and a cascading style sheet), for Ajax (client script files), and for authentication (ASP.NET membership).

Adding an Ajax Extender Control

The 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 Ajax Control Toolkit. For download information, see the Ajax Control Toolkit.

To add an Ajax extender control

  1. Switch to Design view.

  2. Add an AjaxScriptManager control to the page by following these steps:

    1. Right-click the Toolbox and then click Choose Items.

    2. In the Choose Toolbox Items dialog box, click Browse.

    3. Browse to where you installed (extracted) the Ajax Control Toolkit, and then browse to the \WebForms\Release folder underneath the installation folder.

    4. Select the System.Web.Ajax.dll file and then click Add.

      Note

      A message might be displayed that warns you that the assembly was downloaded from a network location. If you see this message, click Yes.

    5. Click OK.

      The AjaxScriptManager control is added to the Toolbox.

    6. Drag an AjaxScriptManager control onto the page.

      The control is added to the page. Visual Studio also copies the System.Web.Ajax.dll assembly to the Bin folder of the current project. (The process creates the Bin folder if that folder does not already exist.)

  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

Microsoft Ajax Extender Controls Overview