Asp.Net之后台加载JS和CSS

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

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

 

[html]  view plain copy

 

1. using System;  
2. using System.Collections.Generic;  
3. using System.Linq;  
4. using System.Web;  
5. using System.Web.UI;  
6. using System.Web.UI.HtmlControls;  
7. using System.Text;  
8.   
9. namespace AspNetLoadJsCss.Common  
10. {  
11.     public class PageBase : System.Web.UI.Page  
12.     {         
13.         public static readonly string SCRIPT_INCLUDE_TEMPLATE = "<script src=\"{0}\" type=\"text/javascript\"></script>\r\n";  
14.         public static readonly string STYLE_INCLUDE_TEMPLATE = "\r\n<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\"/>\r\n";  
15.         public static readonly string SCRIPT_CONTENT_TEMPLATE = "<script type=\"text/javascript\">{0}</script>\r\n";  
16.   
17.         protected void Page_InitComplete(object sender, EventArgs e)  
18.         {            
19.             LiteralControl viewportControl = new LiteralControl();  
20.             viewportControl.ID = "viewport";  
21.             viewportControl.Text = "\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />";  
22.             this.Header.Controls.AddAt(GetNextControlIndex(this), viewportControl);  
23.   
24.             LiteralControl jqueryCssControl = new LiteralControl();  
25.             jqueryCssControl.ID = "/jquery.mobile-1.4.4.min.css";  
26.             jqueryCssControl.Text = String.Format(STYLE_INCLUDE_TEMPLATE, "/css/themes/default/jquery.mobile-1.4.4.min.css");  
27.             this.Header.Controls.AddAt(GetNextControlIndex(this), jqueryCssControl);  
28.   
29.             LiteralControl myCssControl = new LiteralControl();  
30.             myCssControl.ID = "/my.css";  
31.             myCssControl.Text = String.Format(STYLE_INCLUDE_TEMPLATE, "/css/my.css");  
32.             this.Header.Controls.AddAt(GetNextControlIndex(this),myCssControl);  
33.   
34.   
35.             String jsPath = "/js/jquery.js";  
36.             this.ClientScript.RegisterStartupScript(this.GetType(),  
37.                 "jquery",  
38.                 String.Format(SCRIPT_INCLUDE_TEMPLATE, jsPath),  
39.                 false);  
40.   
41.             jsPath = "/js/jquery.mobile-1.4.4.min.js";  
42.             this.ClientScript.RegisterStartupScript(this.GetType(),  
43.                 "jquery.mobile",  
44.                 String.Format(SCRIPT_INCLUDE_TEMPLATE, jsPath),  
45.                 false);  
46.   
47.             jsPath = "/js/default.js";  
48.             this.ClientScript.RegisterStartupScript(this.GetType(),  
49.                "default",  
50.                String.Format(SCRIPT_INCLUDE_TEMPLATE, jsPath),  
51.                false);             
52.         }  
53.   
54.         /// <summary>  
55.         /// 取得下一个控件的位置  
56.         /// </summary>  
57.         /// <returns></returns>  
58.         private static int GetNextControlIndex(Page page)  
59.         {  
60.             int index = 0;  
61.   
62.             // 如果存在自定义（以CONTROL_ID_PREFIX开头）的控件，则返回最后一个自定义控件的下一个位置  
63.             // 如果不存在自定义的控件，则返回<title>的下一个位置  
64.             bool startControlBlock = false;  
65.             int titleIndex = 0;  
66.             String CONTROL_ID_PREFIX = "";  
67.             foreach (Control c in page.Header.Controls)  
68.             {  
69.                 if (c is HtmlTitle)  
70.                 {  
71.                     titleIndex = index;  
72.                 }  
73.   
74.                 if (c.ID != null && c.ID.StartsWith(CONTROL_ID_PREFIX))  
75.                 {  
76.                     startControlBlock = true;  
77.                 }  
78.                 else  
79.                 {  
80.                     if (startControlBlock)  
81.                     {  
82.                         break;  
83.                     }  
84.                 }  
85.   
86.                 index++;  
87.             }  
88.   
89.             int retIndex = startControlBlock ? index : titleIndex + 1;  
90.             if (retIndex < 0)  
91.             {  
92.                 retIndex = 0;  
93.             }  
94.             else if (retIndex >= page.Header.Controls.Count)  
95.             {  
96.                 retIndex = page.Header.Controls.Count - 1;  
97.             }  
98.   
99.             return retIndex;  
100.         }  
101.   
102.         protected virtual void Page_Load(object sender, EventArgs e)  
103.         {  
104.   
105.         }  
106.     }  
107. }  

注：

 

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

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

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

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

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

Test页面的后端代码

 

[html]  view plain copy

 

1. public partial class Test: PageBase  
2.     {  
3.         protected override void Page_Load(object sender, EventArgs e)  
4.         {  
5.   
6.         }  
7.     }  

Test页页的前端代码

 

 

[html]  view plain copy

 

1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="AspNetLoadJsCss.Test" %>  
2.   
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
4. <html xmlns="http://www.w3.org/1999/xhtml">  
5. <head runat="server">  
6.     <title></title>  
7. </head>  
8. <body>  
9.     <form id="form1" runat="server">  
10.     </form>  
11. </body>  
12. </html>  

渲染后的HTML页面

 

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