文章教程

第7章ASP.NET母版页

8/31/2020 9:50:22 PM 人评论 次浏览

第7章　ASP.NET母版页

母版页是一个页面模板，可以使网站的布局和行为保持一致，而且可以简化网站维护过程。它可以在单个地方定义站点中所有页面的全局外观。如果需要修改站点的布局，只需修改母版页，基于此类母版页的页面就会自动进行相应的修改。本章我们来详细介绍ASP.NET中的母版页。

7.1　创建一个母版页

母版页包括母版页和内容页两部分内容。单独的母版页或者内容页是不能被用户访问的。母版页和内容页有着严格的对应关系。母版页中包含多少个内容区域，内容页中也必须设置与其相对应的内容。当浏览器向服务器发出请求，要求浏览某个页面时，引擎会同时执行母版页和内容页的代码。最后将执行结果生成的页面发送给浏览器。本节我们来学习如何创建母版页。

7.1.1　创建母版页和内容页

she知识点讲解：光盘\视频讲解\第7章\创建母版页和内容页.wmv

母版页的使用和普通页面类似，可以可视化设计，还可以编写后置代码。母版页中也可以放置图形、控件和后置代码等，它的扩展名为.master，需要被其他页面使用后才可以进行显示。内容页的创建和母版页的创建类似。本节我们来创建母版页和内容页。

【示例7-1】下面演示母版页和内容页的创建及其使用方式。

（1）创建一个名称为“创建母版页示例”的网站。

（2）在该网站上单击右键，在弹出的快捷菜单中选择“添加新项”命令。打开“添加新项”对话框，选择“母版页”模板，添加一个名称为MasterPage.master的母版页，如图7.1所示。

187-1

图7.1　“添加新项”对话框

（3）单击“添加”按钮后，Visual Studio 2012自动产生如下母版页代码：

示例7-1：创建母版页

源码路径：光盘\源文件\Chapter7\示例7-1\创建母版页示例\MasterPage.master

188-1

母版页中使用@Master作为声明指令，而且包含了标准的XHTML文档标记。在母版页中，Visual Studio 2012自动添加了两个ContentPlaceHolder控件（ContentPlaceHolder控件只能用于母版页中），一个位于<head>区域，一个位于<body>区域。第一个内容区域控件是允许页控件在该区域添加元数据信息或样式表信息；第二个内容区域控件是为一个容器应用不同的内容项。在母版页中，可以根据需要在不同的位置添加多个区域控件。

（4）添加一个样式表文件，命名为StyleSheet.css。样式表文件的代码如下所示：

示例7-1：创建母版页

源码路径：光盘\源文件\Chapter7\示例7-1\创建母版页示例\StyleSheet.css

188-2

将样式表文件应用于母版页，放在ID值为head的ContentPlaceHolder控件中。

（5）添加一个内容页（Web窗体），命名为Default.aspx。此时在“添加新项”对话框的底部选中“选择母版页”复选框，如图7.2所示。

189-2

图7.2　“添加新项”对话框

单击“添加”按钮后，打开“选择母版页”对话框，如图7.3所示。在“文件夹内容”列表框中选择在第四步创建的MasterPage.master文件。

189-3

图7.3　“选择母版页”对话框

然后单击“确定”按钮，Visual Studio 2012将会添加内容页代码：

190-1

内容页的源码没有<html>等标签，@Page指令使用MasterPageFile属性指定母版页。内容页中的Content控件对应母版页中的ContentPlaceHolder控件。

（6）在设计视图中，在顶部的Content控件中添加CSS样式文件。在左侧的Content控件中添加一个ListBox控件，添加几个列表项，在右侧的Content控件中添加一个Label控件。具体代码如下：

示例7-1：创建母版页

源码路径：光盘\源文件\Chapter7\示例7-1\创建母版页示例\Default.aspx

190-2

添加好控件后，在代码后置文件中为ListBox控件添加SelectedIndexChanged事件。代码如下：

示例7-1：创建母版页

源码路径：光盘\源文件\Chapter7\示例7-1\创建母版页示例\Default.aspx.cs

191-1

运行结果如图7.4所示。

191-2

图7.4　运行结果图

注意：在实际使用中，开发人员可以创建多个应用母版页的内容页，显示不同的内容。当网站的外观需要发生改变时，仅需改变母版页即可，很大程度上节省了网站的维护时间。

7.1.2　母版页的相关内容

she知识点讲解：光盘\视频讲解\第7章\母版页的相关内容.wmv

母版页的出现使得网站的一致性很容易实现。母版页有一些自己特有的内容，本小节我们来学习母版页的相关内容。

1. @Master指令

@Master指令非常类似于@Page指令，但@Master指令用于母版页（.master）。在使用@Master指令时，要指定和站点上的内容页面一起使用的模板页面的属性。内容页面（使用@Page指令建立）可以继承master页面上的所有master内容（在master页面上使用@Master指令定义的内容）。@Master指令的可用属性如表7-1所示。

表7.1　@Master指令的可用属性

192-1

注意：尽管这两个指令是类似的，但@Master指令的属性比@Page指令少。

2. ContentPlaceHolder控件与Conent控件

ContentPlaceHolder控件用于母版页中，定义内容区域。Content控件用于内容页中，保存文本、标记和服务器控件以呈现给母版页中的ContentPlaceHolder控件。ContentPlaceHolder控件如果放在母版页中，那么它的内容是通过Content控件来链接的，是可编辑的。而Content控件如果放在母版页中，那么它的内容页中没有东西来对其进行链接，是不可编辑的。

7.2　母版页和相对路径

she知识点讲解：光盘\视频讲解\第7章\母版页和相对路径.wmv

使用母版页设计页面时，除了文本信息，还需要添加图片或者其他资源。通常情况下，将一组相关的资源放在一个文件夹内。当母版页和内容页不在同一个文件夹下时，就会出现问题。本节我们来了解母版页和相对路径的关系。

1. 找出问题所在

【示例7-2】下面我们通过示例说明当母版页和内容页不在同一个文件夹下会出现什么问题。

（1）创建一个网页，命名为“母版页和相对路径”。

（2）添加一个CSS层叠样式表。该样式表代码如下：

示例7-2：母版页和相对路径

源码路径：光盘\源文件\Chapter7\示例7-2\母版页和相对路径\StyleSheet.css

193-1

（3）在网站中新建一个文件夹MasterPage。并在该文件夹中加入一幅图片1.jpg和一个母版页MasterPage.master。在母版页中使用<img>标签引用图片文件1.jpg。具体代码如下：

示例7-2：母版页和相对路径

源码路径：光盘\源文件\Chapter7\示例7-2\母版页和相对路径\MasterPage\MasterPage.maste

193-2

此时，我们看母版页的设计视图，图片可以正常显示，如图7.5所示。

194-2

图7.5　母版页设计视图

（4）在网站的根目录下创建一个使用该母版页的内容页，命名为Default.aspx。在内容页中图片1.jpg将不能正常显示，如图7.6所示。

194-3

图7.6　内容页设计视图

产生上述问题的原因是：母版页中图片的路径是相对于母版页文件的。当不同文件夹的内容页应用了该母版页后，位置发生了改变。而图片依然引用到原来的位置，因此文件不能被正常查找到，所以图片显示异常。对于其他的静态html元素，也有类似的问题。

2. 解决问题

为了解决这种问题，开发人员可以更改母版页的图片路径，显然这种做法会给程序开发带来很大的不便。因此，可以将<img>标签变成服务器端的标签，为它添加runat=“server”属性。这样的话ASP.NET将使用该属性创建一个HtmlImage的服务器端对象。该对象会在应用了母版页的Page对象被实例化之后创建。所以ASP.NET将能够对相对路径进行必要的转换，代码如下：

示例7-2：母版页和相对路径

源码路径：光盘\源文件\Chapter7\示例7-2\母版页和相对路径\Default.aspx

195-1

此时，无论是在内容页的设计视图还是运行时，图片都会正常显示，如图7.7和图7.8所示。

195-2 195-3
图7.7　设计视图 图7.8　运行时

注意：如果想使用普通的html标签，开发人员必须将相对路径更改为完整的网站路径。一般情况下不建议使用此方法。

7.3　在Web.config中配置母版页

she知识点讲解：光盘\视频讲解\第7章\在Web.config中配置母版页.wmv

母版页除了可以在页面级别指定外，还可以在应用程序级别或文件夹级别中指定。因此，可以在Web.config配置文件中定义母版页，这样母版页就可以被应用到网站中所有的文件或者是某个指定文件夹的文件。具体的配置代码如下：

196-1

注意：在Web .config配置文件中设置了masterPageFile属性后，创建内容页时，开发人员可以不在@Page指令中指定MasterPageFile属性。

7.4　动态加载母版页

she知识点讲解：光盘\视频讲解\第7章\动态加载母版页.wmv

在项目开发中，有时应用程序希望能够根据特定的情形来动态地设置母版页。需要动态加载母版页的情形有两种：允许用户使用不同的母版页定制外观呈现；当与其他公司合作，需要调整页面使其与合作伙伴的网页外观相同。

开发人员可以通过Page类提供的MasterPageFile属性来为内容页设置母版页。母版页与内容页在页声明周期的早期进行合并，因此不能直接在内容页的Page_Load事件中设置母版页，而需要在Page.PreInit事件中动态加载母版页（Page.PreInit是页执行周期中的第一个事件）。

【示例7-3】下面演示如何动态加载母版页。

（1）创建一个网站，命名为“动态加载母版页”。

（2）在该网站中添加一个样式表文件StyleSheet.css，该文件具体代码如下：

示例7-3：动态加载母版页

源码路径：光盘\源文件\Chapter7\示例7-3\动态加载母版页\StyleSheet.css

196-2

（3）创建三个母版页，分别命名为MasterPage.master、MasterPage2.master和MasterPage3.master。母版页MasterPage.master的代码如下：

示例7-3：动态加载母版页

源码路径：光盘\源文件\Chapter7\示例7-3\动态加载母版页\MasterPage.master

197-1

母版页MasterPage2.master和MasterPage3.master与MasterPage.master相似。不同之处是在“你好，欢迎光临！”文本后面分别添加了“(母版页2)”和“(母版页3)”。

（4）添加一个内容页，命名为Default.aspx。该内容页应用的是母版页MasterPage.master。在该内容页右侧的Content中添加两个超链接，根据查询字符串的值分别指定两个不同的母版页。Default.aspx的内容如下：

示例7-3：动态加载母版页

源码路径：光盘\源文件\Chapter7\示例7-3\动态加载母版页\Default.aspx

198-1

在内容页的Page_PreInit事件中添加如下代码，来获取用户所选择的母版页并动态地进行切换。具体代码如下：

示例7-3：动态加载母版页

源码路径：光盘\源文件\Chapter7\示例7-3\动态加载母版页\Default.aspx.cs

198-2

运行结果如图7.9～图7.11所示。

199-1 199-2 199-3
图7.9　运行结果图（1） 图7.10　运行结果图（2） 图7.11　运行结果图（3）

在该示例中，在内容页的Page_PreInit事件中为Page类的MasterPageFile属性赋一个母版页文件。在运行时可以根据用户的选择动态地切换母版页。

7.5　母版页嵌套

she知识点讲解：光盘\视频讲解\第7章\母版页嵌套.wmv

母版页嵌套是指一个母版页可以引用其他的母版页，将形成多层的母版页。利用嵌套的母版页可以创建组件化的母版页。例如，大型站点可能包含一个用于定义站点外观的总体母版页。然后，不同的站点内容合作伙伴又可以定义各自的子母版页，这些子母版页引用站点母版页，并相应定义该合作伙伴的内容的外观。本节我们来学习母版页的嵌套。

嵌套的母版页扩展名依然是.master。子母版页通常会包含一些内容控件，这些控件将映射到父母版页（父母版页类似于父类）上的内容占位符。子母版页也有自己的内容占位符，可以用于显示其子页面提供的内容。

【示例7-4】下面演示母版页的嵌套。

（1）创建一个网名，名称为“母版页嵌套”。

（2）创建两个样式表文件，分别命名为StyleSheet.css和StyleSheet2.css。样式表StyleSheet.css（左）和StyleSheet2.css（右）代码如下：

示例7-4：母版页嵌套

源码路径：光盘\源文件\Chapter7\示例7-4\母版页嵌套\StyleSheet.css

光盘\源文件\Chapter7\示例7-4\母版页嵌套\StyleSheet2.css

200-1

（3）在网站上新建一个文件夹，名称为MasterPage。在MasterPage文件夹下创建两个母版页和一个图片文件1.jpg。两个母版页一个作为父母版页，一个作为子母版页。父母版页命名为MasterPage.master，子母版页命名为LayoutMaster.master。父母版页代码如下：

示例7-4：母版页嵌套

源码路径：光盘\源文件\Chapter7\示例7-4\母版页嵌套\MasterPage\MasterPage.master

200-2

子母版页添加时需要选中“添加新项”对话框右下角的“选择母版页”复选框。命名为LayoutMaster.master，然后单击“添加”按钮，如图7.12所示。

201-1

图7.12　添加子母版页

在“选择母版页”对话框中选择母版页MasterPage.master，如图7.13所示。

201-2

图7.13　“选择母版页”对话框

在子母版页中调用StyleSheet2.css样式，在每个布局中放置一个ContentPlaceHolder控件。子母版页LayoutMaster.master的代码如下：

示例7-4：母版页嵌套

源码路径：光盘\源文件\Chapter7\示例7-4\母版页嵌套\MasterPage\LayoutMaster.master

201-3

（4）添加一个使用子母版页的内容页Default.aspx。嵌套母版页的使用方式同普通母版页相似，在内容区域中添加相应的内容即可。Default.aspx具体代码如下所示：

示例7-4：母版页嵌套

源码路径：光盘\源文件\Chapter7\示例7-4\母版页嵌套\MasterPage\Default.aspx

202-2

运行结果如图7.14所示。

202-3

图7.14　运行结果图

从该示例可以看出，嵌套母版页的创建很简单。当添加母版页时选中“选择母版页”复选框，就像向站点中添加正常内容页一样。然后，在内容页中要重写的位置将ContentPlaceHolder控件添加到Content控件中。

7.6　母版页与内容页交互

母版页是内容页中的一个子控件。开发人员可以让母版页触发一些事件，让这些事件通知内容页来决定做什么。本节我们来了解母版页和内容页的交互。

7.6.1　事件触发顺序

she知识点讲解：光盘\视频讲解\第7章\事件触发顺序.wmv

母版页和内容页最终都会合并为一个单独的类，但是母版页和内容页中的事件不能直接交互。母版页中的控件在母版页中触发事件，而在内容页中触发的事件，不能将事件从内容页发送到母版页，也不能在内容页中处理来自母版页的事件。

母版页和内容页合并后事件的发生顺序如图7.15所示。

203-1

图7.15　母版页与内容页合并后事件的发生顺序

注意：在使用母版页时，一定要注意母版页与内容页合并后事件的发生顺序。

7.6.2　母版页与内容页交互

she知识点讲解：光盘\视频讲解\第7章\母版页与内容页交互.wmv

母版页其实是很被动的，不会通知内容页该做些什么。开发人员可以使母版页触发一些事件，这些事件将会通知内容页来决定做什么。本小节以一个示例来学习母版页与内容页的交互方式。

【示例7-5】下面来演示母版页与内容页的交互。

（1）创建一个网站，名称为“母版页与内容页交互”。

（2）添加一个文件夹Images，在文件夹中放一张图片1.jpg。然后添加一个母版页文件，名称为MasterPage.master。在该母版页的顶部添加一个LinkButton控件和一个TextBox控件。当单击该按钮时，触发一个事件，将在文本框中输入的邮件地址作为参数进行传递，具体代码如下：

示例7-5：母版页与内容页交互

源码路径：光盘\源文件\Chapter7\示例7-5\母版页与内容页交互\MasterPage.master

204-1

（3）新建一个参数类，命名为Program。将该类放在App_Code文件夹下。在Program类中定义一个表示电子邮件地址的属性，具体代码如下：

示例7-5：母版页与内容页交互

源码路径：光盘\源文件\Chapter7\示例7-5\母版页与内容页交互\App_Code\Program.cs

204-2

（4）当母版页中的按钮被单击时会引发一个事件，该事件代码如下：

示例7-5：母版页与内容页交互

源码路径：光盘\源文件\Chapter7\示例7-5\母版页与内容页交互\MasterPage.master.cs

205-2

（5）添加一个内容页，名称为Default.aspx。在内容页中定义响应单击事件的事件处理器。具体代码如下：

示例7-5：母版页与内容页交互

源码路径：光盘\源文件\Chapter7\示例7-5\母版页与内容页交互\Default.aspx

205-3

光有事件还不够，还需要在Web页面中使用@MasterType指令指定母版页的类型，声明代码如下：

示例7-5：母版页与内容页交互

源码路径：光盘\源文件\Chapter7\示例7-5\母版页与内容页交互\Default.aspx

206-2

运行结果如图7.16所示。

207-1

图7.16　运行结果图

在该示例中，首先从母版页中获取发送电子邮件的地址，然后使用System.Net.Mail命名空间中发送电子邮件的类来发送邮件。邮件发送成功后，客户端弹出一个消息框表示发送成功。开发人员可以为不同的内容页编写响应母版页的代码。这样就可以通过母版页中用户的单击事件来调用不同的内容页的响应事件。

注意：live_with_smile和123456abc是一个163邮箱的用户名和密码。换成任意一组可正常使用的163邮箱也可以发送成功。

7.7　小结

本章主要介绍了ASP.NET的母版页，包括母版页的创建、内容页的创建、母版页和相对路径、配置母版页、动态加载母版页、母版页嵌套和母版页与内容页交互。重点是母版页和内容页的创建、动态加载母版页和母版页的嵌套，有兴趣的读者可以自己尝试着在自己的网站上运用这些知识。难点是母版页与内容页的交互，读者可多阅读几次。

7.8　本章习题

习题7-1　在Visual Studio 2012中新建一个网站，命名为chapter7_1。在该网站上添加一个母版页文件，命名为MasterPage.master。在母版页文件中添加文本“母版页内容”和一个日历控件。然后在该网站上添加一个Web页面，命名为Default.aspx。该Web页面引用母版页文件，并在页面中添加内容。运行结果如图7.17所示。

208-1

图7.17　运行结果图

【分析】本题目主要考查的是对创建母版页的掌握情况。

【关键代码】MasterPage.maste文件代码如下：

    <div>
        <br />
        母版页内容：
        <br /><br />
        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>

Default.aspx页面后置代码如下：

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = "<br />欢迎使用母版页。<br />";
    }
}

注意：在应用母版页的页面的page指令中会设置MasterPageFile属性的值。

习题7-2　在Visual Studio 2012中新建一个网站，命名为chapter7_2。在该网站上添加一个文件夹，命名为Master。然后在文件夹Master里添加一个母版页文件和一张图片，母版页文件命名为MasterPage.master。在母版页文件中添加文本“母版页内容”和一张图片。在该页面上添加一个Web页面，命名为Default.aspx。该页面与母版页文件不在同一个文件夹下，此时Web页面的设计视图如图7.18所示。请修改内容页代码，使得图片可以正常显示，如图7.19所示。

208-2

图7.18　Web页面（1）

208-3

图7.19　Web页面（2）

【分析】本题目主要考查的是对解决母版页和内容页不在同一个文件夹时图片显示问题的掌握程度。

【关键代码】MasterPage.master文件代码如下：

    <div>
        <br />
        母版页内容：
        <br /><br />
        <img src ="12.jpg" alt ="picture" runat ="server" />
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>

Default.apsx文件代码如下：

<body>
    <form id="form1" runat="server">
    <div>
        <br />
        母版页内容：
        <br /><br />
        <img src ="12.jpg" alt ="picture" runat ="server" />
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>

习题7-3　在Visual Studio 2012中新建一个网站，命名为chapter7_3。在该网站上添加三个母版页文件，分别命名为MasterPage.master、MasterPage2.master、MasterPage3.master。然后定义了一个使用母版页MasterPage.master的Web页面，命名为Default.aspx。在Web页面中添加两个链接，动态选择加载母版页MasterPage2.master或者MasterPage3.master。运行结果如图7.20～图7.22所示。

209-1 209-2 209-3
图7.20　运行结果图（1） 图7.21　运行结果图（2） 图7.22　运行结果图（3）

【分析】本题目主要考查的是对动态加载母版页的掌握程度。

【关键代码】Default.aspx.cs文件代码如下：

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void Page_PreInit(object sender, EventArgs e)
    {
        if (Request["master"] != null)
        {
            switch (Request["master"])
            {
                case "master2":
                    Page.MasterPageFile = "~/MasterPage2.master";
                    break;
                case "master3":
                    Page.MasterPageFile = "~/MasterPage3.master";
                    break;
            }
        }
    }
}

注意：必须在相应的母版页文件中添加对应的内容。

习题7-4　在Visual Studio 2012中新建一个网站，命名为chapter7_4。在该网站上添加两个母版页文件，分别命名为MasterPage.master、MasterPage2.master。母版页MasterPage2.master文件嵌套在母版页MasterPage.master文件中。然后定义一个使用子母版页（即MasterPage2.master）的Web页面，命名为Default.aspx。在该Web页面上添加一个Label控件，用来显示当前时间信息。运行结果如图7.23所示。

210-1

图7.23　运行结果图

【分析】本题目主要考查的是对嵌套母版页的掌握程度。

【关键代码】Default.aspx.cs文件代码如下：

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = "<br />"+DateTime.Now.ToString();
    }
}

习题7-5　在Visual Studio 2012中新建一个网站，命名为chapter7_5。在该网站上添加一个母版页文件，命名为MasterPage.master。在该母版页中添加文本“母版页：”和一个日历控件。然后添加一个基于母版页的Web页面。请在Web.congfig文件中进行配置，使得该网站中所有页面可以不用在Page指令中指定masterPageFile属性的值。运行结果如图7.24所示。

211-1

图7.24　运行结果图

【分析】本题目主要考查的是对在Web.config中配置母版页的掌握情况。

【关键代码】Web.config文件代码如下：

<configuration>
  <system.web>
    <pages masterPageFile="~/MasterPage.master"/>
  </system.web>
     </configuration>
相关教程

Copyright © 2017-2021 52haozy.com All Rights Reserved.

首页

搜索

会员

教程类别