Asp.Net之后台加载JS和CSS

原创 2014年11月18日 11:19:27

在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


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xxdddail/article/details/41243809

解决 ASP.NET 中执行js代码后页面布局变不正常的方法

Page.ClientScript.RegisterStartupScript(this.GetType(), "", "alert(没有权限!); ",true );
  • qiume
  • qiume
  • 2009-12-12 10:47:00
  • 466

asp.net 在后台给页面动态添加Css样式

在后台给页面添加Css样式        protected void Page_Load(object sender, EventArgs e)        {            if (!P...
  • Feiin
  • Feiin
  • 2008-08-08 17:20:00
  • 4799

asp.net后台代码动态引用添加JS和css文件

  • 2013年01月18日 16:34
  • 844B
  • 下载

【web开发 异步加载js】根据需求动态加载js脚本

在实际开发中,为了实现某种效果或者提升用户体验,往往需要控制何时加载js。本文总结了三个场景的js加载需求:在页面加载完成之后加载js,不同条件下动态加载不同的js,项目打包时的异步加载js模块。 一...
  • dengpeng0419
  • dengpeng0419
  • 2016-12-15 21:21:17
  • 2612

后台调用前台JS&前台JS调用后台

在实际的Web开发中,我们可能会常常遇到后台调用前台JS代码或者前台JS调用后台代码的情况。今天就把比较实用的前后台相互调用的方法总结出来和大家分享。...
  • Illusion_1202
  • Illusion_1202
  • 2016-07-14 16:01:39
  • 3152

C#后台添加js脚本

一、使用Response.Write Response.Write("alert('成功改动');"); 二、使用RegisterClientScriptBlock ClientScript.Regi...
  • u010678947
  • u010678947
  • 2015-05-21 13:15:18
  • 1858

vs2017用F5调试时js,css文件不能加载导致的问题解决

在用vs进行.net开发时,我是很少用F5进行调试的,通常都是直接配置IIS,然后在IIS中配置好站点数据。站点编译后,直接刷新再浏览器中调试。原因很简单,在vs中用F5调试走的是IIS expres...
  • sxf359
  • sxf359
  • 2017-05-26 15:42:10
  • 1955

asp.net后台调用前端js

[html] view plain copy print? 为什么在项目后台要使用C#调用前台的Javascript代码呢?因为我们在项目开发的过程中,根据项目的需要,我们需要用到其他项目组...
  • Vezn_King
  • Vezn_King
  • 2016-05-05 13:43:52
  • 2360

Asp.net 后台调用js方法

1. 用Response.Write方法  代码如下: Response.Write("alert("XXX");");  此方只能调用内部函数,具体调用自定义的函数只能在Response.Write...
  • GrandShaw
  • GrandShaw
  • 2016-11-21 13:49:38
  • 4819

.NET后台写JS代码

public class Jscript     {         ///         /// 弹出JavaScript小窗口         ///         /// 窗口...
  • zhenyuanjie
  • zhenyuanjie
  • 2012-04-01 14:49:54
  • 1153
收藏助手
不良信息举报
您举报文章:Asp.Net之后台加载JS和CSS
举报原因:
原因补充:

(最多只允许输入30个字)