·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> Asp.Net之后台加载JS和CSS

【如有意向点此提交需求】关于我们

Asp.Net之后台加载JS和CSS

作者：佚名      ASP.NET网站开发编辑：admin      更新时间：2022-07-23

asp.net之后台加载JS和CSS

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

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

[html]view plaincopy在CODE上查看代码片派生到我的代码片
  1. usingSystem;
  2. usingSystem.Collections.Generic;
  3. usingSystem.Linq;
  4. usingSystem.Web;
  5. usingSystem.Web.UI;
  6. usingSystem.Web.UI.HtmlControls;
  7. usingSystem.Text;
  9. namespaceAspNetLoadJsCss.Common
  10. {
  11. publicclassPageBase:System.Web.UI.Page
  12. {
  13. publicstaticreadonlystringSCRipT_INCLUDE_TEMPLATE="<scriptsrc=\"{0}\"type=\"text/javascript\"></script>\r\n";
  14. publicstaticreadonlystringSTYLE_INCLUDE_TEMPLATE="\r\n<linkhref=\"{0}\"rel=\"stylesheet\"type=\"text/css\"/>\r\n";
  15. publicstaticreadonlystringSCRIPT_CONTENT_TEMPLATE="<scripttype=\"text/Javascript\">{0}</script>\r\n";
  17. PRotectedvoidPage_InitComplete(objectsender,EventArgse)
  18. {
  19. LiteralControlviewportControl=newLiteralControl();
  20. viewportControl.ID="viewport";
  21. viewportControl.Text="\r\n<metaname=\"viewport\"content=\"width=device-width,initial-scale=1\"/>";
  22. this.Header.Controls.AddAt(GetNextControlIndex(this),viewportControl);
  24. LiteralControljqueryCssControl=newLiteralControl();
  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);
  29. LiteralControlmyCssControl=newLiteralControl();
  30. myCssControl.ID="/my.css";
  31. myCssControl.Text=String.Format(STYLE_INCLUDE_TEMPLATE,"/css/my.css");
  32. this.Header.Controls.AddAt(GetNextControlIndex(this),myCssControl);
  35. Stringjspath="/js/jquery.js";
  36. this.ClientScript.RegisterStartupScript(this.GetType(),
  37. "jquery",
  38. String.Format(SCRIPT_INCLUDE_TEMPLATE,jsPath),
  39. false);
  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);
  47. jsPath="/js/default.js";
  48. this.ClientScript.RegisterStartupScript(this.GetType(),
  49. "default",
  50. String.Format(SCRIPT_INCLUDE_TEMPLATE,jsPath),
  51. false);
  52. }
  54. ///<summary>
  55. ///取得下一个控件的位置
  56. ///</summary>
  57. ///<returns></returns>
  58. privatestaticintGetNextControlIndex(Pagepage)
  59. {
  60. intindex=0;
  62. //如果存在自定义（以CONTROL_ID_PREFIX开头）的控件，则返回最后一个自定义控件的下一个位置
  63. //如果不存在自定义的控件，则返回<title>的下一个位置
  64. boolstartControlBlock=false;
  65. inttitleIndex=0;
  66. StringCONTROL_ID_PREFIX="";
  67. foreach(Controlcinpage.Header.Controls)
  68. {
  69. if(cisHtmlTitle)
  70. {
  71. titleIndex=index;
  72. }
  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. }
  86. index++;
  87. }
  89. intretIndex=startControlBlock?index:titleIndex+1;
  90. if(retIndex<0)
  91. {
  92. retIndex=0;
  93. }
  94. elseif(retIndex>=page.Header.Controls.Count)
  95. {
  96. retIndex=page.Header.Controls.Count-1;
  97. }
  99. returnretIndex;
  100. }
  102. protectedvirtualvoidPage_Load(objectsender,EventArgse)
  103. {
  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. publicpartialclassTest:PageBase
  2. {
  3. protectedoverridevoidPage_Load(objectsender,EventArgse)
  4. {
  6. }
  7. }

Test页页的前端代码

[html]view plaincopy在CODE上查看代码片派生到我的代码片
  1. <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Test.aspx.cs"Inherits="AspNetLoadJsCss.Test"%>
  3. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <htmlxmlns="http://www.w3.org/1999/xhtml">
  5. <headrunat="server">
  6. <title></title>
  7. </head>
  8. <body>
  9. <formid="form1"runat="server">
  10. </form>
  11. </body>
  12. </html>

渲染后的HTML页面