Asp.Net之后台加载JS和CSS
在Asp.Net开发时,用到的JS库、通用的CSS等,在许多页面都会用到,而每次都需要手动引入,相当麻烦,而且有时一旦忘了引用,还得找半天才能找到问题。那有没有什么办法能够一劳永逸的呢?答案是有的。
我们知道Asp.Net是可以通过后台来渲染前端的,所以如果能够在渲染时将所要的js库和css等添入就可以了。而为了能够复用,所以需要进行类的继承。我们写一个Page的基类PageBase,代码如下。
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.UI;
- using System.Web.UI.HtmlControls;
- using System.Text;
- namespace AspNetLoadJsCss.Common
- {
- public class PageBase : System.Web.UI.Page
- {
- public static readonly string SCRIPT_INCLUDE_TEMPLATE = "<script src=\"{0}\" type=\"text/javascript\"></script>\r\n";
- public static readonly string STYLE_INCLUDE_TEMPLATE = "\r\n<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\"/>\r\n";
- public static readonly string SCRIPT_CONTENT_TEMPLATE = "<script type=\"text/javascript\">{0}</script>\r\n";
- protected void Page_InitComplete(object sender, EventArgs e)
- {
- LiteralControl viewportControl = new LiteralControl();
- viewportControl.ID = "viewport";
- viewportControl.Text = "\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />";
- this.Header.Controls.AddAt(GetNextControlIndex(this), viewportControl);
- LiteralControl jqueryCssControl = new LiteralControl();
- 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);
- LiteralControl myCssControl = new LiteralControl();
- myCssControl.ID = "/my.css";
- myCssControl.Text = String.Format(STYLE_INCLUDE_TEMPLATE, "/css/my.css");
- this.Header.Controls.AddAt(GetNextControlIndex(this),myCssControl);
- String jsPath = "/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>
- private static int GetNextControlIndex(Page page)
- {
- int index = 0;
- // 如果存在自定义(以CONTROL_ID_PREFIX开头)的控件,则返回最后一个自定义控件的下一个位置
- // 如果不存在自定义的控件,则返回<title>的下一个位置
- bool startControlBlock = false;
- int titleIndex = 0;
- String CONTROL_ID_PREFIX = "";
- foreach (Control c in page.Header.Controls)
- {
- if (c is HtmlTitle)
- {
- titleIndex = index;
- }
- if (c.ID != null && c.ID.StartsWith(CONTROL_ID_PREFIX))
- {
- startControlBlock = true;
- }
- else
- {
- if (startControlBlock)
- {
- break;
- }
- }
- index++;
- }
- int retIndex = startControlBlock ? index : titleIndex + 1;
- if (retIndex < 0)
- {
- retIndex = 0;
- }
- else if (retIndex >= page.Header.Controls.Count)
- {
- retIndex = page.Header.Controls.Count - 1;
- }
- return retIndex;
- }
- protected virtual void Page_Load(object sender, EventArgs e)
- {
- }
- }
- }
注:
1.在页面初始化完成的时候载入相应的JS和CSS文件,所以在Page_InitComplete中实现代码。
2.对于CSS文件需要添加到header中,所以使用Header来添加LiteralControl的CSS控件。
3.对于JS文件,使用注册的方式来载入。
4.如果需要载入一些通用的JS函数或者CDATA,也可以考虑这种方式。
有了PageBase页面之后,对于需要加载这些JS和CSS的页面,就可以直接继承于PageBase,然后重载Page_Load函数,其他的就是正常的写法了。比如
Test页面的后端代码
- public partial class Test: PageBase
- {
- protected override void Page_Load(object sender, EventArgs e)
- {
- }
- }
Test页页的前端代码
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="AspNetLoadJsCss.Test" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title></title>
- </head>
- <body>
- <form id="form1" runat="server">
- </form>
- </body>
- </html>
渲染后的HTML页面
可以看到CSS和JS都已经载入了。
Asp.Net之后台加载JS和CSS的更多相关文章
- 动态加载js和css
开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { v ...
- 动态加载js、css 代码
一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param ...
- 动态加载js和css的jquery plugin
一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include ...
- PHP:如果正确加载js、css、images等静态文件
日常中,我们想要把一些静态页面放在框架上或者是进行转移时,那么静态页面上的原url加载js.css.images都会失效,那么我们应该怎么进行修改捏? 现在仓鼠做个笔记哈 这里有几个注意项: 1.路径 ...
- js插件动态加载js、css解决方案
最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...
- 经验总结:按需加载JS和css
项目中做过这样的事情:所有页面都通过SSI指令 include这样一份public-js.shtml, 用来引入涉及到的js(包括公共的脚本 验证插件 自定义组件等),但是一些没有交互效果的页面根本不 ...
- Yii2 灵活加载js、css
Yii2.0对于CSS/js 管理,使用AssetBundle资源包类. 视图如何按需加载CSS/JS ? 资源包定义: backend/assets/AppAsset.PHP <?php na ...
- 移动端性能优化动态加载JS、CSS
JS CODE (function() { /** * update: * 1.0 */ var version = "insure 1.1.0"; var Zepto = Zep ...
- JavaScript(第二十二天)【动态加载js和css】
学习要点: 1.元素位置 2.动态脚本 3.动态样式 本章主要讲解上一章剩余的获取位置的DOM方法.动态加载脚本和样式. 一.元素位置 上一章已经通过几组属性可以获取元素所需的位置,那么这节课补充 ...
随机推荐
- 使用IDEA进行代码托管
在idea菜单栏的file中打开settings/搜索git,配置path to Git executable:C:\Program Files\Git\bin\git.exe(git bash的安装 ...
- 20145222黄亚奇《Java程序设计》第8周学习总结
教材学习内容总结 第15章 通用API 1 日志 1 日志API简介 java.util.loggging包提供了日志功能相关类与接口. 使用日志的起点是Logger类,Logger类的构造函数表示为 ...
- 学习笔记——Maven实战(五)自动化Web应用集成测试
自动化集成测试的角色 本专栏的上一篇文章讲述了Maven与持续集成的一些关系及具体实践,我们都知道,自动化测试是持续集成必不可少的一部分,基本上,没有自动化测试的持续集成,都很难称之为真正的持续集成. ...
- node 学习笔记 - fs 文件操作
本文同步自我的个人博客:http://www.52cik.com/2015/12/03/learn-node-fs.html 最近看到群里不少大神都开始玩 node 了,我感觉跟他们步伐越来越大了, ...
- Hadoop的Server及其线程模型分析
早期的一篇文章,针对Hadoop 2.6.0. 一.Listener Listener线程,当Server处于运行状态时,其负责监听来自客户端的连接,并使用Select模式处理Accept事件. 同时 ...
- 编写高质量代码改善C#程序的157个建议[C#闭包的陷阱、委托、事件、事件模型]
前言 本文已更新至http://www.cnblogs.com/aehyok/p/3624579.html .本文主要学习记录以下内容: 建议38.小心闭包中的陷阱 建议39.了解委托的实质 建议40 ...
- 第二课:判断js变量的类型以及domReady的原理
1.类型的判断: js五种简单数据类型有:null,undefined,boolean,number,string. 还有复杂的数据类型:Object,Function,RegExp,Date,自定义 ...
- Bata版本冲刺计划及安排
下一阶段需要改进完善的功能 UI: 1. 界面不够精细,布局不够美观并且尚有BUG没有解决,图形.色彩间不够协调. 2. 理清界面间的跳转逻辑. 搜索: 搜索成功并定位后,不会影响地理标签的显示. 定 ...
- 转-JS中document对象详解
对象属性 document.title //设置文档标题等价于HTML的<title>标签 document.bgColor //设置页面背景色 document.fgColor //设置 ...
- zoj3882 博弈
我理解错题目意思,稀里糊涂A了.其实就是先手必胜. #include<stdio.h> int main() { int n; while(scanf("%d",&am ...