CovertCoder - Topic: Add AJAX to an Existing Web Application

Main Navigation

Tools

Featured Articles

Tutorials

Topic: Add AJAX to an Existing Web Application

Description: This tutorial shows you how to add AJAX features to an existing ASP.Net Web Application

Notes: You must have AJAX installed on your machine or the server that is hosting your site in order for AJAX to work.

1. Start by adding the following items to your current Web Application's web.config file.
a. Under the <configuration> tag, add the following <configSections> section.

b. Under the <system.web> tag, add the following <pages> section. (NOTE: If you have a <page> element, then just add the <controls> section.

c. Next, you are going to replace your current sections within your web.config file with the following three sections (compilation, httpHandlers, and httpModules)
NOTE: If you have any assemblies wired in your section that are not in the section below, make sure to add them to the section below.

d. Under the <configuration> element, add the following <system.web.extensions> and <system.webServer> sections:

<system.web.extensions>
<scripting>
<webServices>

</webServices>
   </scripting>
</system.web.extensions>
<system.webServer>
   <validation validateIntegratedModeConfiguration="false"/>
   <modules>
      <add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
   </modules>
   <handlers>
      <remove name="WebServiceHandlerFactory-Integrated"/>
      <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
   </handlers>
<system.webServer>

e. For IIS7, you will need to fix the web.config with the migrate tool, or you will need to migrate the web.config to Integrated pipeling mode.
1. For it to work properly in Integrated mode, you can use the AppCmd line below:

> %windir%\system32\inetsrv\Appcmd migrate config "<ApplicationPath>"

2. You can migrate manually by moving the custom entries in the <system.web><httpModules> and <system.web><httpHandlers> configuration manually to the <system.webServer><handlers> and <system.webServer><modules> configuration sections, respectively. Then you must remove the <httpHandlers> and <httpModules> configuration. OR, add the following to your application's web.config:

<system.webServer>
<validation validateIntegratedModeConfiguration="false">
</system.webServer>

2. Next, we'll load the toolkit into your pre-AJAX application:
     a. Open up your pre-AJAX application.
     b. Open up any page in Design mode.
     c. Open up your Toolbox.
     d. Right-click inside the Toolbox and select "Choose items...".
     e. When the "Choose Toolbox Items" dialog displays, click "Browse".
     f. Now you will need to navigate to where your AJAX toolkit assembly is located.
     g. If you do not know where it is, do a search on your "C:" drive for "AJAXControlToolkit.dll".
     h. After you select the dll, hit OK and your AJAX tools will load into your Toolbox.

3. How to add AJAX to a web page.
     a. Every page that uses AJAX must have 1 ScriptManager control on it's page.
     b. To add one, drag a ScriptManager control from the toolbox to your page.
     c. The control is located under the "AJAX Extensions" section.

That's It! Now you are ready to use any of the AJAX controls.