WebForms 母版页学习笔记

在 ASP.NET WebForms 中，母版页（Master Page）是一种可重用的模板，它可以帮助我们快速构建具有相同布局和外观的多个页面。母版页通常包含了网站的主要布局和外观元素，如页眉、页脚、导航菜单等，而子页面则只包含特定的内容。

创建母版页

可以通过 Visual Studio 中的“添加新项”来创建一个母版页。步骤如下：

在 Solution Explorer 中右键单击项目，选择“添加” -> “新建项”。
在“模板”中选择“Web”并在“Visual C#”或“Visual Basic”下选择“Web 窗体”。
在“名称”中输入母版页的名称，例如“Site.master”，点击“添加”。

创建母版页后，可以在母版页中添加占位符（Placeholder）来表示子页面应该放置的位置。

htmlCopy Code
<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>
<body>
    <form runat="server">
        <div class="header">
            <asp:ContentPlaceHolder ID="HeaderContent" runat="server" />
        </div>
        <div class="content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
        </div>
        <div class="footer">
            <asp:ContentPlaceHolder ID="FooterContent" runat="server" />
        </div>
    </form>
</body>
</html>

在这个例子中，我们定义了四个占位符：TitleContent、HeadContent、HeaderContent、MainContent 和 FooterContent。其中 TitleContent 和 HeadContent 用于设置页面标题和头部信息，而 HeaderContent、MainContent 和 FooterContent 分别代表母版页中的页眉、主体和页脚。

继承母版页

要使用母版页，我们需要在子页面中指定它们所继承的母版页，在子页面中添加如下代码：

htmlCopy Code
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <style type="text/css">
        .highlight {
            background-color: yellow;
        }
    </style>
</asp:Content>
<asp:Content ID="MainContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>Welcome to my website!</h2>
    <p>This is a sample website using master pages.</p>
    <div class="highlight">
        <p>This text is highlighted.</p>
    </div>
</asp:Content>

在这个例子中，我们指定了这个子页面应该继承的母版页是 ~/Site.master。在此之后，我们在子页面中使用 asp:Content 标记来填充母版页中的各个占位符。

实例

以下是一个实际应用母版页的例子：

htmlCopy Code
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <style type="text/css">
        .menu {
            background-color: #333;
        }
        .menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .menu li {
            display: inline-block;
            padding: 10px;
        }
        .menu a {
            color: white;
            text-decoration: none;
        }
    </style>
</asp:Content>
<asp:Content ID="Header1Content" runat="server" ContentPlaceHolderID="HeaderContent">
    <div class="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</asp:Content>
<asp:Content ID="MainContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>Welcome to my website!</h2>
    <p>This is a sample website using master pages.</p>
</asp:Content>
<asp:Content ID="FooterContent" runat="server" ContentPlaceHolderID="FooterContent">
    <p>&copy; 2023 My Website. All rights reserved.</p>
</asp:Content>

在这个例子中，我们使用母版页来创建了一个简单的网站布局，并实现了一个基本的导航菜单。母版页中包含了网站的页眉和页脚，而子页面则只需要填充主体内容即可。