使用母版页时内容页如何使用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的应用效果后可能也放弃了。其实只要在坚持一下就成功了！余世维说的好“比别人多想一点，你就能成功！”，确实很有道理啊。

赞 (0)

相关推荐

  • ASP.Net巧用窗体母版页实例

    本文实例讲述了ASP.Net巧用窗体母版页的方法.分享给大家供大家参考.具体分析如下: 背景:每个网页的基本框架结构类似: 浏览网站的时候会发现,好多网站中,每个网页的基本框架都是一样的,比如,最上面都是网站的标题,中间是内容,最下面是网站的版权.开发提供商等信息: 在这些网页中,表头.底部的样式和内容都是一样的,不同的只是中间的内容. 因此在制作网站时,可以将这些共同的东西分离出来,放到"窗体母版页"中,在需要的时候嵌套就可以. 巧用窗体母版项: 下面就开始行动(本文是以Visual

  • ASP.NET 2.0 中的创建母版页

    ASP.NET 2.0 中的创建母版页

    虽然母版页和内容页功能强大,但是其创建和应用过程并不复杂.本节和下一节将以创建如图1所示示例为例,向读者详细介绍,使用Visual Stuido 2005创建母版页和内容页的方法以及相关知识.本节的重点是创建母版页的方法. 母版页中包含的是页面公共部分,即网页模板.因此,在创建示例之前,必须判断哪些内容是页面公共部分,这就需要从分析页面结构开始.图1所示显示的是一个页面截图.在下文中,暂称该页面名为Index.aspx,并且假设其为某网站中的一页.通过分析可知,该页面的结构如图5所示. 图5 页

  • ASP.NET下母版页和内容页中的事件发生顺序整理

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

  • asp.net使用母版页中使用ajax脚本取数据

    方法如下: 1. 页面中拖入ScriptManager.以便于使用Ajax脚本.同时放在其它客户端控件,用于触发NetPost方法.这里不列出客户端控件. 复制代码 代码如下: <asp:ScriptManager ID="smMaster" runat="server" ScriptMode="Auto" EnablePageMethods="true"> </asp:ScriptManager> 2

  • 引用母版页后在page页面修改母版页控件的值的方法

    具体条件如下:1.首先该页面必须引用要修改的母版页:2.在page页面通过设置页面指令@MasterType创建对该母版页的强类型引用,指定生成强类型的文件的虚拟路径例如: 复制代码 代码如下: <%@ MasterType VirtualPath="~/Demo.Master" %> 3.在母版页添加一个public的属性,set值赋给母版页控件,例如: 复制代码 代码如下: public string PageTitle        {            set

  • ASP.NET母版页基础知识介绍

    ASP.NET母版页基础知识介绍

    模板页是做什么的? 利用模板页可以方便快捷的创建统一风格的ASP.NET网站,并且容易管理和维护,提高了效率. 模板页为网页定义所需要的外观和标准,在母版的基础上创建包含显示内容的各个内容页.当用户请求内容页时,这些内容页与母版页合并,这样,模板页的布局与内容页的布局就可以组合在一起输出了. 模板页一般用来: 1.通过修改模板页来处理网页的通用功能. 2.可以方便的创建一组控件和代码,并应用于一组网页. 3.通过允许控制占位符控件的呈现方式,模板页可以在细节上控制最终页的布局. 模板页与普通页

  • asp.net母版页如何使用

    asp.net母版页如何使用

    计算机专业的很多同学临近毕业了,才着急怎么做一个毕业设计来进行答辩,很短的时间是不可能完成的,今天就先跟着小编的步伐,学习asp.net母版页的使用,快速掌握这个实用技巧,相信一定在大家的毕业设计过程中发挥巨大的作用. 工具/原料 Visual Studio 2008 方法/步骤 打开Visual Studio 2008,点击[文件][打开网站]找到网站根目录文件夹,点击[打开] 在网站根目录上单击右键,选择[添加新项] 在弹出的[添加新项]选择[母版页]默认使用名称,点击[添加] 打开母版页的

  • ASP.NET中母版页和shtml实例入门

    本文较为深入浅出的分析了ASP.NET中母版页和shtml.分享给大家供大家参考.具体分析如下: 母版页 创建和使用母版页: 1. 创建Webform的母版页(MasterPage) 2. 创建使用母版页的窗体(ContentPage). 3. 母版页使用ContentPlaceHolder挖坑,"使用母版页的窗体"用Content填坑 母版页是服务器帮我们将页面拼接response给浏览器的. 但是,母版页太笨重.推荐使用shtml. shtml ServerSideInclude(

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

    好处有了,问题也接着来了.原来在频道页和列表页中有其各自的css引入和一些javascript函数,当使用母版页时,放在内容页中这些css样式和javascript函数怎么处理呢?因为大家知道,使用母版页的内容页是不能包含<head></head>标记的,而css和javascript函数的声明是要放到<head></head>中间的,这些css样式和javascript函数如何处理呢?上网查了一下,大致有三种解决方案:方案一:把所有的css样式和javas

  • 浅谈Asp.Net母版页和内容页运行机制

    浅谈Asp.Net母版页和内容页运行机制

    从上面的讲解中可以看出,单独的母版页是不能被用户所访问的.没有内容页支持,母版页仅仅是一个页面模板,没有更多的实用价值.同样道理,单独的内容页没有母版页的支持,也不能够应用.这两者是不可分割的,只有同时正确创建和使用母版页及内容页,才能发挥它们的强大功能.为了便于读者理解,有必要讲解一下母版页与内容页的运行机制. 母版页和内容页的运行过程可以概括为以下5个步骤. 用户通过输入内容页的URL来请求某内容页. 获取内容页位置后,读取内容页@ Page指令.如果该指令引用一个母版页,则读取该母版页.

  • 文章内容页广告浮于左上角的解决办法

    这个是整页代码,你可以看着改了,也可以保存成HTML文件,完了试试看就知道了,主要用的CSS+DIV 上面的东西移到模板中,下面的东西也是一样~完了就行了~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://

  • Python中免验证跳转到内容页的实例代码

    相信很多人在浏览网页时,经常会碰到需要输入验证码才可以继续浏览的情况吧,遇到这种问题,大多数人只能进行繁琐的注册验证,今天小编教大家只要使用python就可以免验证方法. 以经常用到的解答网站--上学吧为例,在网站里点击答案页面,会显示验证后才可以查看提示,下面就使用python实现跳过验证码. 我们需要通过python构造随机的 X-Forwarded-For 信息来绕过 ASP 网站的 IP 检测,可以实现对输入的网址正确性进行检查.对验证码核验不通过时的处理等等. python免验证跳转页

  • 去掉destoon资讯内容页keywords关键字自带的文章标题的方法

    本文实例讲述了去掉destoon资讯内容页keywords关键字自带的文章标题的方法,具体实现方法如下: 在\module\article目录下的article.class.php文件中的大约158行找到: $keyword = $item['title'].','.($item['tag'] ? str_replace(' ', ',', trim($item['tag'])).',' : '').strip_tags(cat_pos(get_cat($item['catid']), ',')

  • smarty巧妙处理iframe中内容页的代码

    废话不多说,进去正题 做过后台的,应该都知道,经常要用到iframe来处理导航,如果按一般的思路来做这个功能,还是挺简单的 可是当我用smarty的时候,就发现了问题,比如,一个iframeset分成了:头部top,左边menu,右边main, 正常情况,用smarty来处理的话,一般是这样: 如果3个页面仅仅只是静态页面的话,就是如下处理 iframe.html代码: 复制代码 代码如下: <frame src="top.html" name="topFrame&qu

  • 解决layer弹出层的内容页点击按钮跳转到新的页面问题

    在参与的一个项目中,有一个这样的需求,导入基础数据成功后,默认弹出一个管理员登录页,点击登录按钮,需要跳到管理页面. 导入页按钮: <button type="button" id="start" class="layui-btn layui-btn-radius layui-btn-lg layui-bg-orange btn3"><i>导入</i></button> 导入按钮的点击事件,点击后会

  • 解决python3插入mysql时内容带有引号的问题

    插入mysql时,如果内容中有引号等特殊符号,会报错, 解决方法可以用反斜杠转义,还可以用pymysql的一个方法自动转义: c = ''' 北京时间9月20日晚间9点半,智能供应链服务供应商百世集团将在<a class="wt_article_link" onmouseover="WeiboCard.show(2125973432,'tech',this)" href="?zw=tech" rel="external nofol

  • vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果

    最近遇到了之前没有碰到过的一个问题:编辑器输入内容时,最好让内容一直保持在可视区域,比如如果区域超出的话,就在键盘抬起时向上滚动一定距离. 这个和聊天发消息还有一定的区别,聊天的话是只要点开输入框,就将内容定位到最下面: 即 dom.scrollTop = dom.scrollHeight即可,但是这个需要移动的是一部分距离,经过讨论最好是让当前光标的位置在键盘抬起时达到可视区域的最上面 那么这个距离肯定是根据光标的距离顶部位置决定的,但是光标距离顶部的距离我并没有度到如何获取,于是就自己瞎摸索

随机推荐