Originally posted on 7th Jan 2008 at my personal blog.

This is one of those blog posts, one writes so as to make a reference note for oneself. Frankly speaking I'm documenting the steps so that I don't forget them, and also help other developers out there struggling to get the AJAX toolkit to work in SharePoint webparts. In this post I shall illustrate the use of the simple 'CalendarExtender' control in a webpart.

Microsoft ASP.NET 2.0 AJAX Extensions extends ASP.NET 2.0, adding AJAX functionality and behaviours.
Complementing ASP.NET 2.0 AJAX Extensions is the ASP.NET AJAX Control Toolkit. This is a compilation of samples and components that offers developers a rich variety of client controls and extenders. You can download the ASP.NET AJAX Control Toolkit from the CodePlex Web site. The code sample I'm illustrating in this post use version 1.0.61025.0 of the Extensions and version 1.0.10618.0 of the Control Toolkit. Also it is recommended to have the Visual Studio 2005 extensions for WSS v3 tools installed on the development machine (for ready-to-use webpart project templates).

The initial steps are pretty straight forward. But complexity comes in while deploying the webpart which requires some additional configurations to be made to the site.

1. Creation of a Web Part project: Open Visual Studio->Select 'New Project'->Under Visual C#'s 'SharePoint' section, select 'Web Part Project' and give a suitable name for the solution like AJAXWebPart.
2. Adding References: References to the 'AJAXExtensionsToolbox.dll', 'System.Web.Extensions.dll' and the 'AjaxControlToolkit.dll' have to be made. An easy way to find these assemblies is to browse to their respective directories. The AJAX extensions can be found in 'C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\<version number>' directory. The 'AJAXControlToolkit.dll' can be copied from the SampleWebSite's (comes with the ajax control toolkit downloads) bin folder. After adding these assembly references the namespace reference AjaxControlToolkit has to be added to the webpart code file.
3. Adding the webpart DWP file: Right click on the project and select 'Add Item'. Select the 'XML File' option and change the name of the file to 'AJAXWebPart.dwp' and copy paste the XML below into the file and save it:

   <?xml version="1.0" encoding="utf-8" ?>
   <WebPart xmlns="http://schemas.microsoft.com/WebPart/v2" >
       <Title>AJAX WebPart</Title>
       <Description>Webpart to demonstrate use of AJAX Control Toolkit</Description>
       <Assembly>AJAXWeb Part</Assembly>
       <TypeName>AJAXWeb_Part</TypeName>
   </WebPart>

4. Adding the Manifest file: Right click on the project and select 'Add Item'. Select the 'XML File' option and change the name of the file to 'Manifest.xml' and copy paste the XML below into the file and save it:

   <?xml version="1.0" encoding="utf-8" ?>
   <WebPartManifest xmlns="http://schemas.microsoft.com/WebPart/v2/Manifest">
       <Assemblies>
           <Assembly FileName="AJAXWeb Part.dll">
               <SafeControls>
                   <SafeControl Namespace="AJAXWeb_Part" TypeName="*" />
               </SafeControls>
           </Assembly>
       </Assemblies>
       <DwpFiles>
           <DwpFile FileName="AJAXWebPart.dwp"/>
       </DwpFiles>
   </WebPartManifest>

   Note: The assembly filenames, Namespace names and the type names have to be changed as in your case. The above two steps are required if the webpart is deployed using the 'addwppack' operation of the 'stsadm' utility.

5. Adding Code to the Webpart.cs file: Override the 'CreateChildControls' method, and add the following code to it.

   protected override void CreateChildControls()
   {           
          base.CreateChildControls();
          TextBox txtDate = new TextBox();
          CalendarExtender ceDate = new CalendarExtender();
          ImageButton imgCalendrar = new ImageButton();
          txtDate.ID = "txtDate";
          imgCalendrar.ID = "imgCalendar";
          SPWeb currentWeb = SPControl.GetContextWeb(System.Web.HttpContext.Current);
          imgCalendrar.ImageUrl = currentWeb.Url + "/_layouts/images/calendar.gif";
          ceDate.TargetControlID = "txtDate";
          ceDate.PopupButtonID = "imgCalendar";          
          this.Controls.Add(txtDate);
          this.Controls.Add(imgCalendrar);
          this.Controls.Add(ceDate);
   }

   The code simply adds a 'TextBox', an 'ImageButton' and a 'CalendarExtender' controls to the web part and associates the 'CalendarExtender' control with the 'TextBox' and 'ImageButton'. Build the solution and you should have your webpart assembly ready for deployment. You can deploy it by either building a WSP solution package or packaging the assembly and other related files into a cabinet package.

6. Modifying the 'web.config' file: So far so good. But on deployment, the webpart will throw an error "Unable to add selected web part(s). A Web Part or Web Form Control on this Page cannot be displayed or imported. The type could not be found or it is not registered as safe." It is not the webpart actually but the AJAX Control toolkit that has to be recognized as a safe assembly by SharePoint. We need to add the following entries to the 'web.config' file of the SharePoint web application.

• Within the '<configSections>' tag, the following tags '<sectionGroup>' have to be added

  <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
            <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
                <section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
                <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
                    <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere" />
                    <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" />
                    <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" />
                </sectionGroup>
            </sectionGroup>
        </sectionGroup>

• The two safe control entries have to be added to the '<SafeControls>' section

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

<SafeControl Assembly="AjaxControlToolkit, Version=1.0.10618.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" Namespace="AjaxControlToolkit" TypeName="*" Safe="True" />     

• Add an assembly tag to the '<assemblies>' section

<add assembly="AjaxControlToolkit, Version=1.0.10618.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>

• Add the following entries to the '<HttpHandlers>' section

<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>

Doing these modifications to the 'web.config' doesnt solve the problem. There also needs to be atleast one AJAX ScriptManager is required on the page for AJAX controls that are displayed to the page. We can add an AJAXScriptManager programatically to the code above, but doing so wouldnt ensure the ScriptManager to be inserted early enough in the page lifecycle. It is recommended to add the scriptManager to the MasterPage of the site. But before adding the ScriptManager using SharePoint Designer, we need to register the tag prefix in 'web.config'

• Add the following section within the <pages> tags

<controls>
    <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
    <add namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" tagPrefix="asp"/>
</controls>

Once the tags are registered, open SharePoint Designer and open the default master page for editing. Add the following into the page below the 'webpartmanager' tag

<asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>

This should enable AJAX ControlToolkit on SharePoint and on your webparts