引言

网站通常会重复使用一些元素，例如菜单、标志、页头、页脚和侧边栏。一些开发者简单地将这些通用元素的代码复制粘贴到每一页中。这种方法虽然可行，但操作非常繁琐。每当需要修改某个元素时，都必须手动在每一页上进行更改。过去，这几乎是唯一实现变更的方式。

另一种更高级的方法是将所有通用元素放入所谓的“包含文件”中，然后在需要的地方插入对该文件的引用。例如，在页面顶部引入 _header.aspx_，在底部引入 _footer.aspx_。然而，HTML标签的闭合问题难以处理。由于标签的不恰当或缺失开启/闭合，网页有时会出现奇怪的显示效果，导致开发者无法完整预览整个页面。

随后，网页开发者尝试使用用户控件来封装网页中的常见区域。虽然可以使用拖放技术，但这些通用区域在设计界面中仅显示为灰色方块，无法直观地看到页面的实际布局。标签匹配的问题依然存在。

主页（Master Pages）

随后，ASP.NET 团队提出了“主页”的概念：一种全新的方式，用于为 Web 应用程序应用模板。用户控件嵌入在页面中，不可避免地导致重复。而主页则独立于 .aspx 页面之外存在。主页清晰地区分了页面中的通用区域与各页面独有的内容区域。

主页提供了一种简洁的模板机制，可供 Web 应用中的任意数量的 ASP.NET 页面使用。开发者创建一个扩展名为 .master 的主页面文件，并由子页面或内容页面引用该文件。

部署主页时，可以在集成开发环境（IDE）中直接查看模板结构，同时在 IDE 的“设计”视图中查看内容页面的布局。

主页的优势

许多个人和企业发现，使用主页是一种理想的选择，因为该技术能够很好地满足典型的业务需求。大多数公司希望在内部网络中保持统一的外观和风格，因此可以为各个部门提供一个 .master 文件，供其在构建部门页面时使用。

一旦定义了主页，只需勾选一个复选框，即可将其绑定到新的 ASP.NET 页面。这些内容页面包含内容占位符控件。当网页在浏览器中打开时，ASP.NET 引擎会生成主页的控件层次结构，并将内容页面的控件层次结构插入到正确的位置。最终合并后的控件层次结构被渲染，生成的 HTML 代码发送给用户的浏览器。

1
2<!DOCTYPE html>
3<html xmlns="http://www.w3.org/1999/xhtml">
4<head runat="server">
5    <title></title>
6</head>
7
8<body>
9    <form id="form1" runat="server">
10        <div>
11            <table border="1">
12                <tr>
13                    <td colspan="2" style="text-align: center">
14                        <h1>页头</h1>
15                    </td>
16                </tr>
17                <tr>
18                    <td style="text-align: center; height: 480px; width: 250px">
19                        <h1>菜单</h1>
20                    </td>
21                    <td style="text-align: center; height: 480px; width: 700px">
22                        <asp:ContentPlaceHolder ID="MainContentPlaceHolder1" runat="server">
23                            <h1>您可以在此处修改内容</h1>
24                        </asp:ContentPlaceHolder>
25                    </td>
26                </tr>
27                <tr>
28                    <td colspan="2" style="text-align: center">
29                        <h1>页脚</h1>
30                    </td>
31                </tr>
32            </table>
33        </div>
34    </form>
35</body>
36
37</html>