Speed up load time of AJAX Control Toolkit controls while debugging

This is probably already well known and well documented, but I still occasionally see people bemoaning the slow load time of some of the controls in the AJAX Control Toolkit. The slow loading problem is particularly noticable when you are debugging pages that have many calendar controls, at least that's where I first noticed it.

In a post from Scott Guthrie, he explains why you should ..."never run production ASP.NET Applications with debug=true enabled". In this article, reason #4 states that "Scripts and images downloaded from the WebResources.axd handler are not cached". My theory is that this is the reason for the slow loading of the calendar control-laden pages when debugging your application. And sure enough when you set debug=false, the page loads faster thanks to the caching, but then you give up the ability to debug through your code. What should you do?

Well, there's a middle-ground that worked nicely for me. You can set the ScriptManager on pages with lots of AJAX Control Toolkit controls to run in release mode like this:

  <asp:ScriptManager ID="ScriptManager" runat="Server" ScriptMode="Release"/>

Then you can leave Debug="true" in your web.config while you are developing without suffering the slow load time.

Another thing you should consider doing is utilize the script combining feature introduced in build 10618 of the AJAX control toolkit, which is documented here. This can reduce the number of requests your page needs to make for all of the individual scripts. It's been a while since I set this up, but I think this was all that was necessary:

 Add this file to your web site:

 - - CombineScriptsHandler.ashx - -

<%@ WebHandler Language="C#" Class="CombineScriptsHandler" %>

using System;
using System.Web;
using AjaxControlToolkit;

public class CombineScriptsHandler : IHttpHandler
{
    /// <summary>
    /// ProcessRequest implementation outputs the combined script file
    /// </summary>
    /// <param name="context"></param>
    public void ProcessRequest(HttpContext context)
    {
        if (!ToolkitScriptManager.OutputCombinedScriptFile(context))
        {
            throw new InvalidOperationException("Combined script file output failed unexpectedly.");
        }
    }

    /// <summary>
    /// IsReusable implementation returns true since this class is stateless
    /// </summary>
    public bool IsReusable
    {
        get { return true; }
    }
}

- - -

Then use the ToolkitScriptManager instead of the straight ScriptManager in your pages, specifying the CombineScriptsHandlerUrl to point to the handler you just added, similar to this (note: the ScriptMode="Release" trick works here too).

- - MyPage.aspx - -

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

:
<ajaxToolkit:ToolkitScriptManager ID="ScriptManager" runat="Server" EnablePartialRendering="true" ScriptMode="Release" CombineScriptsHandlerUrl="~/CombineScriptsHandler.ashx"/>
:

- - -