ASP.NET Web Forms 母版頁完整教學：版面重複使用、ContentPlaceHolder 與巢狀母版頁

母版頁提供網站版面的統一範本機制，讓開發者定義共同版面（Header、Footer、導航列、樣式），內容頁僅專注於差異化內容，實現「寫一次版面，到處套用」的維護優勢。

母版頁核心架構

• 母版頁：副檔名 .master，包含共同 HTML 結構與 <asp:ContentPlaceHolder> 佔位符
• 內容頁：副檔名 .aspx，透過 MasterPageFile 指定母版頁，內容置於 <asp:Content> 標籤對應特定 ContentPlaceHolder
• 合併渲染：使用者請求內容頁時，ASP.NET 執行階段將母版頁與內容頁合併輸出

基本母版頁範例

MasterPage.master

<%@ Master Language="C#" %>
<!DOCTYPE html>
<html>
<head>
    <title><asp:ContentPlaceHolder ID="head" runat="server" /></title>
    <link href="~/Styles/Site.css" rel="stylesheet" />
</head>
<body>
    <header>
        <h1>網站標題 - 來自母版頁</h1>
        <nav><asp:ContentPlaceHolder ID="Navigation" runat="server" /></nav>
    </header>
    
    <main>
        <asp:ContentPlaceHolder ID="MainContent" runat="server">
            <!-- 預設內容，內容頁可選擇覆蓋 -->
        </asp:ContentPlaceHolder>
    </main>
    
    <footer>
        © 2024 My Website. All rights reserved.
    </footer>
</body>
</html>

關鍵指令與控制項

• <%@ Master %>：宣告此檔案為母版頁
• <asp:ContentPlaceHolder>：定義可被內容頁取代的區塊，ID 屬性為唯一識別碼
• 母版頁可包含伺服器控制項、程式碼邏輯，支援動態內容生成

內容頁實作

Default.aspx

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" Title="首頁" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <meta name="description" content="首頁描述" />
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>歡迎來到首頁</h2>
    <p>這是首頁專屬內容。</p>
</asp:Content>

關鍵指令與對應規則

• <%@ Page MasterPageFile="..." %>：指定套用的母版頁路徑
• <asp:Content ContentPlaceHolderID="..." >：對應母版頁特定 ContentPlaceHolder
• 內容頁所有可見內容必須包裹在 <asp:Content> 內，標籤外的文字會被忽略或導致錯誤
• 內容頁可選擇性提供某些 ContentPlaceHolder，未提供者將使用母版頁預設內容

包含伺服器控制項的內容頁

內容頁可像一般頁面一樣使用任何伺服器控制項：

<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <h2>會員登入</h2>
    <form runat="server">
        <div>
            <label>帳號：</label>
            <asp:TextBox ID="txtAccount" runat="server" />
        </div>
        <div>
            <label>密碼：</label>
            <asp:TextBox ID="txtPassword" TextMode="Password" runat="server" />
        </div>
        <asp:Button ID="btnLogin" Text="登入" runat="server" OnClick="btnLogin_Click" />
    </form>
</asp:Content>

巢狀母版頁

大型網站常需「站台級母版頁」→「區域級母版頁」→「內容頁」三層架構：

Site.master（站台級）

<%@ Master Language="C#" %>
<!DOCTYPE html>
<html><body>
    <header>全站共用 Header</header>
    <asp:ContentPlaceHolder ID="RegionContent" runat="server" />
    <footer>全站共用 Footer</footer>
</body></html>

Admin.master（管理區母版頁，繼承 Site.master）

<%@ Master Language="C#" MasterPageFile="~/Site.master" %>

<asp:Content ContentPlaceHolderID="RegionContent" runat="server">
    <nav>管理區側邊選單</nav>
    <asp:ContentPlaceHolder ID="AdminPageContent" runat="server" />
</asp:Content>

Admin_Users.aspx（管理區內容頁）

<%@ Page MasterPageFile="~/Admin.master" %>

<asp:Content ContentPlaceHolderID="AdminPageContent" runat="server">
    <h2>使用者管理</h2>
    <!-- 具體內容 -->
</asp:Content>

母版頁與內容頁互動進階

1. 內容頁存取母版頁公用屬性/方法

// 母版頁定義公用屬性
public string SiteTitle { get; set; } = "My Site";

// 內容頁存取
var master = (SiteMaster)this.Master;
master.SiteTitle = "自訂標題";

2. 內容頁尋找母版頁控制項

var lbl = (Label)Master.FindControl("lblHeaderText");
if (lbl != null) lbl.Text = "新標題";

3. 母版頁處理內容頁事件

母版頁可訂閱內容頁控制項事件，或透過介面定義契約雙向通訊。

原始碼檔案組織建議

• 母版頁置於專案根目錄或 ~/MasterPages/ 目錄
• 使用相對路徑 ~/MasterPage.master 避免部署路徑問題
• 共用 CSS/JS 參考在母版頁統一管理，內容頁專注業務邏輯

常見錯誤與解決方案

母版頁是 ASP.NET Web Forms 版面管理的核心機制，善用巢狀架構與動態互動，能建構出高度可維護的企業級 Web 應用程式。下一節將介紹資料庫連線與 ADO.NET 資料存取。