Ajax Control Toolkit with SharePoint 2010

I had to use Ajax control toolkit with sharepoint and I had download the latest version from codeplex. We usually download latest versions of software because we believe that with latest version we can get more features and more bug-free. I had used Ajax Control Toolkit with SharePoint 2007 and it was much easier to configure and use Ajax Control Toolkit. With that belief in mind I had started using Ajax Control Toolkit in SharePoint 2010 downloading latest version for .net framework 3.5. But I failed  and after investigating I had found the following errors.

• AjaxControlToolkit requires ASP.NET Ajax 4.0 scripts. Ensure the correct version of the scripts are referenced. If you are using an ASP.NET ScriptManager, switch to the ToolkitScriptManager in AjaxControlToolkit.dll.

• Sys.registerComponent is not a function

The problem here is that latest versions of Ajax Control Toolkit is more optimized or targeted with .net framework 4.0. Even the Ajax control toolkit for .net framework 3.5 doesn’t work with SharePoint 2010. If you try to use Ajax Control Toolkit for 3.5 with SharePoint 2010, you may get the exceptions shown above.

How to make Ajax Control Toolkit working with SharePoint 2010?

Here are the steps to make Ajax Control Toolkit working with SharePoint 2010.

1. Download Correct (compatible) version of Ajax Control Toolkit.

   Since current release of Ajax Control Toolkit doesn’t work with SharePoint 2010, you need to download previous release. Maybe Ajax Control Toolkit team will address this issue and we’ll be able to use current Toolkit version with SharePoint in future. Until the current release is made compatible, please download the SharePoint 2010 compatible Ajax Control Toolkit from here.

2. Add AjaxControlToolkit.dll reference to your project

   To use the Ajax Control Toolkit in your SharePoint project, add reference to the AjaxControlToolkit.dll in your project. To use the Ajax Control Toolkit in any web part control add the following lines to register the Ajax Control Toolkit namespace.

   <%@ Register Assembly="AjaxControlToolkit, Version=3.0.30930.28736,
    Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" 
   Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
   

3. Remember, here version 3.x version of Ajax Control Toolkit is used instead 3.5.

4. Add Ajax Control Toolkit ScriptManager in master page.

   Open the Master page in SharePoint Designer. By default the v4.Master file is the default master page can be found “_catalogs/masterpage” folder. Before modifying the master page, keep a backup copy.

   • First register the Ajax Control Toolkit namespace in the masterpage file by putting the following line at the top of the file:

     <%@ Register Assembly="AjaxControlToolkit, Version=3.0.30930.28736,
      Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" 
     Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
     

   • Then remove the ScriptManager registration from the master page by removing the following line:

     <asp:ScriptManager id="ScriptManager" runat="server" EnablePageMethods="false"  
     EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true"/>
     

   • Finally Add the following line in place of the above line to register Ajax Control Toolkit

     <ajaxToolkit:ToolkitScriptManager id="ScriptManager" runat="server" EnablePageMethods="false" 
     EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true"/>
     

5. Register Ajax Control Toolkit namespaces in SharePoint package Designer 

   Finally, you need to register the Ajax Control Toolkit namespace with SharePoint Package designer. Registering Ajax Control Toolkit namespaces will add Ajax Control Toolkit namespaces in web.config’s safecontrol list. First open the Package designer in Visual Studio (Package usually exists under Package folder in Visual Studio). And then click the “Advanced” button in package designer window as shown in the image below. In that advanced tab you can add/edit assemblies to be registered safe as part of the deployment of the solution package. Click Add ==> “Add Existing Assembly”. The following image shows wizard to follow.

   

   Figure 1: Package Designer’s Advance tab

   In the “Add existing Assembly” window, add the following namespaces for Ajax Control Toolkit.

   Namespace	Type Name	Assembly Name
   AjaxControlToolkit	*	AjaxControlToolkit
   AjaxControlToolkit.Design	*	AjaxControlToolkit
   AjaxControlToolkit.HTMLEditor	*	AjaxControlToolkit
   AjaxControlToolkit.HTMLEditor.Popups	*	AjaxControlToolkit
   AjaxControlToolkit.HTMLEditor.ToolbarButton	*	AjaxControlToolkit
   AjaxControlToolkit.MaskedEditValidatorCompatibility	*	AjaxControlToolkit

   The following image shows the “Add Existing Assembly” window for AjaxControlToolkit dll.

   

   Figure 2: Add/Edit Existing Assembly window

   Now you can build and deploy the package and as a result of deployment, Ajax Control Toolkit namespaces will be registered as safe controls in web.config.

Conclusion

Its really hard to believe that Ajax Control Toolkit’s  latest version doesn’t work with SharePoint. We expect to have the latest version of Ajax Control Toolkit to be compatible with SharePoint 2010. Until then we might have to use an old version of Ajax Control Toolkit.

prevent Concurrent Asynchronous postback

By default, when a page makes multiple asynchronous postbacks at the same time, the postback made most recently takes precedence. For example, user clicks on a button which generates asynchronous postback. Now before the response of the asynchronous postback comes to client, user click another button which also generates asynchronous postback. In this case the response of the first button's event will be discarded by the client. So user will not find the update information as the  the first button's event.

So in this case there are two approaches to handle the situation:

1. When a asynchronous postback is in progress, user will not be able to initiate another postback.

2. if user initiates multiple asynchronous postbacks then we can queue the requests and send them one by one. But in this case timeout is a problem.

 

Approach 1: Prevent users to initiate multiple asynchronous postbacks:

    <script type="text/javascript">

        var Page;

        function pageLoad() {

            Page = Sys.WebForms.PageRequestManager.getInstance();

            Page.add_initializeRequest(OnInitializeRequest);

        }

        function OnInitializeRequest(sender, args) {

            var postBackElement = args.get_postBackElement();

            if (Page.get_isInAsyncPostBack()) {

                alert('One request is already in progress.');

                args.set_cancel(true);

            }

        }    

    </script>

In the above code block, we are hooking OnInitializeRequest event on every request's initialize event. In the initialize event handler (OnInitializeRequest) we are checking if an asynchronous request is in progress. if so then canceling the current request.

 

Approach 2: Queue asynchronous requests

Andrew Fedrick describes in his blog how to queue asynchronous requests here.

For simplicity, my recommendation is to prevent users to initiate multiple asynchronous requests.

 

Some Useful Links

http://msdn.microsoft.com/en-us/library/bb386456.aspx

http://www.dotnetcurry.com/ShowArticle.aspx?ID=176&AspxAutoDetectCookieSupport=1

http://weblogs.asp.net/andrewfrederick/archive/2008/03/27/handling-multiple-asynchronous-postbacks.aspx

http://www.codedigest.com/CodeDigest/41-Cancel-Multiple-Asynchronous-Postback-from-Same-Button-in-ASP-Net-AJAX.aspx

Page Method (Web Service methods in aspx page)

Page method is web service method added to aspx page rather than in asmx page. Sometimes we just want a web service functionality for a single page and we don't want to use any separate web service for the shake of complexity. We need such web service like functionality when use ajax. For example when we use dynamic populate control from ajax control toolkit we need to populate data dynamically. In that case the populate control needs data from web service but if we don't want to introduce web service for keeping our system simple we can implement the code for web service in the aspx page. To declare a page method web service use the following script in the aspx page.

<head runat="server">

<script runat="server">

    [System.Web.Services.WebMethod()]

    [System.Web.Script.Services.ScriptMethod()]

    public static string Test()

    {

        return "sohel rana";

    }

</script>

    <title>Page Title</title>

</head>

You can also declare the web service method in code behind file. In that case the method will be public and static and should be marked with WebMethod attribute as shown below

    protected void Page_Load(object sender, EventArgs e)

    {

 

    }

 

    [System.Web.Services.WebMethod()]

    [System.Web.Script.Services.ScriptMethod()]

    public static string Test()

    {

        return "your data";

    }

Now we need to know how we'll call this page methods using javascript. There are two ways to call the page mehtod Test. One is call via PageMethods and another is to use ajax control toolkit's built-in feature. To use PageMethods you need to set the ScriptManager's EnablePageMethods to true as shown below.

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

This will generate a PageMethods javascript object with which we can call the Test method as shown below:

    <script type="text/javascript">

        function CallWebServiceMethod() {

            PageMethods.Test(complete);

        }

        function complete(val) {

            alert(val);

        }

    </script>

<input type="button" value="Click" onclick="CallWebServiceMethod()" />

 

The second option will be to use Ajax Control Toolkit's built-in feature. Obviously this option will be available if you are using Ajax Control Toolkit. For example in the following code snippet the Dynamic Populate extender control will call the service method Test and on completion of invocation of Test method the control will update the panel with id p1.

 

            <cc1:DynamicPopulateExtender ID="dpe" runat="server" ServiceMethod="Test" TargetControlID="p1">

            </cc1:DynamicPopulateExtender>

        <asp:Panel ID="p1" runat="server"></asp:Panel>

But my personal opinion is that may be the Page method should not use as I'm skeptical about the performance. May be I need to dig more on performance.