异常教程

ASP.NET Web Pages Razor（超详细）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在 Web 开发领域，ASP.NET Web Pages Razor 是微软推出的一款轻量级框架，旨在让开发者能够快速构建动态网站。它结合了传统的 Web Forms 的直观性与 MVC 的灵活性，同时通过简洁的 Razor 语法降低了学习门槛。对于编程初学者而言，它提供了友好的入门体验；对于中级开发者，它又能满足复杂业务场景的扩展需求。

本文将从基础概念入手，逐步深入讲解 ASP.NET Web Pages Razor 的核心特性，并通过实际案例演示其开发流程。文章会采用比喻和分步解析的方式，帮助读者构建清晰的认知框架。

一、理解 Razor 语法：HTML 与代码的桥梁

1.1 Razor 语法的核心思想

Razor 是 ASP.NET Web Pages 中用于混合 HTML 和服务器端代码的标记语言。它的核心思想是“让代码与 HTML 直接交互”，避免了传统 ASP.NET 中复杂的代码隐藏文件模式。

比喻：想象你正在搭建一座桥，一边是静态的 HTML 结构（如桥梁的水泥部分），另一边是动态的 C# 逻辑（如控制交通的信号灯）。Razor 就是连接这两部分的“铆钉”，通过 @ 符号将代码无缝嵌入到 HTML 中。

1.2 基础语法示例

示例 1：输出变量

<!-- 文件名：Hello.cshtml -->
@{
    string greeting = "欢迎来到 Razor 世界！";
}
<!DOCTYPE html>
<html>
<head>
    <title>第一个 Razor 页面</title>
</head>
<body>
    <h1>@greeting</h1>
</body>
</html>

解析：

  • @{} 块用于定义服务器端代码（如变量、条件判断等）。
  • 直接使用 @ 符号输出变量或执行简单表达式。

示例 2：条件判断

@{
    bool isWeekend = DateTime.Now.DayOfWeek == DayOfWeek.Saturday || 
                    DateTime.Now.DayOfWeek == DayOfWeek.Sunday;
}
<p>今天@(isWeekend ? "是周末" : "是工作日")</p>

二、页面生命周期：从请求到响应

ASP.NET Web Pages 的页面生命周期分为三个关键阶段：

  1. 初始化阶段：加载页面代码文件（如 .cshtml）。
  2. 执行阶段：逐行解析代码块，执行逻辑。
  3. 渲染阶段：将最终 HTML 生成并发送到客户端。

比喻：这就像准备一场演出，初始化是搭建舞台，执行是演员排练，渲染则是正式演出的呈现。

2.1 全局代码与局部代码

  • 全局代码：通过 @functions 块定义的函数或变量，可在页面任意位置调用。
  • 局部代码：仅在 @{} 块内定义的代码，作用域仅限当前块。
@functions {
    public string GetUserName() {
        return "张三";
    }
}

<p>用户名：@GetUserName()</p>

三、表单处理与数据验证

3.1 基本表单提交

示例：用户注册表单

<!-- Register.cshtml -->
@{
    if(IsPost) {
        var username = Request["username"];
        var email = Request["email"];
        // 这里可以添加数据库存储逻辑
    }
}
<form method="post">
    <label>用户名：<input type="text" name="username" required></label>
    <label>邮箱：<input type="email" name="email" required></label>
    <button type="submit">提交</button>
</form>

3.2 数据验证：使用 Web Pages 的验证辅助方法

@{
    Validation.Add("username", 
        Validator.Required("用户名不能为空！"));
    
    if(IsPost) {
        if(Validation.IsValid()) {
            // 保存数据
        }
    }
}
<div>@ValidationSummary()</div>

比喻：验证辅助方法就像一位严格的质检员，确保每一条数据都符合预设规则，避免无效信息进入系统。

四、数据库交互：从连接到查询

4.1 连接数据库

使用 OpenDatabase() 方法快速连接 SQL Server 或 SQLite 数据库：

@{
    var db = Database.Open("MyDatabase");
    var query = "SELECT * FROM Users";
    var users = db.Query(query);
}

4.2 CRUD 操作示例

创建数据

var insertCommand = "INSERT INTO Users (Name, Email) VALUES (@0, @1)";
db.Execute(insertCommand, "李四", "lisi@example.com");

更新数据

var updateCommand = "UPDATE Users SET Email = @0 WHERE Id = @1";
db.Execute(updateCommand, "new_email@example.com", 1);

注意事项：使用参数化查询（如 @0）可以有效防止 SQL 注入攻击。

五、进阶技巧：布局与部分视图

5.1 布局页面（Layout）

通过 _Layout.cshtml 实现页面模板复用：

<!-- _Layout.cshtml -->
<!DOCTYPE html>
<html>
<head>
    <title>@Page.Title</title>
</head>
<body>
    <div class="header">网站导航栏</div>
    <div class="content">
        @RenderBody()
    </div>
    <div class="footer">版权信息</div>
</body>
</html>

在子页面中指定布局：

@{
    Layout = "_Layout.cshtml";
}

5.2 部分视图（Partial Pages）

将重复的代码片段封装为部分视图：

<!-- _Header.cshtml -->
<nav>
    <a href="/">首页</a>
    <a href="/about">关于我们</a>
</nav>

在页面中调用：

@RenderPage("_Header.cshtml")

六、实际案例：构建待办事项应用

6.1 功能设计

  • 展示待办事项列表
  • 添加新任务
  • 标记任务完成

6.2 代码实现

数据库表结构

CREATE TABLE Todos (
    Id INT PRIMARY KEY IDENTITY,
    Title NVARCHAR(100) NOT NULL,
    IsCompleted BIT DEFAULT 0
);

列表页面（Index.cshtml）

@{
    var db = Database.Open("TodoDB");
    var todos = db.Query("SELECT * FROM Todos");
}
<table>
    @foreach(var todo in todos) {
    <tr class="@(todo.IsCompleted ? "completed" : "")">
        <td>@todo.Title</td>
        <td>
            <form method="post" action="mark-complete.cshtml">
                <input type="hidden" name="id" value="@todo.Id">
                <button type="submit">标记完成</button>
            </form>
        </td>
    </tr>
    }
</table>

添加任务页面（Add.cshtml）

@{
    if(IsPost) {
        var title = Request["title"];
        var insertCmd = "INSERT INTO Todos (Title) VALUES (@0)";
        db.Execute(insertCmd, title);
        Response.Redirect("~/");
    }
}
<form method="post">
    <input type="text" name="title" placeholder="输入新任务">
    <button type="submit">添加</button>
</form>

七、总结：ASP.NET Web Pages Razor 的价值与未来

ASP.NET Web Pages Razor 通过简洁的语法和直观的开发流程，成为中小型网站开发的利器。它尤其适合需要快速迭代的场景，例如企业内部工具、个人博客或轻量级电商系统。

对于开发者而言，掌握这一框架不仅能提升 Web 开发效率，还能为后续学习 ASP.NET Core 或 MVC 打下坚实基础。随着微软持续优化 .NET 生态，Razor 语法的影响力将进一步扩大，成为全栈开发技能的重要组成部分。

下一步行动建议：

  1. 从官方文档下载模板，动手实践本文案例。
  2. 探索 WebMatrix 工具，简化数据库管理流程。
  3. 尝试将现有静态网站升级为动态交互应用。

通过本文的学习，希望读者能对 ASP.NET Web Pages Razor 的核心机制与应用场景有全面理解，并在实际项目中灵活运用其特性。记住，最好的学习方式是“边写代码，边解决问题”！

最新发布

查看更多文章