你的位置:首页 > ASP.net教程

[ASP.net教程]Asp.Net之后台加载JS和CSS


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

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

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片 


  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 plaincopy在CODE上查看代码片派生到我的代码片 


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

Test页页的前端代码

 

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片 


  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 ="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都已经载入了。