Asp.Net之后台加载JS和CSS

2019-11-17 02:08:16

字体：大中小

来源：转载

供稿：网友

asp.net之后台加载JS和CSS

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

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

[html]view plaincopy

usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web;usingSystem.Web.UI;usingSystem.Web.UI.HtmlControls;usingSystem.Text;namespaceAspNetLoadJsCss.Common{publicclassPageBase:System.Web.UI.Page{publicstaticreadonlystringSCRipT_INCLUDE_TEMPLATE="<scriptsrc=/"{0}/"type=/"text/javascript/"></script>/r/n";publicstaticreadonlystringSTYLE_INCLUDE_TEMPLATE="/r/n<linkhref=/"{0}/"rel=/"stylesheet/"type=/"text/css/"/>/r/n";publicstaticreadonlystringSCRIPT_CONTENT_TEMPLATE="<scripttype=/"text/Javascript/">{0}</script>/r/n";PRotectedvoidPage_InitComplete(objectsender,EventArgse){LiteralControlviewportControl=newLiteralControl();viewportControl.ID="viewport";viewportControl.Text="/r/n<metaname=/"viewport/"content=/"width=device-width,initial-scale=1/"/>";this.Header.Controls.AddAt(GetNextControlIndex(this),viewportControl);LiteralControljqueryCssControl=newLiteralControl();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);LiteralControlmyCssControl=newLiteralControl();myCssControl.ID="/my.css";myCssControl.Text=String.Format(STYLE_INCLUDE_TEMPLATE,"/css/my.css");this.Header.Controls.AddAt(GetNextControlIndex(this),myCssControl);Stringjspath="/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>privatestaticintGetNextControlIndex(Pagepage){intindex=0;//如果存在自定义（以CONTROL_ID_PREFIX开头）的控件，则返回最后一个自定义控件的下一个位置//如果不存在自定义的控件，则返回<title>的下一个位置boolstartControlBlock=false;inttitleIndex=0;StringCONTROL_ID_PREFIX="";foreach(Controlcinpage.Header.Controls){if(cisHtmlTitle){titleIndex=index;}if(c.ID!=null&&c.ID.StartsWith(CONTROL_ID_PREFIX)){startControlBlock=true;}else{if(startControlBlock){break;}}index++;}intretIndex=startControlBlock?index:titleIndex+1;if(retIndex<0){retIndex=0;}elseif(retIndex>=page.Header.Controls.Count){retIndex=page.Header.Controls.Count-1;}returnretIndex;}protectedvirtualvoidPage_Load(objectsender,EventArgse){}}}

注：

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%20plaincopy

publicpartialclassTest:PageBase{protectedoverridevoidPage_Load(objectsender,EventArgse){}}

Test页页的前端代码

[html]view%20plaincopy

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Test.aspx.cs"Inherits="AspNetLoadJsCss.Test"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
</head>
<body>
<formid="form1"runat="server">
</form>
</body>
</html>

渲染后的HTML页面

上一篇：asp.net 未能写入输出文件--“拒绝访问”的解决办法

下一篇：文件无刷新上传并获取保存到服务器端的路径(swfUpload与uploadify)