实现Master Page

实现Master Page

 

---

在ASP.NET v2.0中，Master Page实现为一个Web页面，其中包含内容页面可以使用的默认外观和操作方式。多个内容页面只需提供合并到Master Page中的内容标记，即可使用这个Master Page的统一外观和操作方式。本节的示例将使用VS 2005创建一个Master Page和简单的内容页面。

首先，创建一个新的Web项目，删除自动创建的Default.aspx页面。后面在创建使用Master Page的内容页面时，将再次创建Default.aspx。

(1) 要创建Master Page，在Solution Explorer中右击Web项目，选择Add New Item，再选择Master Page，给它指定名称Company.master，然后单击OK按钮。这将创建一个新的Master Page。

(2) 如果Master Page在HTML视图中，就单击编辑器左下角的Design按钮，把它切换到设计视图。选择Layout | Insert Table，给Company.master添加一个新表。

(3) 在Insert Table对话框中，选择Template，再从下拉列表中选择“Header, footer and side”，如图1-9所示。

(4) 表添加到页面上后，选择最上面一行的单元格，输入“My Company Header”，选择第二行的第一个单元格，输入“Menu Goes Here”，再选择第三行(最后一行)的单元格，输入“Copyright (C) 2006 My Company, All Rights Reserved”。

(5) 第一次创建Master Page时，它会自动添加一个ContentPlaceHolder控件。Company. master也是如此。把ContentPlaceHolder控件拖放到刚才插入Company.master的表中第二行的第二个单元格中。结果如图 1-10所示。

图  1-9

图  1-10

创建和修改Company.master后，就可以单击编辑器左下角的HTML按钮，查看自动生成的HTML代码了。程序清单1-4列出了为Company.master进行上述修改后的HTML。

程序清单1-4  格式化定制页面元素的Master Page：Company.master

<%@ Master Language="C#" AutoEventWireup="true"

CodeFile="Company.master.cs" Inherits="Company" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>My Company</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <table border="0" cellpadding="0" cellspacing="0"

               style="width: 100%; height: 100%">

            <tr>

                <td colspan="2" style="height: 200px">

                    <h1>My Company Header</h1>

                </td>

            </tr>

            <tr>

                <td style="width: 200px">

                    Menu Goes Here</td>

                <td>

        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">

        </asp:contentplaceholder>

                </td>

            </tr>

            <tr>

                <td colspan="2" style="height: 200px">

                    Copyright (C) 2006 My Company, All Rights Reserved

                </td>

            </tr>

        </table>

    </div>

    </form>

</body>

</html>

在程序清单1-4中，首先要注意，在页面的顶部包含一个Master指令。如codefile和inherits特性所述，可以给Master Page添加一个代码文件。该页面的大多数内容都是HTML格式化标记。

这个页面的另一个相关部分是contentplaceholder元素。可以在这里放置默认内容，但内容页面将使用id指定其内容显示在什么地方，这将覆盖默认的内容。

现在可以将这个Master Page用于任意内容页面了。创建内容页面的过程与创建其他Web窗体非常相似。在Solution Explorer中右击Web项目，选择Add New Item，再选择Web Form，接受推荐的名称Default.aspx。选中Select Master Page选项，最后单击OK按钮。程序清单1-5列出了修改后的新内容页面。

程序清单1-5  使用Master Page的内容页面: Default.aspx

<%@ Page

    Language="C#"

    MasterPageFile="~/Company.master"

    AutoEventWireup="true"

    CodeFile="Default.aspx.cs"

    Inherits="_Default"

    Title="Content Page" %>

   

    <asp:Content ID="Content1"

                 ContentPlaceHolderID="ContentPlaceHolder1"

                 Runat="Server">

        <h2>This is my content.</h2>

    </asp:Content>

程序清单1-5中的两个有趣的地方是MasterPageFile特性和Content元素。Page指令包含一个新特性MasterPageFile，它指定要使用的Master Page的文件名。

在程序清单1-5中，显然内容页面没有像一般Web 窗体那样的HTML标记。相反，用ContentPlaceHolderID特性指定contentplaceholder的id(在Master Page中)，就可以添加一个Content元素，指定在Master Page的什么地方放置内容标记。只有Content元素中的标记才显示在Master Page中。

由于没有一般的HTML标记，例如Head，所以要用Head标题元素中的内容设置Page指令的Title特性。