虽然母版页和内容页功能强大但是其创建和应用过程并不复杂本节和下一节将以创建如图所示示例为例向读者详细介绍使用Visual Stuido 创建母版页和内容页的方法以及相关知识本节的重点是创建母版页的方法
母版页中包含的是页面公共部分即网页模板因此在创建示例之前必须判断哪些内容是页面公共部分这就需要从分析页面结构开始图所示显示的是一个页面截图在下文中暂称该页面名为Indexaspx并且假设其为某网站中的一页通过分析可知该页面的结构如图所示
图 页面结构图
页面Indexaspx由个部分组成页头页尾内容和内容其中页头和页尾是Indexaspx所在网站中页面的公共部分网站中许多页面都包含相同的页头和页尾内容和内容是页面的非公共部分是Indexaspx页面所独有的结合母版页和内容页的有关知识可知如果使用母版页和内容页来创建页面Indexaspx那么必须创建一个母版页MasterPagemaster和一个内容页Indexaspx其中母版页包含页头和页尾等内容内容页中则包含内容和内容
使用Visual Studio 创建一个普通Web站点然后在站点根目录下创建一个名为MasterPagemaster的母版页由于这是一个添加新文件的过程因此单击网站命令菜单中的添加新项选项可以打开如图所示的窗口
图 添加母版页
由于此例创建的是母版页因此需要选择母版页图标并且设置文件名为MasterPagemaster需要注意的是该窗口中还有一个复选框项将代码放在单独的文件中默认情况下该复选框处于选中状态表示Visual Studio 将会为MasterPagemaster文件应用代码隐藏模型即在创建MasterPagemaster文件的基础上自动创建一个与该文件相关的MasterPagemastercs文件如果不选中该项那么只会创建一个MasterPagemaster文件而已建议读者选取该项
在创建MasterPagemaster文件之后接着就可以开始编辑该文件了根据前文说明母版页中只包含页面公共部分因此MasterPagemaster中主要包含的是页头和页尾的代码具体源代码如下所示
母版页MasterPagemaster文件源代码
＜%@ Master Language=C# AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage %＞
＜!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN transitionaldtd＞
＜html xmlns=＞
＜head id=Head runat=server＞
＜title＞＜/title＞
＜link rel=stylesheet type=text/css /＞
＜/head＞
＜body background=images/pixi_limegif leftmargin= topmargin=＞
＜form id=form runat=server＞
＜div align=center＞
＜table width= height=% border= cellpadding= cellspacing= bgcolor=#FFFFFF＞
＜tr＞
＜td width= height= align=right valign=top＞
＜img src=images/topicgif＞＜/td＞
＜/tr＞
＜tr＞
＜td width= height= align=right valign=bottom background=images/nav_bggif＞＜/td＞
＜/tr＞
＜tr＞
＜td width= height= align=right valign=top＞＜img src=images/toppicgif width= height=＞＜/td＞
＜/tr＞
＜tr＞
＜td width= valign=top＞
＜table width=% border= cellspacing= cellpadding=＞
＜tr＞
＜td width= valign=top＞
＜asp:ContentPlaceHolder ID=ContentPlaceHolder runat=server＞＜/asp:ContentPlaceHolder＞
＜/td＞
＜td valign=top align=left＞
＜asp:ContentPlaceHolder ID=ContentPlaceHolder runat=server＞＜/asp:ContentPlaceHolder＞
＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜/tr＞
＜tr＞
＜td width= height= background=images/pixi_limegif＞＜img src=images/pixi_limegif width= height=＞＜/td＞
＜/tr＞
＜tr＞
＜td width= height= align=center class=baseline＞©Copyright StudyCom ＜/td＞
＜/tr＞
＜/table＞
＜/div＞
＜/form＞
＜/body＞＜/html＞
以上是母版页MasterPagemaster的源代码与普通的aspx源代码非常相似例如包括＜html＞＜body＞＜form＞等Web元素但是与普通页面还是存在差异差异主要有两处（粗体代码所示）差异一是代码头不同母版页使用的是Master而普通aspx文件使用的是Page除此之外二者在代码头方面是相同的差异二是母版页中声明了控件ContentPlaceHolder而在普通aspx文件中是不允许使用该控件的在MasterPagemaster的源代码中共声明了两个ContentPlaceHolder控件用于在页面模板中为内容和内容占位ContentPlaceHolder控件本身并不包含具体内容设置仅是一个控件声明
图所示显示了MasterPagemaster文件的设计时视图
图 母版页设计时视图
使用Visual Studio 可以对母版页进行编辑并且它完全支持所见即所得功能无论是在代码模式下还是设计模式下使用Visual Studio 编辑母版页的方法与编辑普通aspx文件是相同的图中两个矩形框表示ContentPlaceHolder控件开发人员可以直接在矩形框中添加内容所设置内容的代码将包含在ContentPlaceHolder控件声明代码中需要注意的是这种方法是不规范的因此不推荐使用这种做法
