ASPNET应用开发与实战第10章 母版页的使用
ASPNET网络程序设计教程第10章 样式和主题
主要步骤
打开“添加新项”对话框，如图模板列表中选 择“母版页”项，在“名称”文本框中将其命名为 “MasterPage.master”。
接下来设计“母版页”，假设要设计一个论坛系统，该论坛最上 部显示论坛基本信息，最下部显示版权信息，中间部分为动态内容， 可以使用表格进行布局，在动态内容的地方使用 contentplaceholder 占位即可。如修改页面的<form></form>内部，具体代码实现见如下。
10.2.2 CSS的基本语法
CSS 的 定 义 是 由 3 部 分 构 成 ： 选 择 符 （ selector ） ， 属 性 （ properties ） 和 属 性 的 取 值 （value），其语法如下: selector {property: value} (选择符 {属性:值}) 选择符是可以是多种形式，一般是要定义样式 的 HTML标记，如 BODY、 P、 TABLE等，可以通 过此方法定义它的属性和值，属性和值要用冒号隔 开。例如， body {color: black}，此例的效果是使 页面中的文字为黑色。
<form id="form1" runat="server"> <table width="748px" cellspacing="0" cellpadding="5" border="0" align="center"> <tr style="height:100px" align="center"> <td>论坛基本信息</td> </tr> <tr> <td><asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> </asp:contentplaceholder></td> </tr> <tr style="height:20px" align="center"> <td>论坛版权信息</td> </tr> </table> </form>
母板页
母版页概述使用 母版页可以为应用程序中的页创建一致的布局。
单个母版页可以为应用程序中的所有页（或一组页）定义所需的外观和标准行为。
然后可以创建包含要显示的内容的各个内容页。
当用户请求内容页时，这些内容页与母版页合并以将母版页的布局与内容页的内容组合在一起输出。
母版页的工作原理母版页实际由两部分组成，即母版页本身与一个或多个内容页。
演练：在Visual Web Developer 中创建和使用 母版页本演练阐释如何创建一个母版页和几个内容页。
母版页使您可以创建一个页面布局（模板页），然后创建各个页面，这些页面包含的内容在运行时与母版页合并。
创建网站如果已经在Visual Web Developer 中创建一个网站（例如，通过执行演练：在Visual Web Developer 中创建基本网页中的步骤创建），可以使用该网站并跳至下一节“创建母版页”。
否则，按照下面的步骤创建一个新的网站和网页。
创建文件系统网站打开Visual Web Developer。
在“文件”菜单上单击“新建网站”。
出现“新建网站”对话框。
在“Visual Studio 已安装的模板”之下单击“ 网站”。
在“位置”框中输入要保存网站页面的文件夹的名称。
例如，键入文件夹名“C:\WebSites”。
在“语言”列表中，单击您想使用的编程语言。
单击“确定”。
Visual Web Developer 创建该文件夹和一个名为Default.aspx 的新页。
创建母版页母版页是用于设置页面外观的模板。
在本节中，将首先创建一个母版页。
然后，使用表格来对母版页进行布局，此母版页具有一个菜单、一个徽标和一个页脚，这些内容将在站点的每个页面中出现。
还将使用内容占位符，这是母版页中的一个区域，可以使用内容页中的信息来替换此区域。
创建母版页在解决方案资源管理器中，右击网站的名称，然后单击“添加新项”。
在“Visual Studio 已安装的模板”之下单击“母版页”。
ASP.NetMVC布局页、模板页使用方法详细介绍
MVC布局页、模板页使⽤⽅法详细介绍⼀、Views⽂件夹 -> Shared⽂件夹下的 _Layout.cshtml 母版页@RenderBody当创建基于_Layout.cshtml布局页⾯的视图时，视图的内容会和布局页⾯合并，⽽新创建视图的内容会通过_Layout.cshtml布局页⾯的@RenderBody()⽅法呈现在标签之间。
@RenderPage从名称可以猜出来这个⽅法是要呈现⼀个页⾯。
⽐如⽹页中固定的头部可以单独放在⼀个共享的视图⽂件中，然后在布局页⾯中通过这个⽅法调⽤，⽤法如下：@RenderPage(“~/Views/Shared/_Header.cshtml”)带参数@RenderPage(“~/Views/Shared/_Header.cshtml”,new{parm="my",parm2="you")调⽤页⾯获取参数：//获取 RenderPage() 传递过来的参数@PageData["param"]@RenderSection布局页⾯还有节（Section）的概念，也就是说，如果某个视图模板中定义了⼀个节，那么可以把它单独呈现出来为了防⽌因缺少节⽽出现异常，可以给RenderSection()提供第2个参数：@RenderSection("head", false)或@if (IsSectionDefined("head")){@RenderSection("head", false)}else{<p>SubMenu Section is not defined!</p>}代码如下：<!DOCTYPE html><html><head><title>@ViewBag.Title</title><link href="@Url.Content(" rel="external nofollow" ~/Content/Site.css")" rel="stylesheet" type="text/css" /><script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>@RenderSection("head", required: true)@*View页⾯⾃定义特定js/css使⽤*@</head><body>@RenderPage("~/Views/Shared/_Header.cshtml")@RenderBody()</body></html>⼆、创建视图，使⽤母版页代码如下：@{ViewBag.Title = "Index";Layout = "~/Views/Shared/_Layout.cshtml";}<h2>Index</h2>@section Head{<script type="text/javascript">$(function () {alert("hello jquery");});</script>}<p>执⾏C#普通语法</p><br />@DateTime.Now.Date.ToShortDateString()<p>执⾏C#语句段</p>@{List<string> list = new List<string> { "Mvc3", "Razor" };list.Add(".Net4");}<ul>@foreach(string s in list){if (string.IsNullOrEmpty(s)){<li>空</li>}else{<li>@s</li>}}</ul>三、⽣成页⾯的源代码<!DOCTYPE html><html><head><title>Index</title><link href="/Content/Site.css" rel="external nofollow" rel="stylesheet" type="text/css" /><script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script><script type="text/javascript">$(function () {alert("hello jquery");});</script></head><body><h2>Index</h2><p>执⾏C#普通语法</p><br />2013/3/11<p>执⾏C#语句段</p><ul><li>Mvc3</li><li>Razor</li><li>.Net4</li></ul></body></html>四、@Html.PartialPartial 每次都会创建⾃⼰的 TextWriter 实例并且把内容缓存在内存中. 最后把所有 writer输出的内容发送到⼀个 MvcString对象中更多时候我们会使⽤ @{ Html.RenderPartial("Details"); } ⽽不是@Html.PartialHtml.RenderPartial()与@Html.Partial的区别Html.RenderPartial 直接输出⾄当前 HttpContext（因为是直接输出，所以性能好）。
ASPNET中的CSS、主题和母版页
主题和母版页（层叠样式表、主题）整合网站的第一步是采用一组一致的可视化样式。
CSS 为格式化Web 页面提供了跨平台的解决方案，它可以和HTML 或则XHTML 一起工作并几乎被所有的现代浏览器支持。
使用CSS 时，可以利用样式表定义一组预定义格式，然后通过CssClass 属性把这些样式表链接到适当的控件。
样式表由规则组成，每个规则定义了Web 页面中的一个元素应该如何被格式化。
每个规则的名字包含两部分：1.点号前面表明规则要作用的HTML 元素，点号前面什么都没有表示这个规则可作用于所有的HTML 元素。
2.点号后面的部分是一个唯一的名称，叫做CSS 类名，类名区分大小写。
.heading1{font-weight:bold;font-size:large;color:Lime;font-family:Verdana, Arial, Sans-Serif;}还可以创建自动应用到HTML 标签的规则，只要把标签名作为规则名即可：h2{color: Red;}这种自动的样式表看起来很有用，但它在 里却不是那么方便。
通常你直接处理的是控件而不是独立的HTML 标签。
有时候你总是不能确定将会用什么标签呈现某个控件，因此，最好通过类名显示指定规则。
如果你不喜欢手工书写CSS 规则，VS 允许使用设计器来构建。
只要添加一个规则的声明，在花括号中点击鼠标右键，选择创建样式即可。
一个典型的样式表会定义大量的规则，样式表常用于正式定义网站用户界面主要的格式，参考下面的样式表：body{font-family: Verdana, Arial, Sans-Serif;font-size: small;}.heading1{font-weight: bold;font-size: large;color: Lime;}.heading2{font-weight: bold;font-size: medium;font-style: italic;color: #C0BA72;}.blockText{padding: 10px;background-color: #FFFFD9;border-style: solid;border-width: thin;}VS 中选择视图，其他窗口，文档大纲，可以清楚的罗列当前样式表中所有的规则，可以迅速定位到某一规则：要在Web 页面里使用某个规则，首先页面要链接到适当的样式表，可在<head> 节中添加如下代码（可在VS中拖动样式表进入head）：<link href="MyStyleSheet.css"rel="stylesheet"type="text/css"/><div><!-- 对于普通控件应用样式,可设置 CssClass 属性.--><asp:Label ID="Label1"runat="server"Text="This Label uses the heading1 style."CssClass="heading1"></asp:Label><!-- 对于一段普通的 HTML,要使用 class 特性 --><div id="paragraph"runat="server"class="blockText"><p>This paragraph uses the blockText style.</p></div></div>也可通过“应用样式”窗口来指定具体的规则应用（视图->应用样式），这个设计可以实现一个预览的效果，不过注意以下几点：∙如果选中的是Web 控件，它添加或修改CssClass 属性。
ASP.NET中利用母版页实现网站的快速结构化
中利用母版页实现网站的快速结构化网站建设中，利用母版页实现网站的快速结构化布置，并在对网站网页的通用功能进行集中处理基础上，有效节能网页开发与网站建设的维护工作量，是当前网站建设中研究和关注的重点内容。
本文通过有关概念和理论简述，对中利用母版页实现网站快速结构化的方法原理进行研究，以供参考。
标签：;母版页;网站;快速;结构化;探讨网站建设中，网页设计的主要内容包含网站logo、标题以及导航菜单或功能按钮、网页的页面主体与页脚部分等，需要设计人员结合网站建设的要求，根据网页设计的要求，对其整体风格与布局进行准确把握，同时在对网页之间的公共部分进行单独处理基础上，有效满足网站建设以及网页设计的各种需求，促进网站建设与网页设计的质量效果提升。
根据上述对网站建设以及网站网页设计有关问题的论述，可以看出网站建设中，为满足网页设计的具体要求，需要网页各部分以及网页相互之间在一定的组织形式遵循基础上，形成网站建设的结构化体系，从而达到相应的网站建设与应用目的。
其中，在网站的结构化实现中，为确保网站结构的合理性与有效性，传统建设中是采用框架集技术实现的，即通过将一个页面空间划分成多个区域，然后在各区域进行独立网页显示。
需要注意的是，传统的网站建设中所采用的框架集技术在实际应用中存在着较为突出的问题，对网站建设的结构化设计十分不利，因此，本文将对中利用母版页实现网站的快速结构化的方法和原理进行研究，以供参考。
1 有关理论和概念简述1.1母版页及其概念理论分析中母版页作为一项新增技术，其中，网站建设中，母版页能够对网站“模板”进行定义，为其网页设计提供一致的风格与布局支持，从而在网站建设的网页设计中，通过一次修改就能够在具体实践中进行应用。
值得注意的是，与传统网站建设中网页设计所应用的框架集技术不同，母版页不仅对框架集技术的特征优势有很好的继承和实现，而且能够将一个页面空间划分成內容相对不变或者是内容可变的一个与多个区域，其中，内容不变的区域能够对网页的公共部分进行展示，而内容可变的区域则能够对具体内容进行呈现，并且是是通过另一个“内容页”页面文件进行独立存放的。
母版页的使用
母版页的使⽤⼀、母版页简介使⽤母版页可以为应⽤程序中的页创建⼀致的布局。
单个母版页可以为应⽤程序中的所有页（或⼀组页）定义所需的外观和标准⾏为。
母版之所以称为母版，就是将⼤部分⽹页上固定内容，⽐如导航栏，版权声明栏放到⼀个母版⾥，然后编写⽹页时只需要调⽤母版就⾏了，内容页就不需要再写那些内容了。
不需要将相同的部分再写⼀遍。
母版中可以标记多个asp:ContentPlaceHolder。
母版页仅仅是⼀个页⾯模板，单独的母版页是不能被⽤户所访问的。
单独的内容页也不能够使⽤。
母版页和内容页有着严格对应关系。
母版页中包含多少个ContentPlaceHolder控件，那么内容页中也必须设置与其相对应的Content控件。
当客户端浏览器向服务器发出请求，要求浏览某个内容页⾯时，引擎将同时执⾏内容页和母版页的代码，并将最终结果发送给客户端浏览器。
在中母版页有两种作⽤，⼀是提⾼代码的复⽤（把相同的代码抽出来），⼆是使整个⽹站保持⼀致的风格和样式。
母版页⽆法直接启动运⾏，需要套⽤的⼦页⾯启动把它带出来母版页的嵌套，⼀般⽤2层⾜够，最多3层<asp:ContentPlaceHolder ID="id" runat="server"> - 母版页中的位置预留<asp:Content ID="Content2" ContentPlaceHolderID="id" runat="Server"> - 填坑⼆、母版页的建⽴和使⽤1.母版页的建⽴添加新项-母版页在新建的母版页中⾃动⽣成了两个ContentPlaceHolder控件，其中⼀个在head区， ID是“head”；另⼀个在body区，默认ID是“ContentPlaceHolder1”，可以根据需要⾃⼰命名。
在内容页中，两个控件会变成与其相对应的Content控件，⽤户需在content内进⾏开发。
母版页
（2）母版页设计 页面结构图 页面Index.aspx由 4个部分组成： 页头、页尾、 内容1和内容2。
页头
内容1
内容2
页尾
2．内容页展名也为.aspx。
通过包含指向要使用的母版页的 MasterPageFile 属 性，在内容页的 @ Page 指令中建立绑定。内容页 代码清单如下： <asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="Footer" Runat="Server"> </asp:Content>
内容页的@ Page指令中的 MasterPageFile属性解
析为一个.master页，就可以将内容页和
母版页合并为一个单独的已呈现的页。
（c）内容页用做母版页的容器。在内容页中可以从
（2）应用母版页创建新页面 （一）在母版页任意位置右键，点击添 加内容页
（二）在解决方案资源管理器上新建新项，在 生成aspx页面时勾选“选择母版页”。
其中 @ Page 指令，该指令将该内容页绑定 到母版页。Content 控件并将这些控件映射 到母版页上的 ContentPlaceHolder 控件来创 建内容。
注意：
（a）可以创建多个母版页来为站点的不同部分定义 不同的布局，并可以为每个母版页创建一组不同的 内容页。 （b）母版页和内容页不必位于同一文件夹中。只要
asp.net母版页如何使用
母版页如何使⽤
计算机专业的很多同学临近毕业了，才着急怎么做⼀个毕业设计来进⾏答辩，很短的时间是不可能完成的，今天就先跟着⼩编的步伐，学习母版页的使⽤，快速掌握这个实⽤技巧，相信⼀定在⼤家的毕业设计过程中发挥巨⼤的作⽤。
⼯具/原料
Visual Studio 2008
⽅法/步骤
打开Visual Studio 2008，点击【⽂件】【打开⽹站】找到⽹站根⽬录⽂件夹，点击【打开】
在⽹站根⽬录上单击右键，选择【添加新项】
在弹出的【添加新项】选择【母版页】默认使⽤名称，点击【添加】
打开母版页的拆分界⾯，我们可以看见页⾯视图⾥⾯有⼀个【ContentPlaceHolder】元素
⽹页元素【ContentPlaceHolder】⾥⾯放置的是⼦页⾯的东西，我们每个页⾯不同的地⽅就使⽤这个，所以先复制⽹页元素到母版页
母版页代码
【 <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> ⼦页⾯内容
</asp:ContentPlaceHolder>】
⽤于显⽰不同页⾯差异部分
注意，母版页必须存放于⽹站根⽬录，以便随时调⽤
以上就是跟⼤家分享的母版页如何使⽤的图解教程，⼤家也可以结合之前这篇⽂章进⾏学习，可能会有意想不到的收货。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
说明： 上面代码中的ContentPlaceHolder控件为占位符控件，它定义的位置可替换为内容页出现的区域 。每个母版页中都可以包含一个或多个ContentPlaceHolder控件。
10.1.3
创建内容页
创建完母版页后，接下来需要创建内容页。内容页的创建与普通Web窗体类似，具体步骤如下： （1）在网站的解决方案下右击网站名称，在弹出的快捷菜单中选择“添加新项”命令。 （2）打开“添加新项”对话框，如图10-3所示，该对话框中选择“Web窗体”并为其命名，同时选 中“将代码放在单独的文件中”和“选择母版页”复选框。
10.1.2
创建母版页
母版页中包含的是页面的公共部分，因此，在创建母版页之前，必须判断哪些内容是页面的公 共部分。如图10-1所示为企业绩效管理系统的首页Index.aspx，该网页由4部分组成，即页头、页尾 、登录栏和内容页。经过分析可知，其中，页头、页尾和登录栏是企业绩效管理系统中的公共部分 ，而内容A是企业绩效管理系统的非公共部分，是Index.aspx页面所独有的。这时如果使用母版页和 内容页创建页面Index.aspx，那么必须创建一个母版页MasterPage.master和一个内容页Index.aspx ，其中，母版页包含页头、页尾和登录栏，内容页则包含内容A。
图10-1 企业绩效管理系统首页
创建母版页的具体步骤如下： （1）在网站的解决方案下右击网站名称，在弹出的快捷菜单中选择“添加新项”命令。 （2）打开“添加新项”对话框，如图10-2所示，选择“母版页”，默认名为MasterPage.master 。单击“添加”按钮即可创建一个新的母版页。
图10-2 “添加新项”对话框
1.母版页的使用 2.访问母版页的成员 3.综合实例——动态加载网站母版页
10.1
母版页的使用
10.1.1 10.1.2 10.1.3 10.1.4
母版页概述 创建母版页 创建内容页 嵌套母版页
10.1.1
母版页概述
母版页的主要功能是为应用程序创建统一的用户界面和样式，母版页由两部分构成，即 一个母版页和一个（或多个）内容页，这些内容页与母版页合并以将母版页的布局与内容页的内容 组合在一起输出。 使用母版页，简化了以往重复设计每个Web页面的工作。母版页中承载了网站的统一内容、设计 风格，减轻了网页设计人员的工作量，提高了工作效率。下面分别对母版页、内容页、母版页的运 行机制和优点进行介绍。 1．母版页 母版页是具有扩展名.master（如MyMaster.master）的文件，它是可以包括静态文本、 HTML元素和服务器控件的预定义布局。母版页由特殊的@Master指令识别，该指令替换了用于普通 .aspx页的@ Page指令。 2．内容页 内容页与母版页关系紧密，内容页主要包含页面中的非公共内容。通过创建各个内容页来定义母版 页中占位符控件的内容，这些内容页是绑定到特定母版页的页面（.aspx文件以及可选的代 码隐藏文件）。 注意：使用母版页时，必须首先创建母版页，然后再创建内容页。
第10章
本章要求： 及优点 母版页的运行机制 母版页及内容页的创建过程 嵌套母版页的使用 使用Master.FindControl方法访问母版页上的控件 引用@MasterType指令访问母版页上的属性 如何动态加载网站的母版页
第10章
主要内容
母版页的使用
3．母版页运行机制 在运行时，母版页按照下面的步骤处理： （1）用户通过输入内容页的URL来请求某页。 （2）获取该页后，读取@Page指令。如果该指令引用一个母版页，则也读取该母版页。如果是第 一次请求这两个页，则两个页都要进行编译。 （3）包含更新的内容的母版页合并到内容页的控件树中。 （4）各个Content控件的内容合并到母版页中相应的 ContentPlaceHolder 控件中。 （5）浏览器中呈现得到的合并页。 4．母版页的优点 使用母版页，可以为应用程序页面创建一个通用的外观。开发人员可以利用母版页创 建一个单页布局，然后将其应用到多个内容页中。母版页具有以下优点： 使用母版页可以集中处理页的通用功能，以便只在一个位置上进行更新，在很大程度上提高 了工作效率。 使用母版页可以方便地创建一组公共控件和代码，并将其应用于网站中所有引用该母版页的 网页。例如，可以在母版页上使用控件来创建一个应用于所有页的功能菜单。 可以通过控制母版页中的占位符ContentPlaceHolder对网页进行布局。 由内容页和母版页组成的对象模型，能够为应用程序提供一种高效、易用的实现方式，并且 这种对象模型的执行效率比以前的处理方式有了很大的提高。
（3）母版页MasterPage.master中的默认代码如下：
%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" /TR/xhtml1/DTD/xhtml1-transitional.dtd"> html xmlns="/1999/xhtml"> head runat="server"> <title>无标题页</title> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> /head> body> <form id="form1" runat="server"> <div> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> /body> /html>