文章

第19天：ASP.NET MVC 架構

發布於 更新於
作者 Ned Hsu 8 分鐘閱讀

課程簡介

今天，我們將探討 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 框架會依照以下流程處理請求：

  1. 路由系統：將 HTTP 請求映射到特定的控制器和動作方法。
  2. 控制器（Controller）：控制器接收到請求，處理業務邏輯，並與模型互動以取得資料。
  3. 模型（Model）：模型負責與資料庫或其他來源進行資料交換，並將資料傳遞給控制器。
  4. 視圖（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";
}

<h2>@ViewData["Title"]</h2>
<p>這是學生列表頁面。</p>

在 Views/Students 資料夾下，新增另一個名為 Details.cshtml 的視圖檔案，來顯示學生的詳細資料：

1
2
3
4
5
6

@model MyMvcApp.Models.Student

<h2>學生詳細資料</h2>

<p>姓名: @Model.Name</p>
<p>年齡: @Model.Age</p>

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. 執行專案：
1

dotnet run
  1. 在瀏覽器中訪問 http://localhost:5000/Students，可以看到學生列表頁面。
  2. 訪問 http://localhost:5000/Students/Details/1，可以看到學生詳細資料頁面。

實作練習

  1. 新增控制器與視圖
    • 創建一個 CoursesController 來處理課程的 CRUD 操作。
    • 為課程控制器建立 Index 和 Details 視圖。
  2. 使用模型
    • 建立一個 Course 模型，包含 Id、Name 和 Credits 屬性。
    • 在控制器中傳遞課程資料到視圖並顯示。

教學重點

  • 了解 MVC 架構及其在 ASP.NET 中的應用。
  • 掌握控制器、視圖和模型之間的互動。
  • 使用路由系統來處理 HTTP 請求。
  • 在 ASP.NET MVC 中構建簡單的 web 應用程式。

在下一節中，我們將學習 進階 MVC 特性，如表單提交、模型驗證和分頁功能。

Software, dotnet
dotnet
本文章以 CC BY 4.0 授權