ASP.NET Web Forms – 母版页

ASP.NET Web Forms 中的母版页(Master Page)详解

母版页是 ASP.NET Web Forms 提供的一种模板机制,可以让你为网站的所有页面定义统一的外观和布局(如头部、导航栏、侧边栏、底部等),而内容页面(Content Page)只需要填写具体的内容部分。这样极大提高了代码复用率和维护效率。

1. 创建母版页

  1. 在解决方案资源管理器右键项目 → 添加 → 新项 → 选择“母版页”(Master Page)
  2. 默认文件名如 Site.master(或 Site.master.vb)

一个典型的母版页(Site.master)代码结构:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApp.SiteMaster" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="head" runat="server" /></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
        <div class="page">
            <!-- 统一的头部 -->
            <header>
                <div class="logo">我的网站</div>
                <nav>
                    <a href="~/Default.aspx">首页</a> | 
                    <a href="~/About.aspx">关于</a> | 
                    <a href="~/Contact.aspx">联系我们</a>
                </nav>
            </header>

            <!-- 主内容区域 -->
            <div class="main">
                <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            </div>

            <!-- 统一的底部 -->
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> - 我的公司</p>
            </footer>
        </div>
    </form>
</body>
</html>

重要元素说明:

  • <%@ Master %> 指令而不是 <%@ Page %>
  • <asp:ContentPlaceHolder>:内容占位符,内容页面必须对应填充
  • 常用 ID:head(放在 <head> 中)、MainContentFeaturedContent

2. 创建使用母版页的内容页面

添加新 Web 窗体时,选择“使用母版页的 Web 窗体”:

<%@ Page Title="首页" Language="C#" MasterPageFile="~/Site.Master" 
    AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApp.Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <!-- 可以在这里添加本页专用的 CSS 或 JS -->
    <link href="css/home.css" rel="stylesheet" />
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>欢迎来到首页!</h2>
    <p>这里是页面的具体内容...</p>

    <asp:Label ID="Label1" runat="server" Text="动态内容"></asp:Label>
</asp:Content>

关键点:

  • MasterPageFile="~/Site.Master" 指定要使用的母版页
  • 每个 <asp:Content> 必须对应母版页中的 ContentPlaceHolderID
  • 只能放置在 <asp:Content> 标签内,不能直接在页面写 <html><head><body>

3. 嵌套母版页(Nested Master Pages)

适用于大型网站需要多级布局(如后台管理有自己的母版,再继承站点主母版):

  1. 创建子母版页时同样选择“母版页”,但在页面指令加上 MasterPageFile="~/Site.Master"
  2. 子母版页中也可以继续放 ContentPlaceHolder
<%@ Master Language="C#" MasterPageFile="~/Site.Master" ... %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <h3>后台管理专用布局</h3>
    <div class="admin-sidebar">
        <!-- 后台导航 -->
    </div>
    <div class="admin-content">
        <asp:ContentPlaceHolder ID="AdminBody" runat="server" />
    </div>
</asp:Content>

4. 在代码后台访问母版页控件

// 在内容页 .cs 文件中
protected void Page_Load(object sender, EventArgs e)
{
    // 方法1:强转 Master 属性
    SiteMaster master = (SiteMaster)this.Master;
    master.SetPageTitle("自定义标题");

    // 方法2:使用 @MasterType 指令(推荐,更安全)
}

// 在内容页 .aspx 顶部添加
<%@ MasterType VirtualPath="~/Site.Master" %>

// 然后直接使用
protected void Page_Load(object sender, EventArgs e)
{
    Master.SetPageTitle("新标题");  // 自动强转
}

母版页中提供公共方法或属性:

public partial class SiteMaster : System.Web.UI.MasterPage
{
    public void SetPageTitle(string title)
    {
        Page.Title = title + " - 我的网站";
    }
}

5. 动态切换母版页

protected void Page_PreInit(object sender, EventArgs e)
{
    // 必须在 PreInit 阶段设置
    if (User.IsInRole("Admin"))
        this.MasterPageFile = "~/AdminMaster.master";
    else
        this.MasterPageFile = "~/Site.Master";
}

6. 常见问题与技巧

  • 忘记在 PreInit 设置 MasterPageFile 会报错
  • 内容页必须有与母版页完全匹配的 ContentPlaceHolderID
  • 想在内容页添加 <head runat="server"> 额外内容 → 在母版页的 <head> 里放一个 ContentPlaceHolder ID="head"
  • 母版页不支持设计视图完美预览嵌套内容(VS2019 以后已大幅改善)

母版页是 Web Forms 时代最经典、最实用的功能之一,虽然现在很多人转到 ASP.NET Core + Razor Pages/MVC,但理解母版页的思路对任何模板系统设计都有帮助。希望以上内容能帮你快速掌握!需要完整示例项目也可以告诉我~

文章已创建 2965

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词,然后按回车进行搜索。按ESC取消。

返回顶部