繁體中文当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > 使用母版页时内容页如何使用css和javascript
- ASP.NET
- asp.net Linq TO Sql 分页方法
- asp.net 用XML生成放便扩展的自定义树
- asp.ent下合并两个结构相同的DataTable
- asp.net 遍历repeater中的控件的几种方式
- asp.net 处理原文件中过长的viewstate代码
- asp.net下遍历页面中所有的指定控件的代码
- 获取创建Membership的数据库创建脚本
- asp.net AJAX注册类
- asp.net 处理F5刷新页面重复提交页面的一个思路
- ASP.NET 缓存分析和实践浅析提高运行效率
- asp.net 读取并显示excel数据的实现代码
- ASP.NET中常用的用来输出JS脚本的类
- ASP.NET中内嵌页面代码的一个问题
- asp.net(C#)操作excel（上路篇）
- 一个基于Asp.Net MVC的权限方案
- ASP.NET实例教程:51job网站地区选择功能
- ASP.NET教程:友好的Html和JS适合SEO
- ASP.NET教程:使用.ashx文件去除重复内容
- ASP.NET做SEO：制作架构清晰和更新及时的网站地图
- ASP.NET优化:Sql注入和Html注入的黑帽SEO
ASP.NET 中的 使用母版页时内容页如何使用css和javascript
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-13 浏览: 88 ::
收藏到网摘: n/a
由于网站的主要频道页和列表页的头部和底部都是一样的，如果将每个页面放在单独的页面中，当头部和底部需要更改时维护量太大。于是想把头部和底部做成母版页，频道页和列表页的具体内容放到内容页中。这样当头和底需要改动时，只要修改一下母版页就可以了。 好处有了，问题也接着来了。原来在频道页和列表页中有其各自的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的应用效果后可能也放弃了。其实只要在坚持一下就成功了！余世维说的好“比别人多想一点，你就能成功！”，确实很有道理啊。
评论 (0) All
