http://codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=11121.
You have a choice of two files to download:
□ AjaxControlToolkit-Framework3-5.zip is the full release package with complete source code to all controls, the test framework, VSI, and more.
□ AjaxControlToolkit-Framework3.5-NoSource.zip contains only the sample web site and VSI, and is for people who don't need or want the source code for the controls.
The AJAX Control Toolkit comes with a set of AJAX Extender controls. Unlike the AJAX controls that come with ASP.NET 3.5, you need to manually add these to the Toolbox in Visual Studio 2008. To do so, add a new tab in Toolbox (see Figure 17-24), and name it AJAX Control Toolkit.
Figure 17-24
Extract the AjaxControlToolkit-Framework3.5-NoSource.zip file (assuming that you downloaded the version without source code) into a folder (C:AJAXControlToolkit, for instance). Inside the new folder is a folder named SampleWebSiteBin. Drag and drop the AjaxControlToolkit.dll library from that Bin folder onto the new AJAX Control Toolkit tab. The set of AJAX Control Toolkit Extender controls appears, as shown in Figure 17-25.
Figure 17-25
AJAX- Enabling a Page Using the ScriptManager Control
Now let's use some of the core AJAX controls in ASP.NET 3.5 to AJAX-enable the sample project created earlier in this chapter.
The first step toward AJAX-enabling an ASP.NET web page is to add the ScriptManager control to the page. That's the control that manages all the AJAX functionality on your page. It should be placed before any AJAX controls, so it's a good idea to place it at the top of the page, like this:
<body>
<form id='form1' runat='server'>
<div>
Display titles by publisher:
<asp:DropDownList
ID='DropDownList1'
runat='server'
DataSourceID='LinqDataSource2'
DataTextField='pub_name'
DataValueField='pub_id'
AutoPostBack='True'>
</asp:DropDownList>
...
To place the ScriptManager control on the page, you can either type it manually or drag the ScriptManager control from the Toolbox and drop it onto the code editor.
Using the UpdatePanel Control
To delineate the part of the page you want to update without causing the entire page to refresh, drag and drop an UpdatePanel control from the AJAX Extensions tab of the Toolbox onto the Default.aspx page, like this:
<body>
<form id='form1' runat='server'>
<div>
<asp:ScriptManager ID='ScriptManager1' runat='server'>
</asp:ScriptManager>
Display titles by publisher:
<asp:DropDownList
ID='DropDownList1'
runat='server'
DataSourceID='LinqDataSource2'
DataTextField='pub_name'
DataValueField='pub_id'
AutoPostBack='True'>
</asp:DropDownList>
...
The <asp:UpdatePanel> control divides a web page into regions — each region can be updated without refreshing the entire page. The <ContentTemplate> element sets the template that defines the contents of the <asp:UpdatePanel> control.
Now, move a GridView control into the <ContentTemplate> element so that the content of the GridView can be updated without causing a postback to the server:
<asp:UpdatePanel ID='UpdatePanel1' runat='server'>
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
Press F5 to test the application again. This time, edit the record by clicking the Edit link (see Figure 17-26). Notice that, as you click on the links (Edit, Update, Cancel, and Select), the page does not reload. Instead, all the changes happen inside the GridView control.
Figure 17-26
