一个ASP.NET的JS管理方案

凌彦慧 · 2025-5-29 20:37:12

场景：在自定义控件、用户控件、页面、后台代码都会有引用JS的可能，这就会出现混乱或者重复引用的可能。
一个自定义控件，用于在ASPX页面中注册JS：

public class Script : Control
{
#region 属性
private string m_Src;
/// <summary>
/// 脚本文件路径
/// </summary>
public string Src
{
get { return m_Src; }
set { m_Src = value; }
}
#endregion
/// <summary>
/// 在控件Init的时候将JS路径添加到HttpContext.Current.Items["IncludedJavaScript"]中。
/// </summary>
/// <param name="e"></param>
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
if (!string.IsNullOrEmpty(Src))
{
string src = ResolveUrl(Src);
List<string> includedJs = HttpContext.Current.Items["IncludedJavaScript"] as List<string>;
if (null == includedJs)
{
includedJs = new List<string>();
HttpContext.Current.Items["IncludedJavaScript"] = includedJs;
}
if (!includedJs.Contains(src))
{
includedJs.Add(src);
}
}
}
}

复制代码

一个静态类，用于管理JS和在后台代码(cs文件)中注册JS：

/// <summary>
/// Javascript管理器
/// </summary>
public static class JavaScriptManager
{
/// <summary>
/// 包含JS引用。
/// </summary>
/// <param name="filePaths"></param>
public static void Include(params string[] filePaths)
{
HttpContext context = HttpContext.Current;
if (null == context)
{
throw new Exception("HttpContext为空。");
}
System.Web.UI.Page p = context.CurrentHandler as System.Web.UI.Page;
if (null == p)
{
throw new Exception("HttpContext.CurrentHandler不是Page。");
}
IList<string> jss = GetIncludedJavaScript();
string resolveUrl;
foreach (string filePath in filePaths)
{
resolveUrl=p.ResolveUrl(filePath);
if (!jss.Contains(resolveUrl))
{
jss.Add(p.ResolveUrl(resolveUrl));
}
}
}
/// <summary>
/// 获取已经包含的JS列表
/// </summary>
/// <returns></returns>
public static IList<string> GetIncludedJavaScript()
{
HttpContext context = HttpContext.Current;
if (null == context)
{
throw new Exception("HttpContext为空。");
}
IList<string> jss = HttpContext.Current.Items["IncludedJavaScript"] as IList<string>;
if (null == jss)
{
jss = new List<string>();
HttpContext.Current.Items["IncludedJavaScript"] = jss;
}
return jss;
}
}

复制代码

然后写一个基类页面，所有的页面都要继承自这个基类页：

public class BasePage : System.Web.UI.Page
{
public BasePage() { }
#region 注册/管理JS引用
/// <summary>
/// 将引用的JS添加到Page.Head中。
/// </summary>
private void InitJS()
{
IList<string> includedJs = JavaScriptManager.JavaScriptManager.GetIncludedJavaScript();
foreach (string jsFilePath in includedJs)
{
var script = new HtmlGenericControl("script");
script.Attributes["type"] = "text/javascript";
script.Attributes["src"] = jsFilePath;
Page.Header.Controls.Add(script);
}
}
/// <summary>
/// 在呈现之前注册JS
/// </summary>
/// <param name="e"></param>
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
InitJS();
}
#endregion
}

复制代码

上面是在OnPreRender中将JS注册到Page.Head中的，所以如果在自定义控件中注册JS引用，请在OnPreRender之前引用。
在ASPX页面中注册JS：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<lulu:Script runat="server" ID="Script1" Src="~/Test/aspx.js"></lulu:Script>
</head>
<body>
<form id="form1" runat="server">
<lulu:Script runat="server" ID="Script5" Src="~/Test/aspx.js"></lulu:Script>
<lulu:Script runat="server" ID="Script6" Src="~/Test/aspx2.js"></lulu:Script>
<lulu:Script runat="server" ID="Script7" Src="~/Test/aspx.js"></lulu:Script>
</form>
</body>
</html>

复制代码

在CS页面中注册JS：

public partial class _Default : BasePage
{
protected void Page_Load(object sender, EventArgs e)
{
JavaScriptManager.JavaScriptManager.Include("~/JS/cs.js",
"~/JS/cs.js",
"~/JS/cs.js2",
"~/JS/cs.js");
}
}

复制代码

最终生成的页面：

在这里是使用HttpContext.Current.Items来保存包含的JS列表。欢迎讨论、改进。
测试代码：JsManager.rar
作者：QLeelulu

出处：http://QLeelulu.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册

一个ASP.NET的JS管理方案

相关帖子

浏览过的版块

签约作者

一个ASP.NET的JS管理方案

相关帖子

相关推荐

浏览过的版块

签约作者