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

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

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

注：

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

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

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

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

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

Test页面的后端代码

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

Test页页的前端代码

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

渲染后的HTML页面

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

Asp.Net之后台加载JS和CSS的更多相关文章

  1. 动态加载js和css

    开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { v ...

  2. 动态加载js、css 代码

    一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param ...

  3. 动态加载js和css的jquery plugin

    一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include ...

  4. PHP：如果正确加载js、css、images等静态文件

    日常中,我们想要把一些静态页面放在框架上或者是进行转移时,那么静态页面上的原url加载js.css.images都会失效,那么我们应该怎么进行修改捏? 现在仓鼠做个笔记哈 这里有几个注意项: 1.路径 ...

  5. js插件动态加载js、css解决方案

    最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...

  6. 经验总结：按需加载JS和css

    项目中做过这样的事情:所有页面都通过SSI指令 include这样一份public-js.shtml, 用来引入涉及到的js(包括公共的脚本 验证插件 自定义组件等),但是一些没有交互效果的页面根本不 ...

  7. Yii2 灵活加载js、css

    Yii2.0对于CSS/js 管理,使用AssetBundle资源包类. 视图如何按需加载CSS/JS ? 资源包定义: backend/assets/AppAsset.PHP <?php na ...

  8. 移动端性能优化动态加载JS、CSS

    JS CODE (function() { /** * update: * 1.0 */ var version = "insure 1.1.0"; var Zepto = Zep ...

  9. JavaScript(第二十二天)【动态加载js和css】

    学习要点: 1.元素位置 2.动态脚本 3.动态样式 本章主要讲解上一章剩余的获取位置的DOM方法.动态加载脚本和样式.   一．元素位置 上一章已经通过几组属性可以获取元素所需的位置,那么这节课补充 ...

随机推荐

  1. IT男的”幸福”生活"续5

    各位哥们姐妹们,好,嗯,好.很多回复还是提到[IT男的”幸福”生活"]是小说来着剧情不真实,我还是免为其难的说一下吧.是真的回忆录,具体的事情都有.人也是真实的.在这里还是谢谢,这几天一直关 ...

  2. 第四章 Js的面向对象的初窥视(天生的哈希表)

    对象就有键值对 var speaker = { text: "Hello World", say: function(){ console.log("Hello Worl ...

  3. mysql基础 事务的认识和使用

    事务(Transaction)是访问并可能更新数据库中各种数据项的一个程序执行单元(unit).事务是恢复和并发控制的基本单位. 在关系数据库中,一个事务可以是一条SQL语句,一组SQL语句或整个程序 ...

  4. json和cookie兼容以前的

    'json': function(data) { try { if (typeof data === "string") { if (typeof JSON != 'undefin ...

  5. [bzoj 2005][NOI 2010]能量采集（容斥原理+递推）

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2005 分析:首先易得ans=∑gcd(x,y)*2+1 然后我就布吉岛了…… 上网搜了下题解, ...

  6. [USACO 1.5.4]checker（水题重做——位运算（lowbit的应用））

    描述 检查一个如下的6 x 6的跳棋棋盘,有六个棋子被放置在棋盘上,使得每行.每列有且只有一个,每条对角线(包括两条主对角线的所有平行线)上至多有一个棋子. 0 1 2 3 4 5 6 ------- ...

  7. EntityFramework_MVC4中EF5 新手入门教程之七 ---7.通过 Entity Framework 处理并发

    在以前的两个教程你对关联数据进行了操作.本教程展示如何处理并发性.您将创建工作与各Department实体的 web 页和页,编辑和删除Department实体将处理并发错误.下面的插图显示索引和删除 ...

  8. “耐撕”团队 2016.04.05 站立会议

    1. 时间: 20:10--20:25  共计15分钟. 2. 成员: Z 郑蕊 * 组长 (博客:http://www.cnblogs.com/zhengrui0452/), P 濮成林(博客:ht ...

  9. 使用GIT来管理代码的心得

    使用GIT来管理代码,第一步当然就是下载一个GIT客户端(不知道是不是这么叫,但是觉得和客户端的功能差不多).电脑的操作系统是windows7的,所以下的是对应的GIT. 就是这玩意,安装的时候不停的 ...

  10. Learn sed using these command on Linux（流线式编辑器——sed）

    是对文件中的每一行进行处理,不会对源文件进行修改 sed --version sed '11d' sed_file sed -n '/[Bb]erry/p' sed_file (由于设置了n,所以只打 ...