ASP.NET Web Pages - 版面配置系統完整實戰：Layout 母版頁、RenderBody/RenderPage/RenderSection、DRY 原則、安全性與最佳實務

版面配置系統實現網站視覺一致性：共用 Header/Footer/Navigation、統一 CSS/JS 引用、內容區塊靈活注入。掌握 Layout、RenderBody、RenderPage、RenderSection 四大核心機制。

一致性視覺的三大支柱

• 🎨 共用 Header：Logo、導覽列、搜尋框、使用者選單
• 🎨 共用 Footer：版權聲明、連結群組、社群媒體、法律資訊
• 🎨 共用樣式與腳本**：CSS 框架、JavaScript 庫、全域變數、分析追蹤碼

機制一：RenderPage() - 內容區塊引入

最簡單的重用方式：將重複片段獨立為 .cshtml 檔案，在需要處引入。

@* ~/Shared/_Header.cshtml *@
<header class="site-header">
 <nav class="navbar">...</nav>
</header>

@* ~/Shared/_Footer.cshtml *@
<footer class="site-footer">
 <p>© 2024 MySite. All rights reserved.</p>
</footer>

@* 內容頁 *@
<!DOCTYPE html>
<html><body>
@RenderPage("~/Shared/_Header.cshtml")
<main><h1>Welcome</h1><p>Content...</p></main>
@RenderPage("~/Shared/_Footer.cshtml")
</body></html>

優點： 簡單直觀、片段獨立維護。缺點： 每頁重複 HTML 骨架、無法強制統一結構。

機制二：Layout Page (母版頁) - 結構化版面配置

版面頁 (_Layout.cshtml)

@* ~/Shared/_Layout.cshtml *@
<!DOCTYPE html>
<html lang="zh-TW">
<head>
 <meta charset="utf-8" />
 <title>@Page.Title | MySite</title>
 <link href="@Href("~/Styles/site.css")" rel="stylesheet" />
 @RenderSection("Head", required: false)
</head>
<body>
 @RenderPage("~/Shared/_Header.cshtml")
 
 <div class="container">
 @RenderBody()
 </div>
 
 @RenderPage("~/Shared/_Footer.cshtml")
 @RenderSection("Scripts", required: false)
</body>
</html>

內容頁

@* 任何內容頁 *@
@{
 Layout = "~/Shared/_Layout.cshtml"; // 必須為第一行非註解陳述式
 Page.Title = "產品列表";
}
@section Head {
 <meta name="description" content="最新產品資訊" />
 <link href="@Href("~/Styles/products.css")" rel="stylesheet" />
}

<h1>產品列表</h1>
<p>內容區域自動注入到 Layout 的 @RenderBody() 位置</p>

@section Scripts {
 <script src="@Href("~/Scripts/products.js")"></script>
}

執行範例 »

RenderBody() vs RenderSection() 核心差異

進階區塊模式：預設內容與條件渲染

@* 版面頁 *@
@if (IsSectionDefined("Sidebar")) {
 <aside class="sidebar">@RenderSection("Sidebar")</aside>
} else {
 <aside class="sidebar"><p>預設側邊欄內容</p></aside>
}

@* 內容頁選擇性提供 *@
@section Sidebar {
 <div class="widget">特別優惠內容</div>
}

IsSectionDefined("Name") 檢查內容頁是否定義區塊，實現彈性預設內容。

DRY 原則實踐：集中化維護的威力

• ✅ 修改一處，全站生效：調整導覽結構、更新版權年份、替換 Logo、升級 Bootstrap 版本
• ✅ 減少重複程式碼 80%+**：HTML 骨架、CSS/JS 引用、Meta 標籤集中管理
• ✅ 團隊平行開發**：前端工程師維護 Layout/Shared，後端工程師專注內容頁邏輯
• ✅ 版本控制清晰**：Layout 變更歷史獨立追蹤，不混雜業務邏輯

安全性：防止檔案直接瀏覽

以 _ 開頭命名：

• _Layout.cshtml
• _Header.cshtml
• _Footer.cshtml
• _Sidebar.cshtml

ASP.NET 路由系統**攔截底線開頭檔案的直接 URL 要求**，回傳 404，保護版面結構不被外部直接存取。

敏感資訊隔離：_AppStart.cshtml

@* ~/ _AppStart.cshtml (根目錄) *@
@{
 // 資料庫連線字串 → 建議放 Web.config connectionStrings (可加密)
 // Email 密碼 → 環境變數 / Azure Key Vault / AWS Secrets Manager
 // API 金鑰 → 祕密管理服務
 
 // 僅示範語法，實際專案請勿硬編碼
 WebMail.SmtpServer = "smtp.example.com";
 WebMail.UserName = "noreply@example.com";
 WebMail.Password = Environment.GetEnvironmentVariable("EMAIL_PASSWORD");
 WebMail.From = "noreply@example.com";
 WebMail.EnableSsl = true;
}

巢狀版面配置：區域專屬 Layout

@* ~/Admin/_Layout.cshtml (繼承根版面) *@
@{
 Layout = "~/Shared/_Layout.cshtml";
}
@section Head {
 <link href="@Href("~/Admin/Styles/admin.css")" rel="stylesheet" />
}
@section Scripts {
 <script src="@Href("~/Admin/Scripts/admin.js")"></script>
}
<div class="admin-wrapper">
 @RenderPage("~/Admin/Shared/_Sidebar.cshtml")
 <main class="admin-content">@RenderBody()</main>
</div>

內容頁指定 Layout = "~/Admin/_Layout.cshtml" 即套用雙層版面。

現代對應：ASP.NET Core Razor Pages / MVC

核心版面機制**完整保留相容**，遷移成本極低。