第21天：ASP.NET Razor Pages

發布於 2024/09/21

作者 Ned Hsu 8 分鐘閱讀

課程簡介

今天，我們將學習 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 專案：

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：負責處理頁面的邏輯與資料綁定。

  
<!-- Index.cshtml -->
@page
@model MyRazorApp.Pages.IndexModel

<h2>@Model.Message</h2>

  
// 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 基本語法範例：

輸出變數：

<p>當前時間是：@DateTime.Now</p>

條件判斷：

  
@if (DateTime.Now.Hour < 12)
{
    <p>早安！</p>
}
else
{
    <p>下午好！</p>
}

迴圈：

  
@for (int i = 0; i < 5; i++)
{
    <p>這是第 @i 次輸出。</p>
}

5. 頁面模型（Page Model）

Page Model 是每個 Razor Page 的後端程式碼，負責處理頁面的資料與行為。每個 Page Model 都繼承自 PageModel 類別，可以定義 OnGet()、OnPost() 等方法來處理 GET 或 POST 請求。

頁面模型範例：

  
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 請求。

表單範例：

  
<!-- 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 中，路由由頁面的檔案結構來自動決定，但我們也可以自定義路由。

自定義路由範例：

@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：

  
<div>
    <p>歡迎, 使用者！</p>
</div>

然後在其他頁面中引用該部分視圖：

@await Html.PartialAsync("_LoginPartial")

這樣可以在多個頁面中共享相同的 HTML 片段，而無需重複編寫代碼。

實作練習

建立簡單的 Razor Pages 專案
- 創建一個新的 Razor Pages 專案，並設置首頁顯示問候語。
- 新增一個表單頁面，讓使用者輸入名字並提交，提交後顯示問候語。
使用 Page Model
- 在頁面模型中新增一個欄位，綁定到表單資料，並進行簡單的表單驗證。

教學重點

了解 Razor Pages 與傳統 MVC 的區別。
掌握 Razor 語法來顯示動態內容。
學會在 Razor Pages 中處理表單與資料綁定。
使用頁面模型來管理頁面邏輯與資料。
瞭解如何自定義路由與重複使用 Partial Views。

在下一節課中，我們將探討 進階的 Razor Pages 功能，如資料驗證、分頁

、與其他複雜的頁面行為。

Software, dotnet

dotnet

本文章以 CC BY 4.0 授權