由于网站的主要频道页和列表页的头部和底部都是一样的,如果将每个页面放在单独的页面中,当头部和底部需要更改时维护量太大。于是想把头部和底部做成母版页,频道页和列表页的具体内容放到内容页中。这样当头和底需要改动时,只要修改一下母版页就可以了。

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

static publicclass 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的应用效果后可能也放弃了。其实只要在坚持一下就成功了!余世维说的好“比别人多想一点,你就能成功!”,确实很有道理啊。

使用母版頁是內容如何使用CSS和javascript相关推荐

  1. 使用母版頁是內容如何使用CSS和javascript(轉)

    使用母版页时内容页如何使用css和javascript(转) 由于网站的主要频道页和列表页的头部和底部都是一样的,如果将每个页面放在单独的页面中,当头部和底部需要更改时维护量太大.于是想把头部和底部做 ...

  2. c#抓取別的網頁的內容

    代码  string content = string.Empty;             string str = "http://www.baidu.com/";       ...

  3. [NIOS] 如何Erase EPCS flash內容

    以下資料是給我自己做個以後查詢使用. ================================================== 手動清除EPCS內的資料步驟: 1. 先開啟 Nios II ...

  4. 如何用VB.NET控制Excel單元格裡的內容?

    1.現在數據是可以發送到Excel單元格裡了,但我想用代碼控制某一單元格字體大一些?(如:fontsize=12   or   fontsize=16)         2.如何控制單元格的內容靠左或 ...

  5. 使用 Segue 傳送選取的 Table Cell 內容到下一個 View

    最近接了一個iOS的軟體開發專案, 由於是 obj-c 的初心者,在開發上難免會遇上一些看似很簡單但是卻又不知如何解決問題 分享一下剛剛遇上的問題解法, 我先從server上先要了一份資料清單回來後, ...

  6. java ()括號_Java提取中括號中的內容

    曾經在工作中遇到一個問題,就是需要提取字符串中每一個中括號里的內容,在網上搜了一下,發現用正則表達式可以提取中括號中的內容,具體實現如下: import java.util.ArrayList; im ...

  7. signature=238addc09a2ed2eedaa03f702842ebad,適用於數位內容交易的安全浮水印協定

    摘要: 隨著資訊技術與網路設備的進步,數位內容可以更加簡單快速地經由網際網路進行複製與傳遞,因此,經由網際網路進行數位內容產品交易的條件也日趨成熟.但是也由於數位內容可以容易的被複製與傳播,建立一套能 ...

  8. VR內容素材的標準化打包方法

    VR內容素材的標準化<打包>方法 Docker镜像(Image)可以让3D数据模型(如动漫3D素材模型)搭配自己的软件代码Lib(如渲染或数据处理引擎),VR内容的编辑器可以将素材的3D模 ...

  9. xlst 解析 html c,怎樣實現利用xslt把xml文件內容顯示到html文件中?急!

    #1 ' 重新設置每頁的記錄數 Function setRecordsPerPage() If IsNumeric(RecordsPerPage.Value) Then intRecordsPerPa ...

最新文章

  1. RememberMe 功能的实现(base-auth使用说明)
  2. Mongodb 副本集+分片集群搭建
  3. vue项目使用encode_Vue项目中使用xlsx-style导出有格式的表格
  4. 深入理解$watch ,$apply 和 $digest --- 理解数据绑定过程——续
  5. ansible-playbook相关
  6. 剑指offer.机器人的运动范围
  7. englishpod主持人对话文本_Englishpod 23 | 主持人文本讲解
  8. paip.输入法编程---词频调整--单字优先编码发音一致优先的问题跟调整
  9. OpenStack HA集群1-Galera Cluster for Mysql
  10. Android源码 app预制带so和assets文件的aar包(sdk)
  11. mistake - pwnable
  12. 安卓外置SD卡linux,Android获取机身存储、内置SD卡与外置TF卡路径
  13. CCF中学生计算机程序设计入门篇练习2.4.2(NOI 1002 三角形) pascal
  14. 如何恢复Windows默认共享
  15. 大学电子竞赛及项目~总贴
  16. 微信小程序开发工具win10下编译非常慢解决方法
  17. 请开启微信或者手机定位服务器,微信在哪里设置定位(微信开启定位功能设置)...
  18. 高防IP是如何来防御DDoS攻击的呢?
  19. 以太坊钱包Metamask 下载,Metamask 7.7.9最新版官方版下载和安装方法
  20. 计算机中录音机的使用方法,教你win10系统电脑录音机功能录音的使用教程

热门文章

  1. thymeleaf模板引擎基础使用(转)
  2. 虚拟化五、KVM虚拟化技术2
  3. 金额数字转中文大写(转)
  4. 整合mybatis3.2.2跟spring3.0.1
  5. 人工智能 - paddlepaddle飞桨 - 深度学习基础教程 - 词向量
  6. EasyUI界面显示中文格式(日期中文格式)
  7. Spring Boot 面试问题
  8. ZooKeeper--分层仲裁简介
  9. ZooKeeper Java示例
  10. android将字符串中间几个字用*代替,【Android技巧之相见恨晚系列】-TextView/string.xml冷门小技巧:占位转换符%1$s、%1$d等的用法...