Using the AJAX Control Toolkit in SharePoint

In this article I try to explain how we can use the Ajax Control Toolkit in Sharepoint. The ASP.NET AJAX Control Toolkit provides a set of controls and extenders that makes a web site rich. But if you like the Ajax Control toolkit, there is no direct way to plug and play it in Sharepoint. You have to follow the steps below-

1. Download the Ajax Control Toolkit. 
   
2. Add a new tab in the toolbox
   
   
   
   Choose items -> browse and select AjaxcontrolToolkit.dll
   
   
    
3. Open the sharepoint web.config and update the following sections

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<configuration>
  <configSections>
    <!--AJAX.NET SUPPORT 1 of 8 START-->
    <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">

      <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">

        <section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication" />

        <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">

          <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="Everywhere" />

          <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication" />

          <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication" />

          <section name="roleService" type="System.Web.Configuration.ScriptingRoleServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication" />

        </sectionGroup>

      </sectionGroup>

    </sectionGroup>
    <!--AJAX.NET SUPPORT 1 of 8 END-->
  </configSections>
  <SharePoint>
     <SafeControls>
      <!--AJAX.NET SUPPORT 2 of 8 START-->
      <SafeControl Assembly="System.Web.Extensions, Version=3.5.0.0,Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TypeName="*" Safe="True" />

      <SafeControl Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TypeName="*" Safe="True" />
      <!--AJAX.NET SUPPORT 2 of 8 END-->
    </SafeControls>
  </SharePoint>
  <system.web>
    <httpHandlers>
      <!--AJAX.NET SUPPORT 3 of 8 START-->
      <remove verb="*" path="*.asmx" />
      <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
      <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
      <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false" />
      <!--AJAX.NET SUPPORT 3 of 8 END-->
    </httpHandlers>
    <httpModules>
      <!--AJAX.NET SUPPORT 4 of 8 START-->
      <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
      <!--AJAX.NET SUPPORT 4 of 8 END-->
    </httpModules>
    <compilation batch="false" debug="true">
      <assemblies>
        <!--AJAX.NET SUPPORT 5 of 8 END-->
        <add assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
        <add assembly="System.Web.Extensions.Design, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        <!--AJAX.NET SUPPORT 5 of 8 START-->
      </assemblies>
    </compilation>
    <pages enableSessionState="false" enableViewState="true" enableViewStateMac="true" validateRequest="false" pageParserFilterType="Microsoft.SharePoint.ApplicationRuntime.SPPageParserFilter, Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" asyncTimeout="7">
      <!--AJAX.NET SUPPORT 6 of 8 START-->
      <controls>
        <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
        <add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        <add tagPrefix="ajaxToolkit" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" />
      </controls>
      <!--AJAX.NET SUPPORT 6 of 8 END-->
    </pages>
    <trust level="Full" originUrl="" />
  </system.web>
  <!--AJAX.NET SUPPORT 7 of 8 START-->
  <runtime>
    <assemblyBinding>
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Extensions" publicKeyToken="31bf3856ad364e35"/>
        <bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0"/>
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Extensions.Design" publicKeyToken="31bf3856ad364e35"/>
        <bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0"/>
      </dependentAssembly>
    </assemblyBinding>
  </runtime>
  <!--AJAX.NET SUPPORT 7 of 8 END-->
  <!--AJAX.NET SUPPORT 8 of 8 START-->
  <system.web.extensions>
    <scripting>
      <webServices>
        <jsonSerialization maxJsonLength="500000">
          <converters>
          </converters>
        </jsonSerialization>
      </webServices>
      <scriptResourceHandler enableCompression="false" enableCaching="true" />
    </scripting>
  </system.web.extensions>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <modules>
      <add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
    </modules>
    <handlers>
      <remove name="WebServiceHandlerFactory-ISAPI-2.0" />
      <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
      <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, &#xD;&#xA;      System.Web.Extensions, Version=3.5.0.0, Culture=neutral, &#xD;&#xA;      PublicKeyToken=31bf3856ad364e35" />
      <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, &#xD;&#xA;      System.Web.Extensions, Version=3.5.0.0, Culture=neutral, &#xD;&#xA;      PublicKeyToken=31bf3856ad364e35" />
    </handlers>
  </system.webServer>
  <!--AJAX.NET SUPPORT 8 of 8 END-->
</configuration>
 

4. Make sure SharePoint has access to AjaxControlToolkit.dll by either deploying the assembly to the Global Assembly Cache (GAC) or by putting in the \BIN folder of the SharePoint site's folder.
   
   
    
5. Edit the sharepoint master page in Sharepoint designer and add ToolkitScriptManager to the it
   
   
    
6. Now you can to write your code, open project in Visual studio 2008 then add reference of System.Web.Extensions, AjaxControlToolkit to the project. (In my case I am using one of my existing Web part application from sharepoint webpart using ASP.NET web user control. 
   
7. In SampleWebUserControl.ascx drag drop the UpdatePanel and CalendarExtender 



<%@ Control Language="C#" AutoEventWireup="true" Inherits="SampleWebPart.SampleWebUserControl, SampleWebPart, Version=1.0.0.0, Culture=neutral, PublicKeyToken=9f4da00116c38ec5" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

    <ContentTemplate>

        <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"

            AutoGenerateColumns="False" CellPadding="4" DataKeyNames="CustomerID" DataSourceID="SqlDataSource1"

            GridLines="Horizontal" BackColor="White" BorderColor="#000000"

            BorderWidth="1px">

            <RowStyle BackColor="#C8C7C7" ForeColor="Black" />

            <AlternatingRowStyle BackColor="#F9F6F6" ForeColor="#55514B" />

            <Columns>

                <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" InsertVisible="False"

                    ReadOnly="True" SortExpression="CustomerID" Visible="False" />

                <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />

                <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />

                <asp:BoundField DataField="MiddleName" HeaderText="MiddleName" SortExpression="MiddleName" />

                <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />

                <asp:BoundField DataField="Suffix" HeaderText="Suffix" SortExpression="Suffix" />

                <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />

                <asp:BoundField DataField="SalesPerson" HeaderText="SalesPerson" SortExpression="SalesPerson" />

                <asp:BoundField DataField="EmailAddress" HeaderText="EmailAddress" SortExpression="EmailAddress" />

                <asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />

            </Columns>

            <FooterStyle BackColor="White" ForeColor="#333333" />

            <PagerStyle BackColor="#3F3F3F" ForeColor="White" HorizontalAlign="Center" />

            <SelectedRowStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />

            <HeaderStyle BackColor="#3F3F3F" Font-Bold="True" ForeColor="White" />

        </asp:GridView>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"

            SelectCommand="SELECT [CustomerID], [Title], [FirstName], [MiddleName], [LastName], [Suffix], [CompanyName], [SalesPerson], [EmailAddress], [Phone]

FROM SalesLT.Customer"></asp:SqlDataSource>

    </ContentTemplate>

</asp:UpdatePanel>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" PopupButtonID="Button1"

    TargetControlID="TextBox1">

</ajaxToolkit:CalendarExtender>
<asp:Button ID="Button1" runat="server" Text="+" />
 

8. So finally you have the AjaxControlToolkit working in your sharepoint website