Asp.Net之后台加载JS和CSS
来源:互联网 发布:软件(嵌入式)怎么样 编辑:程序博客网 时间:2024/06/15 07:36
在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
0 0
- Asp.Net之后台加载JS和CSS
- ASp.net动态加载js和css文件
- ASP.NET使用后台动态加载js和css文件
- 在后台代码中加载CSS和JS
- Asp.Net头部动态加载css和js文件的方法
- asp.net后台向前台注册js函数和数组
- ASP.net动态加载JS代码与CSS文件
- ASP.NET基础之后台添加table行和列[原]
- ASP.NET MVC - BundleConfig.cs(打包压缩js和css )
- 如何在asp.net页面使用css和js
- 如何在asp.net页面使用css和js
- asp.net 服务器控件LinkButton等在后台代码中设置js事件或添加css样式
- asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度
- asp.net打包多CSS或JS文件以加快页面加载速度
- 加快页面加载速度的解决方案-asp.net使用httphandler打包多CSS或JS文件
- asp.net 在后台给页面动态添加Css样式
- ASP.NET动态加载CSS文件
- ASP.NET动态加载CSS文件
- VS2013常用快捷键
- android短信拦截的实现代码
- Implement strStr()
- Boost.Asio c++ 网络编程翻译(26)
- buffer cache的优化指标
- Asp.Net之后台加载JS和CSS
- web 开发笔记“列表样式”
- abc
- 研究了一下collectionView ,总结一下,防止忘记
- UIBezierPath学习
- 集算器协助MongoDB计算之数位比较
- KVO初体验
- MVC和Web API 过滤器Filter
- 自己写Repeater/GridView分页