I've found myself in need of debugging the javascript for the Ajax toolkit controls (AjaxCotnrolToolkit.dll) and in some cases the ASP.Net AJAX libraries. Here's how to set up an existing ajax-enabled web site to run from source code.

This is intended for people using the Ajax framework with ASP.Net 2.0. I haven't tried the same thing with .Net 3.5 but I'd imagine the steps are very similar, I'm just not sure where the .js source files are located in 3.5.

1. Create a new folder under your web site for the javascript source - I created a 'js' sub-directory.

Retrieving The Source For ASP.Net AJAX

2. The source for the core ASP.Net AJAX libraries are installed with the .Net 2.0 extensions available from the MS AJAX home page, so no additional download is required. Copy the folder named 'System.Web.Extensions' from the ASP.Net AJAX install directory to our js folder created in step 1. On my computer this was located in 'C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary'.

Retrieving The Source For The AjaxControlToolkit

3. If you haven't already got it, download the latest source for the toolkit from the project's home page here and extract it to a location on your hard drive.

4. We need to put the source files in our 'js' folder under a path named '/AjaxControlToolkit/[assembly version]'. I get the assembly version by right clicking on AjaxControlToolkit.dll (included in the package downloaded in step 3) clicking on the 'Version' tab and viewing the assembly version attribute under 'Other version information'. So now I have a sub-directory under my site with the path '/js/AjaxCotnrolToolkit/1.0.20229.20821'.

5. Next we need to copy the .js files for each of the controls to this new directory. The easiest way I've found to do this is browse to the folder you extracted in step 3, open the 'AjaxControlToolkit' sub folder (this is where all the control source is located) hit 'ctrl-f' to bring up explorer's search window, find all files with '.js' in the name and you can copy-paste the results into the directory created in step 4.

6. This is the tedious bit and if anyone has found a way around it then I'd love to hear from you! When the script references are added to the page, the .js file names are prefixed with AjaxControlToolkit.[ControlName] so we need to rename the files to what the framework is expecting. The control name is the name of the folder that the .js file was originally located in, for example Common.js should be renamed to AjaxControlToolkit.Common.Common.js.

It's a bit of a pain but you can get away with only renaming the control files you're dealing with if you don't want to do all 46 files straight off. You will definitely have to change Common.js as it is used by all controls. To find out what files are required you can complete step 7, load the page and view the source - you'll see the linked script files in the header of the HTML.

The Final Step

7. Now we just need to tell our site to use our 'js' folder to find the client side script. This is done using the ScriptPath attribute on the ScriptManager control. Below is the declaration for my ScriptManager:

Jimmy