使用母版页时内容页如何使用css和javascript_实用技巧

好处有了,问题也接着来了。原来在频道页和列表页中有其各自的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的应用效果后可能也放弃了。其实只要在坚持一下就成功了!余世维说的好“比别人多想一点,你就能成功!”,确实很有道理啊。

时间: 2024-12-29 03:34:01

使用母版页时内容页如何使用css和javascript_实用技巧的相关文章

内容页怎么引用.css和.js文件?

问题描述 内容页需要引用与母版页不同的.css和.js文件,我将文件放在内容页的<asp:ContentID="Content1"ContentPlaceHolderID="head"Runat="Server"></asp:Content>标记中,运行没有效果.到底该怎么引用?很着急 解决方案 解决方案二:你怎么引用的,代码呢?解决方案三:内容页中,这么引用的,运行出不来效果<asp:ContentID="

ASP.NET中母版页的内容页的文本框的边框显示不了?

问题描述 我使用了母版页,在内容页中使用文本框.可是文本框的边框显示不了?为什么??我自己再创建了一个页面.可是在这个页面中边框却可以显示.母版页的代码如下:<%@MasterLanguage="C#"AutoEventWireup="true"CodeFile="MasterPage.master.cs"Inherits="MasterPage"%><!DOCTYPEhtmlPUBLIC"-//W

ASP.NET下母版页和内容页中的事件发生顺序整理_实用技巧

母版页控件 Init 事件. 内容控件 Init 事件. 母版页 Init 事件. 内容页 Init 事件. 内容页 Load 事件. 母版页 Load 事件. 内容控件 Load 事件. 内容页 PreRender 事件. 母版页 PreRender 事件. 母版页控件 PreRender 事件. 内容控件 PreRender 事件.

.net母版页有内容页这个属性吗?请问怎么表示?

问题描述 if(((TextBox)this.Page.PreviousPage.conFindControl("txt_username")).Text!=string.Empty&&((TextBox)this.Page.PreviousPage.FindControl("txt_password")).Text!=string.Empty)有这样一个判断语句,当值从普通页面传入这个页面时正常执行,但把传值页面放进母版页传值时,此接受页面的这段话

IIS 浏览aspx页面出现无法显示XML页的解决方法分享_实用技巧

 使用IIS调试.aspx程序时IE提示以下错误:                无法显示 XML 页.         使用 样式表无法查看 XML 输入.请更正错误然后单击 刷新按钮,或以后重试.         处理资源 'http://localhost/ 时出错.第 1 行,位置: 2          <%@ Page Language="C#" AutoEventWireup="true"   CodeFile="Main.aspx.c

vs2010根据字符串内容添加断点的方法介绍_实用技巧

在vs中我们可以直接用表达式.数值型比较直接用操作符即可. 如i==2,i<2; 但是字符型比较呢? 加入我们有一个名为string的变量,定义如下: char *string="Two"; 设置断点: 当我们运行上述代码时,会发现即使string的内容"Two"时,运行并没有中断.这是因为==运算符比较的是两个字符串的地址而不是内容,因此上述断点并不能满足我们的需求.(字符串名就是地址) Visual Studio考虑到程序员经常会根据字符串的内容添加断点,

如何解决ASP.NET新增时多字段取值的问题_实用技巧

ASP.NET 开发人员在卡发时经常会碰到一个情况,就是新增的页面中字段太多,在点击保存的时候需要一个一个的赋值实体或者构建SQL语句去保存.这样不仅浪费体力还需要占用大量的文本行控件去写代码.经过构思是否可以使用一种更方便的办法去解决呢?提高代码的内聚性.  1.思路  我们知道一般新增页面最多的就是一大堆文本框让用户输入内容,然后点击保存按钮进行提交将数据持久化到数据库. 在点击提交的时候传统方式就是一个一个文本框的读取赋值.  HTML代码如下: <asp:TextBox ID="T

ASP.NET MVC中使用jQuery时的浏览器缓存问题详解_实用技巧

介绍 尽管jQuery在浏览器ajax调用的时候对缓存提供了很好的支持,还是有必要了解一下如何高效地使用http协议. 首先要做的事情是在服务器端支持HTTP GET,定义不同的URL输出不同的数据(MVC里对应的就是action).如果要使用同一个地址获取不同的数据,那就不对了,一个HTTP POST也不行因为POST不能被缓存.许多开发人员使用POST主要有2个原因:明确了数据不能被缓存,或者是避免JSON攻击(JSON返回数组的时候可以被入侵). 缓存解释 jQuery全局对象里的ajax

获取远程网页的内容之一(downmoon原创)_实用技巧

获取远程网页的内容之一(downmoon原创) 一.本机直接上网时: 获取指定远程网页内容#region 获取指定远程网页内容      复制代码 代码如下:     /**//// <summary>          /// 获取指定远程网页内容          /// </summary>          /// <param name="strUrl">所要查找的远程网页地址</param>          /// <