虽然母版页和内容页功能强大,但是其创建和应用过程并不复杂。本节和下一节将以创建如图 1 所示示例为例,向读者详细介绍,使用 Visual Stuido 2005 创建母版页和内容页的方法以及相关知识。本节的重点是创建母版页的方法。

母版页中包含的是页面公共部分,即网页模板。因此,在创建示例之前,必须判断哪些内容是页面公共部分,这就需要从分析页面结构开始。图 1 所示显示的是一 个页面截图。在下文中,暂称该页面名为 Index.aspx ,并且假设其为某网站中的一页。通过分析可知,该页面的结构如图 5 所示。

图 5 页面结构图

   页面 Index.aspx 由 4 个部分组成:页头、页尾、内容 1 和内容 2 。其中页头和页尾是 Index.aspx 所在网站中页面的公共部分,网站中许多页 面都包含相同的页头和页尾。内容 1 和内容 2 是页面的非公共部分,是 Index.aspx 页面所独有的。结合母版页和内容页的有关知识可知,如果使用母版页 和内容页来创建页面 Index.aspx ,那么必须创建一个母版页 MasterPage.master 和一个内容页 Index.aspx 。其中母版页包含 页头和页尾等内容,内容页中则包含内容 1 和内容 2 。

这个专题中主要讲解的是 MasterPage ,给刚刚建立的工程添加一个 MasterPage :

MasterPage 以 master 为后缀名,我们刚刚建立了一个 MasterPage.master 文件,该文件有如下内容:

 1  <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
 2   
 3    
 4   
 5   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 6   
 7    
 8   
 9   <html xmlns="http://www.w3.org/1999/xhtml" >
10   
11   <head runat="server">
12   
13       <title>Untitled Page</title>
14   
15   </head>
16   
17   <body>
18   
19       <form id="form1" runat="server">
20   
21       <div>
22   
23           <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
24   
25           </asp:contentplaceholder>
26   
27       </div>
28   
29       </form>
30   
31   </body>
32   
33   </html>
34 
粗看还以为这是一个普通的 aspx 页面,其实不是,最上面的 <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
表面明这是一个 master 文件,同时在页面中你可以看到用 <div> 包裹着的一个 asp 控件
Contentplaceholder ,这个叫 “ 内容占位符 ” ,他的作用就是先通过 div 或者 table 进行分割,然后 “ 霸占 ” 一个地方,声明此地有 “ 主 ” 了,不过主人不是 Contentplaceholder ,而是后面会说道到的 Content 控件。
注意: <div> 一般通过 css 样式表来控制页面的布局,如 cnblogs 里面的很多皮肤都是如此,为了不把问题复杂化,我还是用 table 。在 Design 状态下画出如下表格 (vs.net 2005 的 Design 功能真的好用很多 ^_^) :

这是一个很标准的网页页面布局,下一步就把 Contentplaceholder 放进去 “ 占地盘 ”“ :

放完后我们把各个部分的 ContentPlaceHolder 重新命名一次,更改后的代码如下:

 1  <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
 2   
 3    
 4   
 5   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 6   
 7    
 8   
 9   <html xmlns="http://www.w3.org/1999/xhtml" >
10   
11   <head runat="server">
12   
13       <title>Untitled Page</title>
14   
15   </head>
16   
17   <body>
18   
19       <form id="form1" runat="server">
20   
21      <table width="60%">
22   
23               <tr>
24   
25                   <td colspan="3" height="80">
26   
27                       <asp:ContentPlaceHolder ID="TopContent" runat="server">
28   
29                       </asp:ContentPlaceHolder>
30   
31                   </td>
32   
33               </tr>
34   
35               <tr>
36   
37                   <td height="300" width="25%">
38   
39                       <asp:ContentPlaceHolder ID="LeftContent" runat="server">
40   
41                       </asp:ContentPlaceHolder>
42   
43                   </td>
44   
45                   <td>
46   
47                       <asp:ContentPlaceHolder ID="CenterContent" runat="server">
48   
49                       </asp:ContentPlaceHolder>
50   
51                   </td>
52   
53                   <td width="25%">
54   
55                       <asp:ContentPlaceHolder ID="RightContent" runat="server">
56   
57                       </asp:ContentPlaceHolder>
58   
59                   </td>
60   
61               </tr>
62   
63               <tr>
64   
65                   <td colspan="3" style="height: 80px">
66   
67                       <asp:ContentPlaceHolder ID="CopyrightContent" runat="server">
68   
69                       </asp:ContentPlaceHolder>
70   
71                   </td>
72   
73               </tr>
74   
75           </table>
76   
77       </form>
78   
79   </body>
80   
81   </html>
82 

在 Design 状态下我们可以看到如下效果:
有了 MasterPage 后我们该如何使用?光上面所说的根本解决不了任何问题。下面看看如何使用:
首先建立一个新的 aspx 页面,记得把 Select Master Page 项选上:

此时点击 Add 后会谈出下面这个窗口:

由于目前只有一个 MasterPage 文件,所以只能选择它,确定后新的 Default2.aspx 页面被建立,这个时候你会发现 Default2.aspx 页面中没有标准的 html 页面的格式,取而代之的是 asp.net 控件 Content , Default2.aspx 中的代码如下:
 1  <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %>
 2   
 3   <asp:Content ID="Content1" ContentPlaceHolderID="TopContent" Runat="Server">
 4   
 5   </asp:Content>
 6   
 7   <asp:Content ID="Content2" ContentPlaceHolderID="LeftContent" Runat="Server">
 8   
 9   </asp:Content>
10   
11   <asp:Content ID="Content3" ContentPlaceHolderID="CenterContent" Runat="Server">
12   
13   </asp:Content>
14   
15   <asp:Content ID="Content4" ContentPlaceHolderID="RightContent" Runat="Server">
16   
17   </asp:Content>
18   
19   <asp:Content ID="Content5" ContentPlaceHolderID="CopyrightContent" Runat="Server">
20   
21   </asp:Content>
22   
23   
24 
注意观察一下,在 <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %> 里多了一个 MasterPageFile="~/MasterPage.master" 项,这表明这个页面使用 MasterPage.master
, 该文件存放在与该页面相同的目录下 ( 当有多个 MasterPage 文件时你也可以新建立一个目录方便管理 ) 。记得刚才在 MasterPage.master 中的设置吗,我们定义了五个 ContentPlaceHolder , ID 分别是 TopContent , LeftContent , CenterContent , RightContent , CopyrightContent ,在 Default2.aspx 页面下的 Content 控件里,有一个属性就是 ContentPlaceHolderID ,该字段表明该 Content 控件中的内容代替 ID 指向的 ContentPlaceHolder 占位控件,这就是真的 “ 霸主 ” 了。这样一来,页面布局就使用 MasterPage.master 中的,而内容就使用 Default2.aspx 中 Content 控件下的,因此你在 Default2.aspx 中找不到 Html 页面的基本格式标记,如 <head> 、 <body> 。看一下 Design 下 Default2.aspx 会是什么样子:

和 MasterPage.master 很像,但又不同,因为除了 Content 控件占用的地方是可以编辑的外其他地方都是不可以编辑的。
现在可以总结 MasterPage 的作用了, MasterPage 其实是一种模板,它可以让你快速的建立相同页面布局而内部不同的网页,如果一个网站有多个 MasterPage ,那么新建 aspx 文件的时候就可以选择需要实现页面布局的 MasterPage 。另外,在你没有使用 MasterPage 之前,如果 N 个相同的页面布局需要改动成另外一个样式,那么你就要做很多无聊而又不得不做的工作,对 N 个页面进行一一更改,如果使用了 MasterPage ,你只要改动一个页面也就是 MasterPage 文件就可以了。还有,你是否发现你要要部署的 web 程序越来越大,使用 MasterPage 在一定程度上会减小 web 程序的大小,因为所有的重复的 html 标记都只有一个版本。

在 PS4.0 中的应用 .

如图所示 : 在在 PS4.0 中所使用的 MasterPage.master. 图中所显示的是 content 控件

在 SignIn.aspx 中的应用 .
代码如下 :
<%@ Page AutoEventWireup="true" Language="C#" MasterPageFile="~/MasterPage.master"
    Title="Sign In" %>
<asp:Content ID="cntPage" runat="Server" ContentPlaceHolderID="cphPage">

在 NewUser.aspx 中的使用
代码如下 :
<%@ Page AutoEventWireup="true" Language="C#" MasterPageFile="~/MasterPage.master" Title="New User" %>
<asp:Content ID="cntPage" ContentPlaceHolderID="cphPage" Runat="Server" EnableViewState="false">

母版页和内容页的使用相关推荐

  1. 引用asp.net母版页后,母版页和内容页的页面事件执行顺序

    如下,经测试得到的执行步骤: 第01步.内容页的 Page_PreInit 第02步.母版页的 Page_Init 第03步.内容页的 Page_Init 第04步.内容页的 Page_InitCom ...

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

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

  3. ASP母版页与内容页不同目录 链接问题

    由于母版页给网站的开发带来了很多的便利,但是同时也存在一个非常大的缺陷,就是母版页与内容页在不同目录下时,会出现应用js,css,图片等失效的问题,通过前面两篇文章基本解决了js.css.图片的问题, ...

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

    Asp.Net母版页和内容页运行机制 来自森大科技官方博客  http://www.cnsendblog.com/index.php/?p=96 从上面的讲解中可以看出,单独的母版页是不能被用户所访问 ...

  5. ASP.NET母版页和内容页之间如何互相传值?

    我们在asp.net中创建一个完整的母版页之后,接下来必然要创建内容页.从用户访问的角度来讲,内容页与最终结果页的访问路径相同,这好像表明二者是同一文件,实际不然.结果页是一个虚拟的页面,没有实际代码 ...

  6. [摘自MSDN] ASP.Net2.0学习 [1] 母版页 7 : 母版页和内容页中的事件

    ASP.NET ASP.NET 母版页和内容页中的事件 母版页和内容页都可以包含控件的事件处理程序.对于控件而言,事件是在本地处理的,即内容页中的控件在内容页中引发事件,母版页中的控件在母版页中引发事 ...

  7. asp.net C#母版页和内容页事件排版加载顺序生命周期

    asp.net C#母版页和内容页事件排版加载顺序生命周期 关于ASP页面Page_Load发生在事件之前而导致的问题已经喜闻乐见,对于问题的解释也很全面,但是如何解决问题则较少有人说明,我就再 简单 ...

  8. php 母版页,.NET_ASP.NET 2.0 中的创建母版页,  虽然母版页和内容页功能 - phpStudy...

    ASP.NET 2.0 中的创建母版页 虽然母版页和内容页功能强大,但是其创建和应用过程并不复杂.本节和下一节将以创建如图1所示示例为例,向读者详细介绍,使用Visual Stuido 2005创建母 ...

  9. ASP.NET:母版页与内容页

    ASP.NET:验证控件 ASP.NET:母版页与内容页 ASP.NET:主题中的皮肤和样式表 一.使用多种方式为内容页加载母版页 默认情况下是给单个内容页指定一个母版页加载,当多个内容页需加载到同一 ...

最新文章

  1. 关于 ulimit -SHn 65535
  2. ios wkwebview弹框_iOS WKWebView的javascript alert 不弹的解决方案
  3. 剑指offer 面试题三 找出数组中重复的数字
  4. 面向对象基础及UML建模语言
  5. HTML CSS样式表布局
  6. html里写js ajax吗,js、ajax、jquery的区别是什么?
  7. Win11系统无法安装GPT分区的解决方法
  8. (40)System Verilog随机函数$random示例
  9. 表单html遇到的问题及处理,Html表单中遇到的问题
  10. 离散数学课程对应目录
  11. java彩票程序_java程序设计 彩票购买抽奖程序 团队博客
  12. 银联在线支付B2C UnionPay.NET
  13. 交换芯片CPSS-MARVELL 98DXX交换处理流程
  14. 家里6只猫,我是如何分辨品种?前端程序员的AI识猫
  15. iPhone高清语音功能iMessage对移动运营商产生严重威胁
  16. 1050: 找出直系亲属
  17. 计算机硬盘配置参数错误怎么办,电脑提示移动硬盘参数错误的解决方法
  18. 毕业论文写作中致谢词的常见写法及优秀范文
  19. 周纪五 赧王下四十三年(己丑、前272)——摘要
  20. 2021-06-18杭电ACM-LCY算法进阶培训班-专题训练16

热门文章

  1. 苹果xr配置_定了!苹果发布会9月11日
  2. 数据库 读写分离 原理
  3. uniapp如何引入colorUI
  4. 第十二届蓝桥杯 2021年省赛真题 (Java 大学B组) 第一场
  5. 如何隐藏CAD图层?怎么显示隐藏的CAD图层?
  6. 【论文简述及翻译】MVSNet:Depth Inference for Unstructured Multi-view Stereo(ECCV 2018)
  7. Typora + PicGo + 七牛云图床
  8. mysql按半小时分组
  9. 微信小游戏SDK,全方位解读
  10. python程序设计搜题软件_智慧职教云课堂APPPython程序设计(常州工业职业技术学院)期末考试搜题公众号答案...