ASP.NET MVC 視圖系統深度解析

掌握 MVC 視圖核心架構：Views 資料夾組織、檔案類型對應、Razor 語法基礎、版面配置與區塊渲染機制。

Views 資料夾架構設計

Views 資料夾儲存所有與 UI 顯示相關的檔案，採用約定優於配置的結構：

資料夾對應規則

• 每個 Controller 對應一個同名子資料夾
• HomeController → Views/Home/
• AccountController → Views/Account/
• 共用視圖置於 Views/Shared/

預設資料夾結構

Views/
├── Account/          # 登入、註冊、變更密碼視圖
├── Home/             # 首頁、關於頁面
│   ├── Index.cshtml
│   └── About.cshtml
├── Shared/           # 共用版面、部分視圖
│   ├── _Layout.cshtml
│   ├── _LoginPartial.cshtml
│   └── Error.cshtml
└── _ViewStart.cshtml # 全域版面指定

ASP.NET 視圖檔案類型對照表

核心視圖檔案實作

Index.cshtml - 首頁

@{
    ViewBag.Title = "首頁";
}

<h1>歡迎來到 W3CSchool.cc</h1>
<p>首頁內容區塊</p>

About.cshtml - 關於頁面

@{
    ViewBag.Title = "關於我們";
}

<h1>關於我們</h1>
<p>關於頁面內容</p>

關鍵語法解析

執行與驗證

1. 偵錯 → 啟動偵錯（或 F5）
2. 瀏覽器顯示首頁與導航運作
3. 點擊 Home、About 標籤驗證路由

_ViewStart.cshtml - 全域版面設定

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

此檔案自動套用至所有視圖，若刪除需在每個視圖手動指定 Layout。

版面配置最佳實務

1. 統一版面：_Layout.cshtml 定義網站整體架構
2. 區塊化：使用 @RenderSection 實作選擇性腳本/樣式區塊
3. 部分視圖：@Html.Partial() 重用共用 UI 元件
4. 強型別視圖：@model 型別宣告享受 IntelliSense
5. 視圖模型：複雜頁面使用專用 ViewModel 而非直接用領域模型

恭喜完成！

您已建立第一個 MVC 應用程式的視圖基礎架構。下一階段將加入電影資料模型與完整 CRUD 功能。