JavaScript file resource management in "classic" ASP.NET (in my case, ASP 3.0 and .NET Framework 4.0) can be tricky. Ideally, JavaScript files are loaded only when needed and often must be loaded in a specific sequence to avoid null reference errors. Without careful management, JavaScript files can be loaded in the wrong sequence because the load order can be at the mercy of the .NET Framework.
Consider a scenario where there is a MasterPage with a ScriptManager, a Web Form with a Script tag and a ScriptManagerProxy, and finally a UserControl on that page with a ScriptManagerProxy. The concept is that the MasterPage ScriptManager loads JavaScript resources required by every page (e.g., jQuery), but the WebForm and UserControl load JavaScript resources only when needed. The concept has merit but in this case the design is flawed, because the .NET Framework loads the JavaScript resources in the wrong order – the JavaScript methods for the UserControl will run only if the load order is jQuery, Utilities, Root, WebPage, and CustomControl.
A good solution is to dynamically load all JavaScript resources from the MasterPage ScriptManager control. This provides fine-grained control over when and in what sequence the JS resources are loaded. The above scenario is refactored so that the MasterPage still has the ScriptManager and always loads the jQuery and Root JS resources, and the WebForm and UserControl load their JS resources in code instead of by using ScriptManagerProxy and/or Script tag controls.
Master Page design:
- <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="ScriptManagerDemo.Site1" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title></title>
- <asp:ContentPlaceHolder ID="head" runat="server">
- </asp:ContentPlaceHolder>
- </head>
- <body>
- <form id="form1" runat="server">
- <asp:ScriptManager ID="MasterPageScriptManager" runat="server">
- <Scripts>
- <asp:ScriptReference Path="~/Scripts/jquery-1.4.1.min.js" />
- <asp:ScriptReference Path="~/Scripts/Root.js" />
- </Scripts>
- </asp:ScriptManager>
- <div>
- <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
- </asp:ContentPlaceHolder>
- </div>
- </form>
- </body>
- </html>
Master Page code-behind:
- using System;
- using Utilities;
- namespace ScriptManagerDemo
- {
- public partial class Site1 : System.Web.UI.MasterPage
- {
- public ScriptReferenceCollectionAdapter ScriptReferences
- {
- get { return new ScriptReferenceCollectionAdapter(this.MasterPageScriptManager.Scripts); }
- }
- }
- }
Web Form design:
- <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Working.aspx.cs" Inherits="ScriptManagerDemo.Working" %>
- <%@ MasterType TypeName="ScriptManagerDemo.Site1" %>
- <%@ Register src="WebUserControlWorking.ascx" tagname="WebUserControlWorking" tagprefix="uc1" %>
- <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
- </asp:Content>
- <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
- <h1>This page is working</h1>
- <uc1:WebUserControlWorking ID="WebUserControlWorking1" runat="server" />
- </asp:Content>
Web Form code-behind:
- using System;
- namespace ScriptManagerDemo
- {
- public partial class Working : System.Web.UI.Page
- {
- protected void Page_Load(object sender, EventArgs e)
- {
- this.Master.ScriptReferences.AddScriptAssembly("Utilities", "Utilities.Utilities.js", "jquery-1.4.1.min.js");
- this.Master.ScriptReferences.AddScriptPath("~/Scripts/WebPage.js", "Root.js", true);
- this.Master.ScriptReferences.AddScriptPath("~/Scripts/CustomControl.js", "WebPage.js", true);
- }
- }
- }
ScriptReferenceCollectionAdapter class:
- using System;
- using System.Text;
- using System.Collections.ObjectModel;
- using System.Web.UI;
- using System.Reflection;
- namespace Utilities
- {
- public class ScriptReferenceCollectionAdapter
- {
- private Collection<ScriptReference> ScriptReferences { get; set; }
- private static readonly string _version = Assembly.GetExecutingAssembly().GetName().Version.ToString();
- public ScriptReferenceCollectionAdapter(Collection<ScriptReference> scriptReferences)
- {
- ScriptReferences = scriptReferences;
- }
- public void AddScriptPath(string path, string afterReferenceName = null, bool forceCacheRefresh = true)
- {
- AddScript(path, null, null, new string[] { afterReferenceName }, forceCacheRefresh);
- }
- public void AddScriptPath(string path, string[] afterReferenceNames = null, bool forceCacheRefresh = true)
- {
- AddScript(path, null, null, afterReferenceNames, forceCacheRefresh);
- }
- public void AddScriptAssembly(string assembly, string name, string afterReferenceName = null)
- {
- AddScript(null, assembly, name, new string[] { afterReferenceName });
- }
- public void AddScriptAssembly(string assembly, string name, string[] afterReferenceNames)
- {
- AddScript(null, assembly, name, afterReferenceNames);
- }
- private void AddScript(string path, string assembly, string name, string[] afterReferenceNames, bool forceCacheRefresh = false)
- {
- if (afterReferenceNames == null || afterReferenceNames.Length == 0)
- ScriptReferences.Add(CreateScriptReference(path, assembly, name, forceCacheRefresh));
- else
- {
- ScriptReference scriptRef;
- int si, ai = 0, idx = 0;
- string refName;
- do
- {
- refName = afterReferenceNames[ai];
- si = 0;
- while (si < ScriptReferences.Count && idx == 0)
- {
- scriptRef = ScriptReferences[si];
- if (scriptRef.Name.Contains(refName) || scriptRef.Path.Contains(refName))
- idx = ScriptReferences.IndexOf(scriptRef) + 1;
- si++;
- }
- ai++;
- } while (ai < afterReferenceNames.Length && idx == 0);
- idx = idx == 0 ? ScriptReferences.Count : idx;
- ScriptReferences.Insert(idx, CreateScriptReference(path, assembly, name, forceCacheRefresh));
- }
- }
- private static ScriptReference CreateScriptReference(string path, string assembly, string name, bool forceCacheRefresh)
- {
- if (string.IsNullOrEmpty(path))
- return new ScriptReference(name, assembly);
- else
- {
- if (forceCacheRefresh)
- {
- path = string.Format("{0}?ver={1}", path, _version);
- }
- return new ScriptReference(path);
- }
- }
- }
- }
Key Points:
- Expose an instance of the ScriptReferenceCollectionAdapter class as a public property of the MasterPage (Site1) class.
- Add a MasterType directive to the WebForm ASPX to gain access to the MasterPage's properties.
- Load the JavaScript resources in the proper order during the WebForm's Page_Load event.
- The ScriptReferenceCollectionAdapter provides the necessary methods and logic to load the JS resources in a specific sequence.
- These code samples can be refactored easily into the MVP design pattern.
A bonus feature to this approach is each JS resource can be loaded with a URL query string to prevent browser caching. In the code sample above, the query value is set to be the version of the loading assembly, which should change each time the application is deployed. I got the idea for how to prevent browser caching from this nice blog post Prevent Js and Css Browser Caching Issues with ASP.NET with additional information from this Stack Overflow forum.
Get a code sample of a Visual Studio 2010 .NET 4.0 web application containing all of the above code and additional resources.
No comments:
Post a Comment