Introduction
ScriptManager is a special ASP.NET server control that should be placed on a page before you can use any of AJAX.NET enabled controls. The same rule is true for the AJAX Control Toolkit controls: they all require a ScriptManager on the page. While AJAX Control Toolkit controls work perfectly fine with the standard ASP.NET ScritpManager the Toolkit includes its own version of the ScriptManager called ToolkitScriptManager that inherits from ScriptManager and is meant to improve some of the ScriptManager's behaviors in particular how it renders out behavior JS scripts. Let's examine how using a ToolkitScriptManager changes a web page's appearance.
Experiment
As a testing example I have created a very simple page consisting of a single Accordion control from the AJAX Control Toolkit library.
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.accHead { border:1px solid #445566;font-size:larger;background-color:#aaa;}
.accHeadSel { border:1px solid #445566;font-size:larger;background-color:#444;color:#fff;}
.accCont { border:1px solid #ccc;padding:5px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="tsm" runat="server"></ajax:ToolkitScriptManager>
<%-- <asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager>--%>
<div>
<ajax:Accordion
ID="MyAccordion"
runat="Server"
SelectedIndex="0"
HeaderCssClass="accHead"
HeaderSelectedCssClass="accHeadSel"
ContentCssClass="accCont"
AutoSize="None"
FadeTransitions="true"
TransitionDuration="250"
FramesPerSecond="40"
RequireOpenedPane="false"
SuppressHeaderPostbacks="true">
<Panes>
<ajax:AccordionPane ID="AccordionPane1" runat="server"
HeaderCssClass="accHead"
ContentCssClass="accCont">
<Header>Pane Header 1</Header>
<Content>Content 1</Content>
</ajax:AccordionPane>
<ajax:AccordionPane ID="AccordionPane2" runat="server"
HeaderCssClass="accHead"
ContentCssClass="accCont">
<Header>Pane Header 2</Header>
<Content>Content 2</Content>
</ajax:AccordionPane>
<ajax:AccordionPane ID="AccordionPane3" runat="server"
HeaderCssClass="accHead"
ContentCssClass="accCont">
<Header>Pane Header 3</Header>
<Content>Content 3</Content>
</ajax:AccordionPane>
</Panes>
<HeaderTemplate>List of Panes</HeaderTemplate>
<ContentTemplate></ContentTemplate>
</ajax:Accordion>
</div>
</form>
</body>
You may have noticed that right after the
form tag there are ScriptManager (SM) control and ToolkitScriptManager (TSM) control on the page but one of them is commented out. Next I run a page from VS 2008 two times: first using the SM and second using TSM, and compare the results.
HTML output and trafficLet's compare the HTML output of two page versions. See a WinMerge screen shot below that shows the SM version in the left pane and the TSM version in the right pane.
First difference you see is that TSM adds its own hidden field on the page (top right pane) and the next and more important difference is that TSM renders one script reference on the page instead of the five ones that SM does.
Now if we examine the page's traffic with the FireBug we'll see how that changes the traffic: first graph refers to the page using the SM control and the second one when the TSM's at work.
Analyzing the graphs it's easy to see that the TSM does reduce a number of browser's round-trips by combining multiple script references into a single one. This advantage will become more attractive as more AJAX-enabled server controls will be placed on a web page that support script combining. However it is not necessarily true that it will always reduce the page loading time. As you can see when TSM returns a combined script to the page it takes some time to perform a work on the server. Correspondingly the amount of work and consequentially the response time directly depend on the number of scripts to combine (that is a number of AJAX server controls) and the size of the scripts to process (white spaces removal and compressing).
So there is no single recommendation that it's always preferable to use TSM instead of SM. In many cases SM version of a page may work faster then a TSM version of the page. Since it's not that difficult to alter a page for both cases I'd advise to test and compare both versions in your particular scenario before making a decision which one to choose.
