使用母版页时内容页如何使用css和javascript

所属分类: 网络编程 / ASP.NET 阅读数: 1083
收藏 0 赞 0 分享
好处有了,问题也接着来了。原来在频道页和列表页中有其各自的css引入和一些javascript函数,当使用母版页时,放在内容页中这些css样式和javascript函数怎么处理呢?因为大家知道,使用母版页的内容页是不能包含<head></head>标记的,而css和javascript函数的声明是要放到<head></head>中间的,这些css样式和javascript函数如何处理呢?上网查了一下,大致有三种解决方案:方案一:把所有的css样式和javascript函数放到母版页的<head></head>中,我觉得这样做的弊端就是导致母版页的<head></head>区特别臃肿,同时如果原来两个频道页中包含同名的css声明或javascript函数,但却是不同样式或执行不同操作,怎么办呢?所以这第一种方案很快被我否定了。方案二是在内容页的PageLoad事件中通过代码来指定本内容页的css文件。具体代码如下:
复制代码 代码如下:

static public class ControlHelper
{
static public void AddStyleSheet(Page page, string cssPath)
{
HtmlLink link = new HtmlLink();
link.Href = cssPath;
link.Attributes["rel"] = "stylesheet";
link.Attributes["type"] = "text/css";
page.Header.Controls.Add(link);
}
}

这样,在具体页面,我们就可以通过如下代码添加 CSS 引用:
复制代码 代码如下:

protected void Page_Load(object sender, EventArgs e)
{
ControlHelper.AddStyleSheet(this.Page, "css/projectPage.css");
}

这种解决方案的好处时可以在程序运行时动态更改所需的css文件,但是对javascript函数处理起来该怎么做呢?再说有必要把本该加在html代码中的css和javascript通过cs代码来加入吗?因此,这种解决方案也很快被我否定了。剩下的第三种解决方案就是在母版页的<head></head>中添加一个内容控件,然后在内容页中在对应的内容控件中写css和javascript代码。听起来这个这个解决方案应该是最方便,最适宜的解决方法。可是当我把ContentPlaceHolder控件拖放到<head></head中间时,vs2005却报了下面的错误:
白天的时候,看到这我就以为这种方法行不通了,差点就放弃了。晚上回家想找找更好的解决方案,可所有的文章基本上都是说的前两种,对第三种解决方案有人说报错,不行。看来碰到这个提示后放弃的人还真不少。我没理这个错误,直接转到内容页,,在内容页中插入以下代码:
看了一下,内容页中没有报错,看来有戏。可转到内容页的设计视图一看,出现了如下界面:
心凉了一下,因为没看到我上面应用的css样式的效果,我的css文件的代码如下:
复制代码 代码如下:

#content
{
text-align:center;
width:200px;
height:100px;
background-color:#00FF00;
color:#FF0000;
font-size:12px;
}

也就是让id为content的div宽度200px,高度100px,文字居中,背景颜色为为绿色,字体为红色,12px。不甘心的我按下了F5调试键,令人惊喜的一个画面出现了:
这说明css应用成功了,同时也看到了那个测试可爱的hello world对话框alert了出来。成功了!
总结一下,其实很多人开始的想法和我一样,想如何用最简单的方法实现在内容页中使用css和javascript的功能。他们中的很多人可能也找到我找到的那篇文章,但是当碰到我的那个母版页中的错误提示后就放弃了,也许有人坚持到了第二步,可是在设计视图中没看到css的应用效果后可能也放弃了。其实只要在坚持一下就成功了!余世维说的好“比别人多想一点,你就能成功!”,确实很有道理啊。
更多精彩内容其他人还在看

解析WPF实现音频文件循环顺序播放的解决方法

本篇文章是对WPF实现音频文件循环顺序播放的方法进行了详细的分析介绍,需要的朋友参考下
收藏 0 赞 0 分享

解决.net framework 4.0环境下遇到版本不同编译不通过的方法详解

本篇文章是对.net framework 4.0环境下遇到版本不同编译不通过的解决方法进行了详细的分析介绍,需要的朋友参考下
收藏 0 赞 0 分享

将文件上传、下载(以二进制流保存到数据库)实现代码

将文件以二进制流的格式写入数据库:首先获得文件路径,然后将文件以二进制读出保存在一个二进制数组中具体请祥看本文,希望对你有所帮助
收藏 0 赞 0 分享

点击提交按钮后DropDownList的值变为默认值实现分析

在点击提交按钮后,页面上所有的绑定到数据库的控件值都恢复到默认值,下面与大家分享下DropDownList的值变为默认值
收藏 0 赞 0 分享

ASP.NET web.config中数据库连接字符串connectionStrings节的配置方法

ASP.NET web.config中数据库连接字符串connectionStrings节的配置方法,需要的朋友可以参考一下
收藏 0 赞 0 分享

Linkbutton控件在项目中的简单应用

Button控件可分为button控件、LinkButton控件、ImageButton控件三类,而LinkButton控件则在页面上显示为一个超级链接,下面与大家分享下其具体应用
收藏 0 赞 0 分享

Web.config 和 App.config 的区别分析

Web.config 和 App.config 的区别分析,需要的朋友可以参考一下
收藏 0 赞 0 分享

基于.Net中的数字与日期格式化规则助记词的使用详解

本篇文章是对.Net中的数字与日期格式化规则助记词的使用进行了详细的分析介绍,需要的朋友参考下
收藏 0 赞 0 分享

解决在Web.config或App.config中添加自定义配置的方法详解

本篇文章是对在Web.config或App.config中添加自定义配置的方法进行了详细的分析介绍,需要的朋友参考下
收藏 0 赞 0 分享

深入本机影像生成器(Ngen.exe)工具使用方法详解

本篇文章是对本机影像生成器(Ngen.exe)工具使用方法进行了详细的分析介绍,需要的朋友参考下
收藏 0 赞 0 分享
查看更多