The following exercises I wrote for a SharePoint Developers course but I thought the steps could come in handy for any SharePoint 2007 site. The first exercise demonstrates a nice little short cut to get the site’s web.config file configured for AJAX. Server names and directory paths would need to be modified for the environment you are working in.

Exercise 1: Configuring the Web Site’s Web.config for the .NET 3.5 Framework and AJAX

1. Open Visual Studio 2008.
2. Click File -> Open -> Web Site.
3. Browse to c:\inetpub\wwwroot\wss\Virtualdirectory\100
4. Click “Open”
5. Make sure you click “Yes” to the displayed dialog box asking if you want to convert the Web site to the 3.5 Framework.

   Note: Clicking yes to this dialog will get Visual Studio to make most of the necessary changes to the site’s web.config file necessary for AJAX to work.
   

6. Add a reference to System.Web.Extensions to the SafeControls list.
   • Locate the <SafeControls> element and add a new blank line to the end of the list of <SaveControl>’s just before the </SaveControl> element.
   • Add the following <SafeControl> element in the new line.

     <SafeControl
     Assembly=“System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35”
     Namespace=“System.Web.UI”
     TypeName=“*”
     Safe=“True“ />
     

     Note: The web.config file is case sensitive so be careful of your typing.

7. Add the AjaxControlToolkit.dll to the Global Assembly Cache.
   • Open two Windows Explorer Windows.
   • In one window navigate the folder containing the AjaxControlToolkit.dll file.
   • In the second window navigate to the C:\Windows\Assembly folder.
   • Drag the AjaxControlToolkit.dll file from the one window into the Assembly folder window.

     Note: You cannot copy and paste into the GAC you must drag and drop.

8. Add a reference to the AjaxControlToolkit.dll in the Web site’s web.config file.
   • Locate the <compilation><assemblies> element and add a new line to the bottom of the <add> elements list, before the </assemblies> end element.
   • Add the following new <add> element in the new line.

     <add
     assembly=“AjaxControlToolkit, Version=3.0.20820.16598, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e“ />
     

     Note: The web.config file is case sensitive so be careful of your typing.
     

9. Register the AjaxControlToolkit’s tag prefix within the Web site’s web.config file.
   • Locate the <pages><controls> element and add a new line to the bottom of the <add> elements list, before the </controls> end element.
   • Add the following new <add> element in the new line.

     <add
     namespace=“AjaxControlToolkit“
     assembly=“AjaxControlToolkit“
     tagPrefix=“ajaxToolkit“ />
     

     Note: The web.config file is case sensitive so be careful of your typing.
     

10. Save the changes you’ve made to the site’s web.config file.
11. Open Internet Explorer and browse to the site to make sure it still works and there aren’t any errors in the web.config file.

Exercise 2: Add a ScriptManager to the MasterPage

1. Open SharePoint Designer 2007 to your team site.
2. Open up the master page for your site (/_catalogs/masterpage/default.master).
3. Add the following into the markup of your page. A recommended location is right beneath the WebPartManager registration (search for <WebPartPages:SPWebPartManager id=”m” runat=”server” />):

   <asp:ScriptManager runat=”server” ID=”ScriptManager1″></asp:ScriptManager>

4. Save the page.
5. If you get a popup, click “Yes” to customize the page.

Exercise 3: Creating an AJAX Web Part Project

1. Open a new Instance of Visual Studio 2008.
2. Click File -> New -> Project.
3. From the Project Types list click “SharePoint” and then choose the “Web Part” template.
4. Name the new project “AjaxDemoWP” and click “Ok”.
5. Choose “Full Trust (Deploy in GAC)” for the trust level and click “Ok”.
6. Rename WebPart1 to AjaxExamplePart.
   • Right click the folder icon in Solution Explorer named “WebPart1″.
   • Choose “Rename” from the menu.
   • Type the name “AjaxExamplePart”.
   • Select “Yes” to the dialog box asking if you would like VSeWss to also rename all associated Web Part files.
7. Create a reference to the AjaxControlToolkit.dll file.
   • You’ll have use the Browse tab to locate that file somewhere on your D or C drive.
8. Create a reference to the System.Web.Extensions.dll assembly file.
   • You should be able to create this reference using the .NET tab in the reference dialog box.
9. Edit the AjaxExamplePart.xml file to provide a group name for it to display under in the Web Part catalog.
   • Change the current “File” element from this:

     <File
     Path=“AjaxExamplePart.webpart“
     Url=“AjaxExamplePart.webpart“
     Type=“GhostableInLibrary“ />
     

   • To this:

     <File
     Path=“AjaxExamplePart.webpart“
     Url=“AjaxExamplePart.webpart“
     Type=“GhostableInLibrary“>
     

     <Property
     Name=“Group“
     Value=“Ajax Web Part Demo“ />
     

   </File>
   

10. Edit the “CreateChildControls()” method to have the following lines of code inside the method:

    base.CreateChildControls();
    var tb = new TextBox();
    tb.ID = “theLabel”;
    var ce = new AjaxControlToolkit.CalendarExtender();
    ce.TargetControlID = tb.ID;
    Controls.Add(tb);
    Controls.Add(ce);

11. Set the project’s debug property browser URL.  
    • Right click the project “AjaxDemoWP”.
    • Select the “Properties” menu item
    • Select “Debug” in the properties page.
    • Set the “Start browser with URL:” to your servers address. In my case that’s http://virsrv08:100/.
    • Right click the “AjaxDemoWP” properties tab and choose “Save Selected Items
    • Press the F5 key to build, package, deploy, reset IIS and open the browser with to the site’s home page.



12. Add the new AjaxDemoWP Web Part to the site’s home page.
    • Click Site Actions -> Edit Page.
    • In the Left web part zone click “Add a Web Part”.
    • In the “Add Web Parts” window scroll down until you find the “Ajax Web Part Demo” group.
    • Check the box next to the “AjaxExamplePart Web Part” and click the “Add” button.
    • Click on the “Exit Edit Mode” link and you should see your Web Part displayed on the page looking like a TextBox but it should display a calendar when you click on it. 

Close the browser window to exit debug mode.
This topic is are covered in our SharePoint Developer course offerings.