ScriptManager Advanced


Sponsored Links

73058_New Scooba® 230 Floor Washing Robot + Free Shipping!

 

ScriptManager Advanced

Here we look at some of the mor advanced features of the ASP.NET ScriptManager.

The ScriptManager is part of ASP.NET AJAX and provides access to main Microsoft related AJAX features and control. In a basic example, it allows partial page rendering using UpdatePanels. But the ScriptManager offers a little more than this.

ScriptReference

The ScriptManager can manage our Javascript files we need to include on our pages, so that we don't need to use the usual HTML <script> tags. The below example shows how to use the ScriptReference tags to include JS files on our page:


<asp:ScriptManager ID="ScriptManager_Advanced" runat="server">

    <Scripts>

        <asp:ScriptReference Path="~/Scripts/JScript1.js" />
        <asp:ScriptReference Path="~/Scripts/JScript2.js" />
        <asp:ScriptReference Path="~/Scripts/JScript3.js" />

    </Scripts>

</asp:ScriptManager>


CompositeScript

In the previous example we loaded 3 saperate javascript files, so 3 separate downloads were made to the server to retrieve our Javascript. The CompositeScript property of the ScriptManager allows us to combine all the Javascript files into one, so in the below example we load the same Javascript files as in the above example, but we only need 1 download, the ScriptManager bundles them together and serves them from a file called ScriptResource.axd. This is actually similar to a feature in ASP.NET 4.5 which will automatically combine your script files (and css if I remeber rightly) into 1. It turns out you can actually do a very similar thing with the ScriptManager from ASP.NET 3.5 onwards. Some browsers can only download 2 files at a time, so this should in theory speed up the page load, but, test and compare to find out.


<asp:ScriptManager ID="ScriptManager_Advanced" runat="server">

    <CompositeScript>

        <Scripts>

            <asp:ScriptReference Path="~/Scripts/JScript1.js" />
            <asp:ScriptReference Path="~/Scripts/JScript2.js" />
            <asp:ScriptReference Path="~/Scripts/JScript3.js" />

        </Scripts>

    </CompositeScript>

</asp:ScriptManager>


Debug and Release Javescript file

The ScriptMode property of the ScriptManager and the ScriptReference allows one to control whether a Debug or Release version of the Javascript files will be loaded. This is pretty cool, so when we are debugging we can use our Debug Javascript files, and when it's ready to deploy we just switch the debug property in the web.config to false and then the ScriptManager will automatically load our release versions of the Javascript (which ideally will be minified).

In order to get this working, we need to have our Release js files ending with a .js and our Debug js files ending with .debug.js such as below:


Release Javascript Files

JScript1.js
JScript2.js
JScript3.js

Debug Javascript Files

JScript1.debug.js
JScript2.debug.js
JScript3.debug.js


Next we need to set our ScriptManager's ScriptMode property to Auto so that it picks the setting up from the web.config, and also set the ScriptReferences' ScriptMode properties to Inherit so they take their values from the ScriptManager:


<asp:ScriptManager ID="ScriptManager_Advanced" runat="server" ScriptMode="Auto">

    <Scripts>

        <asp:ScriptReference Path="~/Scripts/JScript1.js" ScriptMode="Inherit" />
        <asp:ScriptReference Path="~/Scripts/JScript2.js" ScriptMode="Inherit" />
        <asp:ScriptReference Path="~/Scripts/JScript3.js" ScriptMode="Inherit" />

    </Scripts>

</asp:ScriptManager>


This is everything set in place, the ScriptManager will look at the debug setting in the web.config's compilation element. When debug is set to true, the ScriptManager will load the debug version of the Javascript files. When we set debug to false, the ScriptManager will use the release versions of our Javascript files.

Here we have our web.config's debug value set to true, so our debug Javascript files will be loaded.


<compilation debug="true" targetFramework="4.0"/>