net后台代码动态添加JS文件和css文件的引用,动态加载css与js总结
分类:web前端

System.Web.UI.HtmlControls.HtmlGenericControl scriptControl = new System.Web.UI.HtmlControls.HtmlGenericControl("script");
scriptControl.Attributes.Add("type", "text/javascript");
scriptControl.Attributes.Add("language", "JavaScript");
scriptControl.Attributes.Add("src", "js/common.js");
Page.Header.Controls.Add(scriptControl);

我在项目的根目下建了一个名为和JScript.js和StyleSheet.css文件。前端页面放了一个Div和input。div用于使用样式,input用于测试js.

下面是框架页:

首先添加命名空间using System.Web.UI.HtmlControls;

实际,ASP.NET 是很灵活的,实现上述功能的方法很多,上面并不是最好的。

JScript.js的内容为:

图片 1图片 2<%图片 3@ Page CodeBehind="Frameset.aspx.cs" Language="c#" AutoEventWireup="false" Inherits="IbatisTest.Web.Frameset" %>
图片 4<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
图片 5<HTML>
图片 6    <HEAD>
图片 7        <TITLE>内容框架集</TITLE>
图片 8        <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
图片 9        <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
图片 10        <meta content="" name="vs_targetSchema">
图片 11    </HEAD>
图片 12    <frameset cols="150,*" id="detail" runat="server">
图片 13        <frame name="contents" id="contents" runat=server src=""></frame>
图片 14        <frame name="main" id="main" src="" runat="server"></frame>
图片 15        <noframes>
图片 16            <p id="p1">
图片 17                此 HTML 框架集显示多个 Web 页。若要查看此框架集,请使用支持 HTML 4.0 及更高版本的 Web 浏览器。
图片 18            </p>
图片 19        </noframes>
图片 20    </frameset>
图片 21</HTML>

代码动态添加css文件的引用

相关阅读

function funMessageShow() {
    alert("测试加载Js");
}

此 HTML 框架集显示多个 Web 页。若要查看此框架集,请使用支持 HTML 4.0 及更高版本的 Web 浏览器。

HtmlGenericControl myCss = new HtmlGenericControl();

  • RegisterClientScriptInclude 与 RegisterClientScriptResource 的区别

StyleSheet.css的内容为:

此 HTML 框架集显示多个 Web 页。若要查看此框架集,请使用支持 HTML 4.0 及更高版本的 Web 浏览器。

myCss.TagName = "link";

.testCss
{
    background-color:Gray;
}

此 HTML 框架集显示多个 Web 页。若要查看此框架集,请使用支持 HTML 4.0 及更高版本的 Web 浏览器。

myCss.Attributes.Add("type", "text/css");

前端页面的html源码为:

后置代码如下:

myCss.Attributes.Add("rel", "stylesheet");

    <form id="form1" runat="server">
    <div class="testCss">
        测试加载Css
    </div>
    <input id="btnShow" type="button" value="测试加载js" onclick="return funMessageShow();" />
    </form>

 1图片 22using System.Data;
 2图片 23using System.Drawing;
 3图片 24using System.Web;
 4图片 25using System.Web.SessionState;
 5图片 26using System.Web.UI;
 6图片 27using System.Web.UI.WebControls;
 7图片 28using System.Web.UI.HtmlControls;
 8图片 29
 9图片 30namespace IbatisTest.Web
10图片 31图片 32图片 33{
11图片 34图片 35    /**//// <summary>
12图片 36    /// Frameset 的摘要说明。
13图片 37    /// </summary>
14图片 38    public class Frameset : System.Web.UI.Page
15图片 39图片 40    图片 41{
16图片 42        protected System.Web.UI.HtmlControls.HtmlGenericControl detail;
17图片 43        protected System.Web.UI.HtmlControls.HtmlGenericControl contents;
18图片 44        protected System.Web.UI.HtmlControls.HtmlGenericControl main;
19图片 45    
20图片 46        private void Page_Load(object sender, System.EventArgs e)
21图片 47图片 48        图片 49{
22图片 50            detail.Attributes.Add("src","default.aspx");
23图片 51            detail.Attributes.Add("framespacing", "0") ;
24图片 52            detail.Attributes.Add("frameborder", "0") ;
25图片 53            detail.Attributes.Add("marginwidth", "0") ;
26图片 54            detail.Attributes.Add("marginheight", "0") ;
27图片 55            detail.Attributes.Add("topmargin", "0") ;
28图片 56            detail.Attributes.Add("leftmargin", "0") ;
29图片 57
30图片 58            contents.Attributes.Add("NAME", "hauttop") ;
31图片 59            contents.Attributes.Add("MARGINHEIGHT", "0") ;
32图片 60            contents.Attributes.Add("MARGINWIDTH", "0") ;
33图片 61            contents.Attributes.Add("topmargin", "0") ;
34图片 62            contents.Attributes.Add("leftmargin", "0") ;
35图片 63            contents.Attributes.Add("SCROLLING", "no") ;
36图片 64            contents.Attributes.Add("framespacing", "0") ;
37图片 65            contents.Attributes.Add("frameborder", "0") ;
38图片 66
39图片 67            contents.Attributes.Add("src","default.aspx");
40图片 68            main.Attributes.Add("NAME", "corpscentre") ;
41图片 69            main.Attributes.Add("MARGINHEIGHT", "0") ;
42图片 70            main.Attributes.Add("MARGINWIDTH", "0") ;
43图片 71            main.Attributes.Add("frameborder", "1") ;
44图片 72            main.Attributes.Add("SCROLLING", "auto") ;
45图片 73            main.Attributes.Add("framespacing", "0") ;
46图片 74            main.Attributes.Add("topmargin", "1") ;
47图片 75            main.Attributes.Add("leftmargin", "0") ;
48图片 76
49图片 77            main.Attributes.Add("src","Person.aspx");
50图片 78        }
51图片 79
52图片 80图片 81        Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
53图片 82        override protected void OnInit(EventArgs e)
54图片 83图片 84        图片 85{
55图片 86            //
56图片 87            // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
57图片 88            //
58图片 89            InitializeComponent();
59图片 90            base.OnInit(e);
60图片 91        }
61图片 92        
62图片 93图片 94        /**//// <summary>
63图片 95        /// 设计器支持所需的方法 - 不要使用代码编辑器修改
64图片 96        /// 此方法的内容。
65图片 97        /// </summary>
66图片 98        private void InitializeComponent()
67图片 99图片 100        图片 101{    
68图片 102            this.Load += new System.EventHandler(this.Page_Load);
69图片 103
70图片 104        }
71图片 105        #endregion
72图片 106    }
73图片 107}
74图片 108

myCss.Attributes.Add("href", ResolveUrl(Page.ResolveClientUrl("css文件路径")));

 

this.Page.Header.Controls.AddAt;

现在要从后台动态加载它们。

代码动态添加JS文件的引用

加载Css的主要代码为:

HtmlGenericControl myJs = new HtmlGenericControl();

图片 109图片 110代码

myJs.TagName = "script";

    /// <summary>
    /// 正常加载CSS
    /// </summary>
    /// <param name="pPage">要加载的页面</param>
    /// <param name="sStyleLink">样式url</param>
    public void LinkStyle(Page pPage, string sStyleLink)
    {
        System.Web.UI.HtmlControls.HtmlLink hlLink = new System.Web.UI.HtmlControls.HtmlLink(); 
        hlLink.Attributes.Add("rel", "stylesheet");
        hlLink.Attributes.Add("type", "text/css");
        hlLink.Attributes.Add("href", sStyleLink);
        Page.Header.Controls.Add(hlLink);
               
    }

myJs.Attributes.Add("type", "text/javascript");

加载Js的代码为

myJs.Attributes.Add("src", ResolveUrl(Page.ResolveClientUrl));

图片 111图片 112代码

this.Page.Header.Controls.AddAt;

    /// <summary>
    /// 正常加载Js
    /// </summary>
    /// <param name="pPage">要加载的页面</param>
    /// <param name="sJsUrl">js的url</param>
    public void LinkJs(Page pPage, string sJsUrl)
    {
        System.Web.UI.HtmlControls.HtmlGenericControl hgcLoadJs = new System.Web.UI.HtmlControls.HtmlGenericControl();
        hgcLoadJs.TagName = "script";
        hgcLoadJs.Attributes.Add("type", "text/javascript");
        hgcLoadJs.Attributes.Add("src", Page.ResolveClientUrl(sJsUrl)); //ResolveClientUrl:获取浏览器可以使用的 URL
        Page.Header.Controls.Add(hgcLoadJs);

很简单的方法,在这里记录一下

    }

后台完整的代码如下,包含对是否已加载的判断代码。

图片 113图片 114代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string sThisJsUrl = "JScript.js";
            string sThisStyleUrl = "StyleSheet.css";          
            LinkStyle(this.Page, sThisStyleUrl);
            LinkJs(this.Page, sThisJsUrl);
            //ReferenceAjaxScript(this.Page, sThisJs);
            //ReferenceJs(this.Page, sThisJs, sThisJs);
            judgeCssExist(sThisStyleUrl);
            judgeJsExist(sThisJsUrl);
        }
    }

    

    #region 加载Css
    /// <summary>
    /// 正常加载CSS
    /// </summary>
    /// <param name="pPage">要加载的页面</param>
    /// <param name="sStyleLink">样式url</param>
    public void LinkStyle(Page pPage, string sStyleLink)
    {
        System.Web.UI.HtmlControls.HtmlLink hlLink = new System.Web.UI.HtmlControls.HtmlLink(); 
        hlLink.Attributes.Add("rel", "stylesheet");
        hlLink.Attributes.Add("type", "text/css");
        hlLink.Attributes.Add("href", sStyleLink);
        Page.Header.Controls.Add(hlLink);
               
    }
    //加css不同法,功能与上边方法相同
    public void LinkStyle2(Page pPage, string sStyleLink)
    {
        System.Web.UI.HtmlControls.HtmlGenericControl objLink = new System.Web.UI.HtmlControls.HtmlGenericControl();
        objLink.TagName = "link";
        objLink.Attributes["rel"] = "stylesheet";
        objLink.Attributes["type"] = "text/css";
        objLink.Attributes["href"] = sStyleLink;
        Page.Header.Controls.Add(objLink);
    }
    #endregion

    #region  加载Js
    /// <summary>
    /// 正常加载Js
    /// </summary>
    /// <param name="pPage">要加载的页面</param>
    /// <param name="sJsUrl">js的url</param>
    public void LinkJs(Page pPage, string sJsUrl)
    {
        System.Web.UI.HtmlControls.HtmlGenericControl hgcLoadJs = new System.Web.UI.HtmlControls.HtmlGenericControl();
        hgcLoadJs.TagName = "script";
        hgcLoadJs.Attributes.Add("type", "text/javascript");
        hgcLoadJs.Attributes.Add("src", Page.ResolveClientUrl(sJsUrl)); //ResolveClientUrl:获取浏览器可以使用的 URL
        Page.Header.Controls.Add(hgcLoadJs);

    }
    /// <summary>
    /// 加载js
    /// </summary>
    /// <param name="pPage">要加载的页面</param>
    /// <param name="sJsName">js名称</param>
    /// <param name="sJsUrl">js的Url</param>
    public void ReferenceJs(Page pPage,string sJsName,string sJsUrl)
    {
        Type tPage = Page.GetType();
        ClientScriptManager csmManager = Page.ClientScript;
        if (!csmManager.IsClientScriptIncludeRegistered(tPage, sJsName))
        {
            csmManager.RegisterClientScriptInclude(tPage, sJsName, Page.ResolveClientUrl(sJsUrl));
        }
    }
    #endregion

    /// <summary>
    /// 在Ajax方式下加载Js
    /// </summary>
    /// <param name="pPage">要加载的页面</param>
    /// <param name="sJsUrl">js的url</param>
    public void ReferenceAjaxScript(Page pPage, string sJsUrl)
    {
        ScriptReference srReference = new ScriptReference(sJsUrl);
        ScriptManager smManager = ScriptManager.GetCurrent(pPage);
        if (smManager != null)
        {
            smManager.Scripts.Add(srReference);
        }
    }

    /// <summary>
    /// 判断Css是否已加载
    /// </summary>
    /// <param name="sCssUrl">css url</param>
    private void judgeCssExist(string sCssUrl)
    {
        ControlCollection ccCollection = Page.Header.Controls;
        if (ccCollection.Count > 0)
        {
            foreach (Control cItem in ccCollection)
            {
                if (cItem.GetType() == typeof(System.Web.UI.HtmlControls.HtmlLink))
                {
                    System.Web.UI.HtmlControls.HtmlLink hlLink = cItem as System.Web.UI.HtmlControls.HtmlLink;
                    if (hlLink.Attributes["href"].ToString() == sCssUrl)
                    {
                        Response.Write("此CSS已存在,无须加载!<br/>");
                    }
                }
            }
        }
    }
    /// <summary>
    /// 判断js是否已加载
    /// </summary>
    /// <param name="sJsUrl">js url</param>
    private void judgeJsExist(string sJsUrl)
    {
        ControlCollection ccCollection = Page.Header.Controls;
        if (ccCollection.Count > 0)
        {
            foreach (Control cItem in ccCollection)
            {
                if (cItem.GetType() == typeof(System.Web.UI.HtmlControls.HtmlGenericControl))
                {
                    System.Web.UI.HtmlControls.HtmlGenericControl hgcControl = cItem as System.Web.UI.HtmlControls.HtmlGenericControl;
                    if (hgcControl.Attributes["src"].ToString() == sJsUrl)
                    {
                        Response.Write("此Js已存在,无须加载!<br/>");
                    }
                }
            }
        }
    }

}

 

 

本文由10bet手机官网发布于web前端,转载请注明出处:net后台代码动态添加JS文件和css文件的引用,动态加载css与js总结

上一篇:没有了 下一篇:javascript的预编译和执行顺序,四种动态加载
猜你喜欢
热门排行
精彩图文