The ScriptContainer control provides features very similar to what the ASP.NET AJAX ScriptManager does, but without the drawbacks - System.Web.Extensions is not required and the default MS AJAX Client Script libraries aren't loaded. There are also some additional features such as the ability to determine the page placement of script references.

The script container provides:

• A Web Control to embed script links
• Support for multiple ScriptContainers on a Page or Page + Masters + UserControls
• Links can script files on the Web or WebResources
• Url Resolution for virtual relative paths (~/scripts/script.js)
• Automatic use of minimized files if available when Debug=off (selectable per script)
• Intellisense support in page for embedded scripts and resources
• Ability to control script location in document (HeaderTop, Header, Inline)
• Ability to programmatically add scripts at runtime and control script location
• Detect and avoid script duplication
• Interacts with ClientScriptProxy class and avoids script duplication with it

Syntax of ScriptContainer Markup

The script container control use the ScriptItem Class to provide the detail for each script item. The control provides global options for where scripts are loaded (HeaderTop,Header,Inline) and what script extension is used for optional MinScript files that are used when debug mode is off in web.config. Individual items can then override the global settings where appropriate.

Items can specify a resource path on disk so Intellisense works and yet still ask to receive scripts from resources.

<ww:ScriptContainer runat="server" RenderMode="Header" MinScriptExtension=".min.js">
    <Scripts>
        <script src="~/scripts/jquery.js" type="text/javascript" Resource="jquery" RenderMode="HeaderTop"></script>
        <script src="~/scripts/jquery-ui-custom.js" type="text/javascript" AllowMinScript="true"></script>
        <script src="~/scripts/ww.jquery.js" type="text/javascript" Resource="ww.jquery"></script>        
        <script src="booksadmin.js" type="text/javascript"></script>
    </Scripts>
</ww:ScriptContainer>

Script Placement

Scripts can be arranged in the page using the RenderMode property either on the control as a whole or on the individual script items. RenderMode allows placement at HeaderTop, Header, Script, Inline or Inherit locations which allows a lot of control over placement of scripts. Typically you'll use HeaderTop for core libraries like jQuery or prototype, Header for plug-ins and custom code. If you need one more level of control then inline can provide the additional layer of separation.

jQuery and ww.jQuery are special resources that default to HeaderTop and Header respectively, but these settings can be overridden.

Note that HeaderTop and Header rendering only works if the < head runat="server"> is used. If the head tag cannot be found as a server control scripts get embedded inline in the order de clared.

Minimized and Debug Scripts

No Intellisense and Warning Errors
You might wonder why we chose to use the < script> HTML control with custom attributes that cause HTML warnings. Due to limitations in how Visual Studio .NET recognizes scripts in pages to provide Intellisense, the only way to provide this control is by 'extending' the standard HTML < script> tag. The control treats these < script> tags as HTML Controls. The custom attributes (like Resource and AllowMinScript) also show up as warnings since they are not part of the HTML or control schema, however, they work just fine.

Unfortunately this is the only way we could get Intellisense support to work, since any custom namespace fails to provide Intellisense, so extension of the HTML < script> tag is the only way to provide Intellisense which is a key feature.

Recommended use of this control is to declare all scripts using ScriptContainer rather than in the page header. This allows to declare all scripts - regardless of whether they load from files or Web Resources in one place along with hints on where the scripts render. Using the control also allows code to interact with the scripts and avoid accidental duplication of scripts on the page.

Scripts can still load in the header, but they are consolidated here in one place including the ability to control the order of script loading.