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

所属分类: 网络编程 / ASP.NET 阅读数: 372
收藏 0 赞 0 分享

 最近在学习开发服务器控件,其它就少不了为控件注册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">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    </form>
</body>
</html>

更多精彩内容其他人还在看

.NET Core源码解析配置文件及依赖注入

这篇文章我们设计了一些复杂的概念,因为要对ASP.NET Core的启动及运行原理、配置文件的加载过程进行分析,依赖注入,控制反转等概念的讲解等
收藏 0 赞 0 分享

.NET Corek中Git的常用命令及实战演练

这篇文章将通过故事的形式从Git的历史谈起,并讲述Git的强大之处。然后通过实战演练教你如何在Github以及码云上托管我们的代码并进行代码的版本控制
收藏 0 赞 0 分享

Asp.Net Core WebAPI使用Swagger时API隐藏和分组详解

这篇文章主要给大家介绍了关于Asp.Net Core WebAPI使用Swagger时API隐藏和分组的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Asp.Net Core具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

如何利用FluentMigrator实现数据库迁移

这篇文章主要给大家介绍了关于如何利用FluentMigrator实现数据库迁移的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

ASP.NET Core利用Jaeger实现分布式追踪详解

这篇文章主要给大家介绍了关于ASP.NET Core利用Jaeger实现分布式追踪的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用ASP.NET Core具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

浅谈从ASP.NET Core2.2到3.0你可能会遇到这些问题

这篇文章主要介绍了ASP.NET Core2.2到3.0可能会遇到的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

详解.net core webapi 前后端开发分离后的配置和部署

这篇文章主要介绍了.net core webapi 前后端开发分离后的配置和部署,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

详解ASP.Net Core 中如何借助CSRedis实现一个安全高效的分布式锁

这篇文章主要介绍了ASP.Net Core 中如何借助CSRedis实现一个安全高效的分布式锁,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

.net 4.5部署到docker容器的完整步骤

这篇文章主要给大家介绍了关于.net 4.5部署到docker容器的完整步骤,文中通过示例代码介绍的非常详细,对大家学习或者使用.net4.5具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

.net core并发下线程安全问题详解

这篇文章主要给大家介绍了关于.net core并发下线程安全问题的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用.net core具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享
查看更多