您的位置：首页 > 编程语言 > ASP

Asp.Net之后台加载JS和CSS

2014-11-18 11:19 169 查看

在Asp.Net开发时，用到的JS库、通用的CSS等，在许多页面都会用到，而每次都需要手动引入，相当麻烦，而且有时一旦忘了引用，还得找半天才能找到问题。那有没有什么办法能够一劳永逸的呢？答案是有的。

我们知道Asp.Net是可以通过后台来渲染前端的，所以如果能够在渲染时将所要的js库和css等添入就可以了。而为了能够复用，所以需要进行类的继承。我们写一个Page的基类PageBase，代码如下。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Text;

namespace AspNetLoadJsCss.Common
{
public class PageBase : System.Web.UI.Page
{
public static readonly string SCRIPT_INCLUDE_TEMPLATE = "<script src=\"{0}\" type=\"text/javascript\"></script>\r\n";
public static readonly string STYLE_INCLUDE_TEMPLATE = "\r\n<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\"/>\r\n";
public static readonly string SCRIPT_CONTENT_TEMPLATE = "<script type=\"text/javascript\">{0}</script>\r\n";

protected void Page_InitComplete(object sender, EventArgs e)
{
LiteralControl viewportControl = new LiteralControl();
viewportControl.ID = "viewport";
viewportControl.Text = "\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />";
this.Header.Controls.AddAt(GetNextControlIndex(this), viewportControl);

LiteralControl jqueryCssControl = new LiteralControl();
jqueryCssControl.ID = "/jquery.mobile-1.4.4.min.css";
jqueryCssControl.Text = String.Format(STYLE_INCLUDE_TEMPLATE, "/css/themes/default/jquery.mobile-1.4.4.min.css");
this.Header.Controls.AddAt(GetNextControlIndex(this), jqueryCssControl);

LiteralControl myCssControl = new LiteralControl();
myCssControl.ID = "/my.css";
myCssControl.Text = String.Format(STYLE_INCLUDE_TEMPLATE, "/css/my.css");
this.Header.Controls.AddAt(GetNextControlIndex(this),myCssControl);

String jsPath = "/js/jquery.js";
this.ClientScript.RegisterStartupScript(this.GetType(),
"jquery",
String.Format(SCRIPT_INCLUDE_TEMPLATE, jsPath),
false);

jsPath = "/js/jquery.mobile-1.4.4.min.js";
this.ClientScript.RegisterStartupScript(this.GetType(),
"jquery.mobile",
String.Format(SCRIPT_INCLUDE_TEMPLATE, jsPath),
false);

jsPath = "/js/default.js";
this.ClientScript.RegisterStartupScript(this.GetType(),
"default",
String.Format(SCRIPT_INCLUDE_TEMPLATE, jsPath),
false);
}

/// <summary>
/// 取得下一个控件的位置
/// </summary>
/// <returns></returns>
private static int GetNextControlIndex(Page page)
{
int index = 0;

// 如果存在自定义（以CONTROL_ID_PREFIX开头）的控件，则返回最后一个自定义控件的下一个位置
// 如果不存在自定义的控件，则返回<title>的下一个位置
bool startControlBlock = false;
int titleIndex = 0;
String CONTROL_ID_PREFIX = "";
foreach (Control c in page.Header.Controls)
{
if (c is HtmlTitle)
{
titleIndex = index;
}

if (c.ID != null && c.ID.StartsWith(CONTROL_ID_PREFIX))
{
startControlBlock = true;
}
else
{
if (startControlBlock)
{
break;
}
}

index++;
}

int retIndex = startControlBlock ? index : titleIndex + 1;
if (retIndex < 0)
{
retIndex = 0;
}
else if (retIndex >= page.Header.Controls.Count)
{
retIndex = page.Header.Controls.Count - 1;
}

return retIndex;
}

protected virtual void Page_Load(object sender, EventArgs e)
{

}
}
}

注：

1.在页面初始化完成的时候载入相应的JS和CSS文件，所以在Page_InitComplete中实现代码。

2.对于CSS文件需要添加到header中，所以使用Header来添加LiteralControl的CSS控件。

3.对于JS文件，使用注册的方式来载入。

4.如果需要载入一些通用的JS函数或者CDATA，也可以考虑这种方式。

有了PageBase页面之后，对于需要加载这些JS和CSS的页面，就可以直接继承于PageBase，然后重载Page_Load函数，其他的就是正常的写法了。比如

Test页面的后端代码

public partial class Test: PageBase
{
protected override void Page_Load(object sender, EventArgs e)
{

}
}

Test页页的前端代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="AspNetLoadJsCss.Test" %>

<!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>
</head>
<body>
<form id="form1" runat="server">
</form>
</body>
</html>

渲染后的HTML页面

可以看到CSS和JS都已经载入了。

转载请注明出处：

Asp.Net之后台加载JS和CSS

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航