当前位置：首页 > news >正文

深入理解 C# Razor Pages：构建现代 Web 应用的利器

news 来源：原创 2025/6/6 16:14:53

在现代 Web 开发中，选择合适的框架至关重要。ASP.NET Core 提供了多种开发模式，其中 Razor Pages 因其简单性、高效性和易用性，成为构建页面导向 Web 应用的首选方案。相比于传统的 MVC（Model-View-Controller）模式，Razor Pages 提供了更直观的开发体验，特别适合中小型 Web 应用程序。

本文将深入探讨 Razor Pages 的核心概念、架构、使用方法，并通过实际示例展示如何构建一个完整的 Web 应用。

1. 什么是 Razor Pages？

Razor Pages 是 ASP.NET Core 中的一个 页面为中心的框架，它简化了 Web 开发流程。与 MVC 不同，Razor Pages 将 UI（视图）和逻辑（控制器） 紧密结合在一个单元中，使得代码更加模块化和易于维护。

1.1 Razor Pages 与 MVC 的区别

特性	Razor Pages	MVC
架构	页面为中心，逻辑与视图结合	分离的 Model-View-Controller
适用场景	适合页面导向的应用（如仪表盘、表单）	适合复杂业务逻辑的应用
路由	基于文件路径（`/Pages/Index.cshtml` → `/`）	基于控制器和 Action
代码组织	每个页面包含 `.cshtml`（视图）和 `.cshtml.cs`（逻辑）	分离的 `Controllers`、`Views` 和 `Models`

Razor Pages 的优势在于：

更少的样板代码，减少 Controller 和 View 之间的耦合。
更直观的路由，基于文件系统自动映射 URL。
内置模型绑定和验证，简化表单处理。

2. Razor Pages 的基本结构

一个 Razor Page 通常由两个文件组成：

.cshtml – 包含 HTML 和 Razor 语法（视图）。
.cshtml.cs – 包含 PageModel 类（逻辑）。

2.1 示例：创建一个简单的 Razor Page

Pages/Index.cshtml

@page
@model IndexModel<h1>@Model.Message</h1>

Pages/Index.cshtml.cs

public class IndexModel : PageModel
{public string Message { get; set; }public void OnGet(){Message = "Hello, Razor Pages!";}
}

@page 指令表示这是一个 Razor Page。
@model 绑定 PageModel 类。
OnGet() 方法处理 HTTP GET 请求，并初始化数据。

访问 /Index 时，页面会显示 "Hello, Razor Pages!"。

3. Razor Pages 的核心机制

3.1 路由机制

Razor Pages 默认基于文件路径映射 URL，例如：

Pages/Index.cshtml → /
Pages/Products/Index.cshtml → /Products
Pages/Products/Details.cshtml → /Products/Details

也可以自定义路由：

@page "/custom-route/{id:int}"

这样，URL /custom-route/5 会自动绑定 id=5。

3.2 处理 HTTP 请求

Razor Pages 使用 命名约定 处理 HTTP 请求：

OnGet() → 处理 GET 请求
OnPost() → 处理 POST 请求
OnPut()、OnDelete() 等（适用于 REST API）

示例：

public IActionResult OnPost()
{if (!ModelState.IsValid){return Page(); // 返回当前页面（验证失败）}return RedirectToPage("/Success"); // 重定向
}

3.3 模型绑定

Razor Pages 支持自动绑定表单数据：

方式 1：直接绑定

public IActionResult OnPost(string username, string password)
{// 直接接收表单字段
}

方式 2：使用 [BindProperty]

[BindProperty]
public UserInputModel Input { get; set; }public IActionResult OnPost()
{if (Input.Username == "admin"){// 处理逻辑}
}

这种方式更推荐，因为它支持 模型验证。

4. Razor Pages 的常用功能

4.1 表单处理

<form method="post"><div><label asp-for="Input.Username"></label><input asp-for="Input.Username" /><span asp-validation-for="Input.Username"></span></div><div><label asp-for="Input.Password"></label><input asp-for="Input.Password" type="password" /><span asp-validation-for="Input.Password"></span></div><button type="submit">Login</button>
</form>

asp-for 实现模型绑定。
asp-validation-for 显示验证错误。

4.2 数据验证

public class UserInputModel
{[Required(ErrorMessage = "用户名不能为空")]public string Username { get; set; }[DataType(DataType.Password)][MinLength(6, ErrorMessage = "密码至少6位")]public string Password { get; set; }
}

如果验证失败，ModelState.IsValid 会返回 false，并自动显示错误信息。

4.3 依赖注入（DI）

Razor Pages 支持 依赖注入，可以轻松注入服务：

public class IndexModel : PageModel
{private readonly ILogger<IndexModel> _logger;public IndexModel(ILogger<IndexModel> logger){_logger = logger;}public void OnGet(){_logger.LogInformation("Page loaded");}
}