Combine ScriptResource ajaxcontroltoolkit script

Task: Combine the AjaxControlToolkit Script.

Description: Combine the AjaxControlToolkit Script. As we can see when we use AjaxControl on our webpage it load with several javascript resources (ScriptResource.axd). For SEO purpose we need to minimize the several request. So that we can combine these script in a single request.

First we need to know which script's are required for our webpage. for that we need to use ScriptReferenceProfiler (it is available in codeplex). So download it from codeplex and stored the dll in our 'Bin' Folder. And Use below code to find the several request.



<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="c1" %>
<%@ Register Assembly="ScriptReferenceProfiler" Namespace="ScriptReferenceProfiler"    TagPrefix="srp" %>

<html>
<head runat="server"></head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm1" runat="server">
</asp:ScriptManager>
<srp:ScriptReferenceProfiler ID="ScriptReferenceProfiler1" runat="server" />
<%-- Below will be all controls with ajax controls whatever.. --%>
</form>
</body>
</html>

Result (On Browser):


11 references found on this page:
        <asp:ScriptReference name="MicrosoftAjax.js"/>
        <asp:ScriptReference name="MicrosoftAjaxWebForms.js"/>
        <asp:ScriptReference name="AjaxControlToolkit.Compat.Timer.Timer.js" assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
        <asp:ScriptReference name="AjaxControlToolkit.Common.Common.js" assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
        <asp:ScriptReference name="AjaxControlToolkit.Compat.DragDrop.DragDropScripts.js" assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
        <asp:ScriptReference name="AjaxControlToolkit.ExtenderBase.BaseScripts.js" assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
        <asp:ScriptReference name="AjaxControlToolkit.DragPanel.FloatingBehavior.js" assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
        <asp:ScriptReference name="AjaxControlToolkit.DynamicPopulate.DynamicPopulateBehavior.js" assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
        <asp:ScriptReference name="AjaxControlToolkit.RoundedCorners.RoundedCornersBehavior.js" assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
        <asp:ScriptReference name="AjaxControlToolkit.DropShadow.DropShadowBehavior.js" assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>

        <asp:ScriptReference name="AjaxControlToolkit.ModalPopup.ModalPopupBehavior.js" assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>



Now we can combine the several Script request to one. For that we have to just copy the all found reference & use as below code .




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

<html>
<head runat="server"></head>
<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="sm1" runat="server">
<CompositeScript>
<Scripts>
      <asp:ScriptReference name="MicrosoftAjax.js"/>
      <asp:ScriptReference name="MicrosoftAjaxWebForms.js"/>
      <asp:ScriptReference name="AjaxControlToolkit.Compat.Timer.Timer.js" assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
      <asp:ScriptReference name="AjaxControlToolkit.Common.Common.js" assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
      <asp:ScriptReference name="AjaxControlToolkit.Compat.DragDrop.DragDropScripts.js" assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
      <asp:ScriptReference name="AjaxControlToolkit.ExtenderBase.BaseScripts.js" assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
      <asp:ScriptReference name="AjaxControlToolkit.DragPanel.FloatingBehavior.js" assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
      <asp:ScriptReference name="AjaxControlToolkit.DynamicPopulate.DynamicPopulateBehavior.js" assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
      <asp:ScriptReference name="AjaxControlToolkit.RoundedCorners.RoundedCornersBehavior.js" assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
      <asp:ScriptReference name="AjaxControlToolkit.DropShadow.DropShadowBehavior.js" assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
      <asp:ScriptReference name="AjaxControlToolkit.ModalPopup.ModalPopupBehavior.js" assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
</Scripts>
</CompositeScript>
</asp:ScriptManager>
<%-- Below will be all controls with ajax controls whatever.. --%>
</form>
</body>
</html>


Now we can see in our browser the several ScriptResource combined in one request.

1 comment: