Asp.net后台把脚本样式输出到head标签中节省代码冗余

2020-01-18 00:11:49

字体：大中小

来源：转载

供稿：网友

　最近在学习开发服务器控件，其它就少不了为控件注册js和css之类的资源文件，或者直接注册纯脚本样式。其中就遇到如下问题：

　　　　1、注册的资源文件或纯脚本样式在生成的页面中都不在head标签中（当然这个不影响页面功能）

　　　 2、一个页面使用多个一样的控件时，会出现重复输入（出现多余代码）

第一个问题说到底也不是什么问题，主要是看个人喜欢。在浏览器里查看页面源代码时，也许就成了问题了，源代码很不整洁，要是内容多时问题就更突出。本来想找脚本，却在head标签里找不到，只能到其它标签里找了。（不知道有没有哪些开发工具在查看源代码时可以把它们都区分开来，以方便查找）

　　　　第二个却实是个问题，也不多说了。

　　　　有问题就应该解决，为了方便看效果，把它改成了后台直接使用，开发服务器控件时也使用，只是不用引用嵌入资源文件。

　　　代码如下，两个方法：

复制代码代码如下:

注册资源文件

/// <summary>
        /// 注册资源文件
        /// </summary>
        /// <param name="path">路径</param>
        /// <param name="key">要搜索的客户端资源的键，防止</param>
        /// <param name="type">资源文件类型</param>
        public void RegisterResource(string path, string key, ResType type)
        {
            string resStr = string.Empty;
            switch (type)
            {
                case ResType.Js:
                    resStr = string.Format("<script type=/"text/javascript/" language=/"javascript/" src=/"{0}/"></script>", path);
                    break;
                case ResType.Css:
                    resStr = string.Format("<link href=/"{0}/" rel=/"stylesheet/" type=/"text/css/" />", path);
                    break;
            }
            //是否已输出
            if (!Page.ClientScript.IsClientScriptBlockRegistered(this.GetType(), key))
            {
                if (Page.Header != null)
                {
                    LiteralControl link = new LiteralControl();
                    link.Text = "/r/n" + resStr;
                    Page.Header.Controls.Add(link);
                }
                Page.ClientScript.RegisterClientScriptBlock(this.GetType(), key, "", false);//注册资源key
            }
        }

此方法有三个参数，第一个path是资源文件路径；第二个key是资源文件标识，用来防止重复注册；第三个type，枚举类型，样式和脚本两类。方法也很简单，通过为页面Header控件增加自己定义控件以达到想要的效果。Page.ClientScript.IsClientScriptBlockRegistered(this.GetType(), key)用来检测当前页面实例中此资源文件标识是否已经注册过，Page.ClientScript.RegisterClientScriptBlock(this.GetType(), key, "", false)这个不可少，此作用就是在当前页面实例中注册该资源，其本来之意是注册一个脚本，但此处的脚本为空。

复制代码代码如下:

注册脚本块(或者样式块)

/// <summary>
        /// 注册脚本块(或者样式块)
        /// </summary>
        /// <param name="script"></param>
        /// <param name="key"></param>
        /// <param name="type"></param>
        public void RegisterScript(string script, string key)
        {
            //是否已输出
            if (!Page.ClientScript.IsClientScriptBlockRegistered(this.GetType(), key))
            {
                if (Page.Header != null)
                {
                    LiteralControl link = new LiteralControl();
                    link.Text = "/r/n" + script;
                    Page.Header.Controls.Add(link);
                }
                Page.ClientScript.RegisterClientScriptBlock(this.GetType(), key, "", false);//注册资源key
            }
        }

　此方法有二个参数，第一个script 是脚本块(或者样式块)，如<script>******</script>或都<style></style>之类。方法体和上面的差不多，在此就不讲了。

　　如何使用

此例在Page_Load方法里使用

复制代码代码如下:

  protected void Page_Load(object sender, EventArgs e)
        {
this.RegisterResource("css/StyleSheet1.css", "dfed", ResType.Css);
                this.RegisterResource("Scripts/JScript1.js", "dfed4", ResType.Js);
                this.RegisterScript("<script>alert('直接用script脚本输入')</script>", "dfed6");
        }

样式文件：
StyleSheet1.css

复制代码代码如下:

body {
}

div { height:200px; background-color:Blue}

脚本文件：
JScript1.js

复制代码代码如下:

alert('这是js文件里的脚本');

页面：
html

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">