第21天:ASP.NET Razor Pages
課程簡介
今天,我們將學習 ASP.NET Razor Pages,這是一個專為建構 Web UI 設計的框架。Razor Pages 是 ASP.NET Core 中的一種新型態的頁面驅動開發模型,專注於頁面本身的開發,使得小型、簡單的應用程式更易於開發和維護。與傳統的 MVC 架構相比,Razor Pages 使用一個單一頁面文件來處理所有資料流和行為,使開發體驗更加簡化。
學習目標
- 了解 Razor Pages 的概念與工作流程
- 學習如何建立與配置 Razor Pages 專案
- 掌握 Razor 語法與頁面處理方法
- 學會如何使用頁面模型來處理資料與事件
課程內容
1. Razor Pages 簡介
Razor Pages 是 ASP.NET Core 中的一種頁面驅動模型,專注於簡化頁面和資料交互。每個 Razor Page 都有一個對應的 .cshtml 檔案和一個頁面模型(Page Model)。頁面模型用來處理頁面邏輯,而 .cshtml 則負責顯示 UI。它與 MVC 類似,但比 MVC 更加簡化,更適合小型應用程式或特定頁面邏輯的實現。
2. 建立 Razor Pages 專案
創建 Razor Pages 專案:
使用以下命令來創建一個 Razor Pages 專案:
1
2
dotnet new webapp -n MyRazorApp
cd MyRazorApp
這將會創建一個包含 Razor Pages 的 ASP.NET Core Web 應用程式。此專案結構與 MVC 類似,但頁面以 .cshtml
格式存在於 Pages
資料夾中。
3. Razor Pages 的基本結構
Razor Pages 的核心是每個 .cshtml
頁面以及對應的頁面模型。通常情況下,這兩者被放在同一個目錄下。
Razor Page 結構:
假設我們有一個 Index.cshtml
頁面,對應的頁面模型是 Index.cshtml.cs
。
- Index.cshtml:負責頁面的 HTML 與 Razor 語法。
- Index.cshtml.cs:負責處理頁面的邏輯與資料綁定。
1
2
3
4
5
<!-- Index.cshtml -->
@page
@model MyRazorApp.Pages.IndexModel
<h2>@Model.Message</h2>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Index.cshtml.cs
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace MyRazorApp.Pages
{
public class IndexModel : PageModel
{
public string Message { get; set; }
public void OnGet()
{
Message = "Hello, Razor Pages!";
}
}
}
在這個範例中,@page
指示 Razor Page 是一個獨立的頁面,OnGet()
是對應的頁面模型方法,負責處理頁面的邏輯。當頁面被訪問時,OnGet()
方法會執行,並將資料綁定到 Message
屬性,再由 .cshtml
顯示。
4. Razor 語法
Razor 語法 是一種用於在 HTML 中嵌入 C# 程式碼的語法,使用 @
字元來啟動 C# 代碼。這種語法可以讓開發者輕鬆地將伺服器端邏輯與前端 UI 結合。
Razor 基本語法範例:
- 輸出變數:
1
<p>當前時間是:@DateTime.Now</p>
- 條件判斷:
1
2
3
4
5
6
7
8
@if (DateTime.Now.Hour < 12)
{
<p>早安!</p>
}
else
{
<p>下午好!</p>
}
- 迴圈:
1
2
3
4
@for (int i = 0; i < 5; i++)
{
<p>這是第 @i 次輸出。</p>
}
5. 頁面模型(Page Model)
Page Model 是每個 Razor Page 的後端程式碼,負責處理頁面的資料與行為。每個 Page Model 都繼承自 PageModel
類別,可以定義 OnGet()
、OnPost()
等方法來處理 GET 或 POST 請求。
頁面模型範例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace MyRazorApp.Pages
{
public class ContactModel : PageModel
{
[BindProperty]
public string Name { get; set; }
public void OnGet()
{
// 頁面初始化
}
public IActionResult OnPost()
{
if (string.IsNullOrEmpty(Name))
{
ModelState.AddModelError(string.Empty, "Name is required");
return Page();
}
return RedirectToPage("Success");
}
}
}
在這個範例中,我們創建了一個 ContactModel
,並使用 OnGet()
方法處理 GET 請求。當使用者提交表單時,OnPost()
方法將處理 POST 請求。如果使用者沒有填寫 Name
,頁面將返回錯誤,否則將重定向到成功頁面。
6. 使用表單與 POST 請求
Razor Pages 非常適合處理表單提交與資料綁定。在 .cshtml
頁面中,我們可以使用表單來提交資料,並在頁面模型中處理 POST 請求。
表單範例:
1
2
3
4
5
6
7
8
9
10
<!-- Contact.cshtml -->
@page
@model MyRazorApp.Pages.ContactModel
<form method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" asp-for="Name" />
<span asp-validation-for="Name"></span>
<button type="submit">Submit</button>
</form>
這個範例展示了如何使用 Razor Pages 處理表單,並將表單資料提交到頁面模型進行處理。在頁面模型中,OnPost()
方法會處理這些資料,並對表單進行驗證。
7. 頁面導向與路由設定
在 Razor Pages 中,路由由頁面的檔案結構來自動決定,但我們也可以自定義路由。
自定義路由範例:
1
2
3
4
@page "/custom-route"
@model MyRazorApp.Pages.IndexModel
<h2>這是一個自定義路由的頁面</h2>
這段代碼將指定該頁面的路由為 /custom-route
,當用戶訪問此路徑時,會顯示對應的內容。
8. Razor Pages 與 Partial Views
Razor Pages 允許使用 Partial Views(部分視圖)來重複使用 HTML 片段,這樣可以提高頁面的可重用性和維護性。
使用 Partial Views 範例:
在 Shared
資料夾中創建一個部分視圖 _LoginPartial.cshtml
:
1
2
3
<div>
<p>歡迎, 使用者!</p>
</div>
然後在其他頁面中引用該部分視圖:
1
@await Html.PartialAsync("_LoginPartial")
這樣可以在多個頁面中共享相同的 HTML 片段,而無需重複編寫代碼。
實作練習
- 建立簡單的 Razor Pages 專案
- 創建一個新的 Razor Pages 專案,並設置首頁顯示問候語。
- 新增一個表單頁面,讓使用者輸入名字並提交,提交後顯示問候語。
- 使用 Page Model
- 在頁面模型中新增一個欄位,綁定到表單資料,並進行簡單的表單驗證。
教學重點
- 了解 Razor Pages 與傳統 MVC 的區別。
- 掌握 Razor 語法來顯示動態內容。
- 學會在 Razor Pages 中處理表單與資料綁定。
- 使用頁面模型來管理頁面邏輯與資料。
- 瞭解如何自定義路由與重複使用 Partial Views。
在下一節課中,我們將探討 進階的 Razor Pages 功能,如資料驗證、分頁
、與其他複雜的頁面行為。