异常教程

ASP.NET Razor 语法（手把手讲解）

更新时间:

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

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

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

前言：ASP.NET Razor 语法的桥梁作用

在 Web 开发领域，前端与后端的协作如同交响乐团的合奏，需要精准的配合。ASP.NET Razor 语法正是连接 HTML、CSS 和 C# 的一座桥梁，它允许开发者在同一文件中混合编写静态内容与动态代码，从而高效构建动态 Web 应用。无论是展示用户数据、处理表单提交，还是动态生成页面内容，Razor 语法都能以简洁的方式实现。本文将从基础到进阶，逐步解析其核心概念，并通过案例演示如何将理论转化为实际应用。

一、ASP.NET Razor 语法的基础概念

1.1 Razor 的基本语法结构

Razor 的核心是通过 @ 符号来区分服务器端代码与 HTML 内容。例如：

<p>当前时间：@DateTime.Now</p>

在此示例中，@DateTime.Now 是 C# 代码片段，会被服务器执行并替换为实际时间，而 <p> 标签则是静态 HTML 内容。这种混合模式让开发者无需频繁切换文件即可完成页面构建。

1.2 块代码与内联表达式

Razor 支持两种代码形式：

  • 内联表达式：以 @ 开始，直接输出结果（如 @variable）。
  • 代码块：用 @{} 括起，执行多行逻辑，但默认不输出结果。例如：
@{  
    var greeting = "Hello";  
    var name = "World";  
}  
<p>@greeting, @name!</p>

此代码块定义变量后，通过内联表达式显示在页面上。

二、条件语句与循环控制

2.1 条件判断：if-else 的灵活应用

Razor 支持在页面中直接使用 C# 的条件语句。例如，根据用户登录状态显示不同内容：

@if (User.Identity.IsAuthenticated)  
{  
    <p>欢迎您，@User.Identity.Name！</p>  
}  
else  
{  
    <p>请先登录</p>  
}

此示例通过判断用户是否已登录，动态切换显示文本。

2.2 循环遍历：动态生成列表

循环语句（如 foreach、for）可直接嵌入 HTML 结构中。例如，展示用户列表：

<ul>  
    @foreach (var user in Model.Users)  
    {  
        <li>@user.Name - @user.Email</li>  
    }  
</ul>

此处 Model.Users 是从控制器传递的集合，通过 foreach 遍历生成列表项。

三、表达式与代码块的进阶用法

3.1 复杂表达式的嵌套

Razor 支持在内联表达式中使用复杂的 C# 逻辑。例如：

<p>剩余库存：@(item.Quantity > 0 ? item.Quantity.ToString() : "已售罄")</p>

此代码通过三元运算符判断库存是否充足，并动态显示结果。

3.2 代码块的多行逻辑

当需要执行多行代码时，可使用代码块 @{}，例如：

@{  
    var total = 0;  
    foreach (var item in Model.Items)  
    {  
        total += item.Price * item.Quantity;  
    }  
}  
<p>总金额：@total 元</p>

代码块中的变量 total 在当前作用域内可被后续内联表达式引用。

四、布局页与分部视图的协同工作

4.1 布局页：统一页面结构的“装修模板”

布局页（如 _Layout.cshtml）是 Web 应用的通用模板，通过 @RenderBody() 定义内容占位。例如：

<!-- _Layout.cshtml -->  
<!DOCTYPE html>  
<html>  
<head>  
    <title>@ViewBag.Title</title>  
</head>  
<body>  
    @RenderBody()  
</body>  
</html>

其他页面通过继承布局页实现结构复用，例如：

@{  
    Layout = "_Layout.cshtml";  
    ViewBag.Title = "首页";  
}  
<div>欢迎访问本站！</div>

4.2 分部视图：模块化的代码块

分部视图（如 _Header.cshtml）可封装重复使用的 UI 组件。例如：

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

在主页面中通过 @Html.Partial 调用：

@Html.Partial("_Header")  
@RenderBody()

五、表单处理与模型绑定

5.1 表单提交的动态绑定

Razor 支持通过 @Html.TextBoxFor 等辅助方法生成表单字段，并自动绑定模型属性。例如：

@model MyProject.Models.User  
<form method="post">  
    @Html.LabelFor(m => m.Name)  
    @Html.TextBoxFor(m => m.Name)  
    <button type="submit">提交</button>  
</form>

提交时，表单数据会自动映射到 User 模型，无需手动解析请求参数。

5.2 验证错误的动态显示

结合数据注解（如 [Required]），Razor 可自动渲染验证错误信息。例如：

@Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })

当 Email 字段未通过验证时，此代码会显示对应的错误提示。

六、安全性与性能优化

6.1 防止 XSS 攻击

直接输出用户输入内容时，需使用 @Html.Raw 谨慎处理：

<!-- 不安全示例 -->  
<p>@user.Content</p>  

<!-- 安全示例 -->  
<p>@Html.Raw(Sanitizer.Sanitize(user.Content))</p>

通过 Sanitizer 库过滤危险 HTML 标签，避免跨站脚本攻击。

6.2 缓存与代码片段复用

对于静态内容，可使用 @cache 指令提升性能：

@cache("header")  
{  
    @Html.Partial("_Header")  
}

此代码将分部视图的输出缓存，减少重复渲染开销。

结论：ASP.NET Razor 语法的实践价值

通过本文的讲解，我们看到 ASP.NET Razor 语法如何将 HTML 与 C# 紧密结合，为开发者提供高效、直观的 Web 开发体验。从基础的变量输出到复杂的表单验证，Razor 的灵活性和功能性使其成为构建现代化 Web 应用的利器。对于初学者而言，建议从简单案例入手，逐步探索条件语句、循环和模型绑定的用法；中级开发者则可深入学习布局页优化、安全策略及性能调优。掌握这一语法，不仅能提升开发效率，更能为构建高质量 Web 应用打下坚实基础。

注：本文通过循序渐进的讲解和代码示例，帮助读者系统掌握 ASP.NET Razor 语法的核心知识点，同时结合实际场景演示其应用价值。

最新发布

查看更多文章