第19天：ASP.NET MVC 架構
課程簡介今天，我們將探討 ASP.NET MVC 架構，並學習如何使用它來構建現代的 web 應用程式。MVC 代表 Model-View-Controller，這是一種用於分離應用程式邏輯、資料和 UI 的設計模式。透過 ASP.NET MVC，我們可以輕鬆地維護和擴展應用程式，並確保各個部分之間的良好分離。
學習目標了解 MVC 架構的基本概念學習 ASP.NET MVC 的工作流程使用控制器處理請求與響應瞭解視圖與模型的交互掌握如何構建一個簡單的 ASP.NET MVC 應用程式課程內容1. MVC 架構簡介MVC（Model-View-Controller） 是一種設計模式，用來分離應用程式的三個主要部分：
Model（模型）：負責應用程式的資料和業務邏輯。它定義了如何處理和操作資料。View（視圖）：負責顯示資料的 UI 部分，通常是 HTML 和 Razor 頁面。視圖從模型中取得資料並呈現給使用者。Controller（控制器）：負責處理請求，協調模型和視圖。控制器接收使用者的輸入，調用模型來處理資料，然後將結果傳送到視圖進行顯示。2. ASP.NET MVC 的工作流程當用戶向伺服器發出請求時，ASP.NET MVC 框架會依照以下流程處理請求：
路由系統：將 HTTP 請求映射到特定的控制器和動作方法。控制器（Controller）：控制器接收到請求，處理業務邏輯，並與模型互動以取得資料。模型（Model）：模型負責與資料庫或其他來源進行資料交換，並將資料傳遞給控制器。視圖（View）：控制器將資料傳遞到視圖，視圖負責將資料以 HTML 的形式渲染並返回給使用者。3. 建立 ASP.NET MVC 專案首先，讓我們來建立一個 ASP.NET MVC 專案，來展示 MVC 架構的運作流程。
建立專案： 1
2
dotnet new mvc -n MyMvcApp
cd MyMvcApp
這將會創建一個名為 MyMvcApp 的 ASP.NET MVC 專案。
4. 路由系統ASP.NET MVC 使用路由系統來將 HTTP 請求映射到控制器的動作方法。預設的路由規則可以在 Program.cs 或 Startup.cs 中找到：
1
2
3
4
5
6
7
8
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
這意味著當您訪問 http://localhost:5000/ 時，請求會被路由到 HomeController 的 Index 方法。
5. 控制器（Controller）控制器 是 ASP.NET MVC 的核心部分，負責處理使用者的請求並返回相應的回應。控制器是一個 C# 類別，繼承自 Controller 類別。
新增控制器讓我們來新增一個名為 StudentsController 的控制器來處理學生資料的 CRUD 操作。
在 Controllers 資料夾下新增一個名為 StudentsController.cs 的檔案，並編寫以下代碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
using Microsoft.AspNetCore.Mvc;
namespace MyMvcApp.Controllers
{
public class StudentsController : Controller
{
// GET: Students/Index
public IActionResult Index()
{
return View();
}
// GET: Students/Details/5
public IActionResult Details(int id)
{
// 模擬返回學生資料
var student = new Student { Id = id, Name = "Alice", Age = 22 };
return View(student);
}
}
}
6. 視圖（View）視圖 負責顯示資料，通常是 HTML 結構，並且使用 Razor 語法來嵌入 C# 代碼。每個控制器動作方法通常會返回一個視圖來顯示資料。
建立視圖在 Views/Students 資料夾下，新增一個名為 Index.cshtml 的視圖檔案，並編寫以下內容：
1
2
3
4
5
6
@{
ViewData["Title"] = "Students List";
}
@ViewData["Title"]
這是學生列表頁面。
在 Views/Students 資料夾下，新增另一個名為 Details.cshtml 的視圖檔案，來顯示學生的詳細資料：
1
2
3
4
5
6
@model MyMvcApp.Models.Student
學生詳細資料
姓名: @Model.Name
年齡: @Model.Age
7. 模型（Model）模型 是應用程式中用來處理資料和業務邏輯的部分。它可以代表資料庫中的一個資料表，或是其它資料來源。ASP.NET MVC 會使用模型來傳遞資料給控制器和視圖。
建立模型在 Models 資料夾下，新增一個 Student.cs 檔案來定義學生模型：
1
2
3
4
5
6
7
8
9
namespace MyMvcApp.Models
{
public class Student
{
public int Id { get; set; }
public string Name { get; set; }
public int Age { get; set; }
}
}
此模型類別將在控制器與視圖之間進行資料的傳遞。
8. 使用控制器與視圖顯示資料現在我們已經建立了控制器、視圖和模型，我們可以將學生資料傳遞給視圖並顯示出來。
連接控制器與視圖在 StudentsController 中的 Details 方法中，我們使用 View() 方法將學生資料傳遞給視圖。
1
2
3
4
5
public IActionResult Details(int id)
{
var student = new Student { Id = id, Name = "Alice", Age = 22 };
return View(student);
}
這樣，當我們訪問 http://localhost:5000/Students/Details/1 時，視圖將顯示 Id 為 1 的學生的詳細資料。
9. 測試 MVC 應用程式執行專案： 1
dotnet run
在瀏覽器中訪問 http://localhost:5000/Students，可以看到學生列表頁面。訪問 http://localhost:5000/Students/Details/1，可以看到學生詳細資料頁面。實作練習新增控制器與視圖創建一個 CoursesController 來處理課程的 CRUD 操作。為課程控制器建立 Index 和 Details 視圖。使用模型建立一個 Course 模型，包含 Id、Name 和 Credits 屬性。在控制器中傳遞課程資料到視圖並顯示。教學重點了解 MVC 架構及其在 ASP.NET 中的應用。掌握控制器、視圖和模型之間的互動。使用路由系統來處理 HTTP 請求。在 ASP.NET MVC 中構建簡單的 web 應用程式。在下一節中，我們將學習 進階 MVC 特性，如表單提交、模型驗證和分頁功能。