ASP.NET Core MVC（及其前身ASP.NET MVC）提供了强大的视图引擎，其中Razor是默认且最流行的视图引擎。Razor语法简洁、直观，与HTML无缝集成，使得编写视图变得高效。此外，ASP.NET Core引入了Tag Helpers（标签助手），这是一种全新的机制，用于在视图中生成和操作HTML标签，它比传统的HTML Helpers更符合HTML风格，且更易于使用和维护。
本文将深入解析Razor语法的核心特性，并详细探讨Tag Helpers的原理、内置Tag Helpers的使用以及如何创建自定义Tag Helpers。最后，通过一个实战示例将两者结合应用。
一、 Razor语法深度解析
Razor是一种标记语法，用于将基于.NET的代码嵌入到HTML网页中。它不是编程语言，而是服务器端标记语言。
1. 基础语法：代码块与表达式
Razor使用
@
符号来标识代码的开始。
1.1 隐式表达式 (Implicit Expressions)
隐式表达式用于直接在HTML中输出变量或计算结果。它以
@
开头，后跟变量名或代码，直到遇到非字母数字字符为止。
示例：
假设在控制器中传递了一个
Message
属性：
// Controller
public IActionResult Index()
{
ViewData[“Message”] = “欢迎使用Razor视图引擎！”;
return View();
}
在Razor视图中：

@ViewData[“Message”]

计算结果: @(3 + 5)

注意：
如果表达式包含特殊字符（如空格），必须使用圆括号
()
将其包裹，否则Razor会只解析括号前的部分。
1.2 显式表达式 (Explicit Expressions)
显式表达式使用圆括号
()
包裹代码。这在处理复杂逻辑或避免歧义时非常有用。
示例：

@(DateTime.Now.Year)

@DateTime.Now.Year.ToString()

@(DateTime.Now.Year.ToString())
1.3 代码块 (Code Blocks)
代码块使用
@{ … }
包裹，允许你编写多行C#代码。块内的代码不会直接输出到页面，除非显式调用输出。
示例：
@{
var total = 10;
var message = “当前总数是: ” + total;
}

@message

在代码块中混合HTML：
你可以在代码块中编写HTML，但通常不推荐，除非是为了条件逻辑。
@{
if (User.Identity.IsAuthenticated)
{
欢迎回来, @User.Identity.Name!
}
else
{
请登录。
}
}
2. 控制流：条件与循环
Razor支持C#的控制流语句，但语法略有不同，通常需要使用
@
开始。
2.1 条件语句：
@if
和
@switch
@if
示例：
@{
var role = “Admin”;
}

@if (role == “Admin”)
{

}
else if (role == “Editor”)
{

}
else
{
只读访问
}
@switch
示例：
@switch (role)
{
case “Admin”:
管理员权限
break;
case “Editor”:
编辑权限
break;
default:
访客权限
break;
}
2.2 循环语句：
@for
,
@foreach
,
@while
@foreach
(最常用)：
遍历集合数据是视图最常见的任务。
@model List // 假设模型是字符串列表

@item

}

@for
(带索引)：
@for (int i = 0; i < 5; i++) {

这是第 @(i+1) 行

}
3. Razor中的重要概念
3.1
@model
指令
这是Razor中最常用的指令之一。它指定视图期望的强类型模型对象。这使得IntelliSense（智能感知）可用，并提供类型安全。
用法：
@model MyProject.ViewModels.UserViewModel

@Model.UserName

@Model.Email

3.2
@inherits
指令
@inherits
允许你指定视图的基类。这比
@model
更底层，通常用于创建具有公共逻辑的自定义视基类。
自定义基类：
// CustomBasePage.cshtml.cs (Razor视图模型基类)
public abstract class CustomBasePage : Microsoft.AspNetCore.Mvc.Razor.RazorPage
{
public string PageTitle => $”MyApp – {Model?.GetType().Name}”;
}
视图中使用：
@inherits CustomBasePage

@PageTitle

3.3
@using
指令
用于在视图中引入命名空间，这样你就可以使用该命名空间下的类而不需要全限定名。
@using System.Globalization
@using MyProject.Extensions

@CultureInfo.CurrentCulture.Name

@Html.SomeCustomExtensionMethod()

3.4 局部视图 (Partial Views)
局部视图允许你将视图分解为更小的、可重用的组件。
创建局部视图
_UserCard.cshtml
：

@ViewBag.UserName

Some quick example text.

在主视图中调用：

3.5 注入 (Dependency Injection –
@inject
)
Razor视图可以直接通过
@inject
指令注入服务。这在视图需要访问数据库上下文、日志记录器或本地化服务时非常有用。
Startup/Program.cs 配置服务：
services.AddScoped();
视图中使用：
@inject IMyService MyService

服务返回的值: @MyService.GetData()

二、 Tag Helpers 深度解析
Tag Helpers是ASP.NET Core特有的功能，它允许服务器端代码参与视图中HTML元素的创建和渲染。与HTML Helpers相比，Tag Helpers看起来就像普通的HTML标签。
1. 为什么使用 Tag Helpers？
HTML友好的语法
：开发者（包括前端开发者）更容易阅读和理解。
IDE支持
：Visual Studio和VS Code对Tag Helpers有很好的智能感知支持。
可重用性
：可以创建自定义Tag Helpers来封装复杂的HTML逻辑。
安全性
：自动处理XSS攻击（通过HTML编码）。
2. 内置 Tag Helpers 详解
ASP.NET Core 提供了许多内置的Tag Helpers。
2.1

标签助手 (Anchor Tag Helper)
用于生成指向控制器动作的链接。
传统HTML：
About
Tag Helper：
About
asp-controller
: 目标控制器。
asp-action
: 目标动作方法。
asp-route-{paramName}
: 动态路由参数。
2.2

asp-for
: 绑定到模型的特定属性（Model Binding）。
asp-validation-for
: 显示该属性的验证错误信息。
2.3

标签助手
用于处理图片路径，防止硬编码。

asp-append-version=”true”
: 自动添加文件哈希值（Query String），解决浏览器缓存问题。例如：
src=”/images/logo.png?v=Kl_dqr9NVtnMdsM2MUg4qthUnWZm5T1iCEkgG5rit3c”
。
2.4

标签助手
根据环境（开发或生产）包含不同的脚本或样式。

3. 自定义 Tag Helpers
这是Tag Helpers最强大的地方。你可以编写C#类来生成HTML。
3.1 创建基础自定义 Tag Helper
假设我们要创建一个

标签，用于生成Bootstrap样式的警告框。
步骤 1: 创建类
using Microsoft.AspNetCore.Razor.TagHelpers;

namespace MyProject.TagHelpers
{
// 指定此Tag Helper处理的HTML标签名称
[HtmlTargetElement(“alert”)]
public class AlertTagHelper : TagHelper
{
// 定义属性，这些属性可以在HTML中设置
[HtmlAttributeName(“type”)]
public string Type { get; set; } = “info”; // 默认值

// Process 方法是核心，用于生成HTML
public override void Process(TagHelperContext context, TagHelperOutput output)
{
// 1. 设置标签名称 (例如将转换为

)
output.TagName = “div”;

// 2. 添加CSS类
output.Attributes.SetAttribute(“class”, $”alert alert-{Type}”);

// 3. 设置内容 (保留原始内容)
// output.Content.SetContent(“…”); // 这会覆盖内部HTML
// 我们希望保留 … 中的内容，所以不做修改，只包裹
}
}
}
步骤 2: 在视图中使用
首先需要在
_ViewImports.cshtml
中导入Tag Helpers：
@addTagHelper *, MyProject
然后在视图中：
操作成功！数据已保存。
发生错误，请重试。
渲染结果：

操作成功！数据已保存。

发生错误，请重试。

3.2 进阶：自定义 Form Tag Helper
让我们创建一个更复杂的示例：一个自动生成表单结构的Tag Helper，它接收一个ViewModel类型，并自动渲染其所有属性。
场景
：快速生成一个简单的增删改查（CRUD）表单。
C# 代码 (FormGeneratorTagHelper.cs):
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;
using System.ComponentModel.DataAnnotations;
using System.Reflection;

namespace MyProject.TagHelpers
{
[HtmlTargetElement(“auto-form”)]
public class FormGeneratorTagHelper : TagHelper
{
// 接收模型类型
[HtmlAttributeName(“for”)]
public ModelExpression For { get; set; }

public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.TagName = “form”;
output.Attributes.SetAttribute(“class”, “generated-form”);

// 获取模型类型的所有属性
var modelType = For.ModelExplorer.ModelType;
var properties = modelType.GetProperties();

var contentBuilder = new System.Text.StringBuilder();

foreach (var prop in properties)
{
// 获取显示名称（如果有的话）
var displayAttr = prop.GetCustomAttribute();
string displayName = displayAttr?.Name ?? prop.Name;

// 简单的输入生成逻辑
contentBuilder.AppendLine($”

“);
contentBuilder.AppendLine($”{displayName}“);

// 根据类型判断输入框类型 (简化版)
string inputType = prop.PropertyType == typeof(int) || prop.PropertyType == typeof(double) ? “number” : “text”;

// 生成 input 标签 (这里手动拼接HTML，实际项目中建议使用 TagHelperOutput 或 ViewContext)
contentBuilder.AppendLine($”“);
contentBuilder.AppendLine($”

“);
}

contentBuilder.AppendLine($”“);

// 设置生成的HTML内容
output.PostContent.SetHtmlContent(contentBuilder.ToString());
}
}
}
视图中使用：
@model MyProject.ViewModels.CreateUserViewModel

渲染结果：

三、实战应用：构建一个动态卡片列表
我们将结合Razor语法和Tag Helper构建一个展示用户列表的页面。
1. 准备工作
模型 (User.cs):
public class User
{
public int Id { get; set; }
public string Name { get; set; }
public string Email { get; set; }
public bool IsActive { get; set; }
}
控制器 (UserController.cs):
public class UserController : Controller
{
public IActionResult Index()
{
var users = new List
{
new User { Id = 1, Name = “Alice”, Email = “alice@example.com”, IsActive = true },
new User { Id = 2, Name = “Bob”, Email = “bob@example.com”, IsActive = false },
new User { Id = 3, Name = “Charlie”, Email = “charlie@example.com”, IsActive = true }
};
return View(users);
}
}
2. 创建自定义 Tag Helper (UserCard)
我们需要一个Tag Helper来渲染用户卡片，并根据
IsActive
状态改变颜色。
UserCardTagHelper.cs:
using Microsoft.AspNetCore.Razor.TagHelpers;

namespace MyProject.TagHelpers
{
[HtmlTargetElement(“user-card”)]
public class UserCardTagHelper : TagHelper
{
public User User { get; set; } // 接收User对象

public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.TagName = “div”;

// 根据状态设置样式
string statusClass = User.IsActive ? “border-success” : “border-secondary”;
string badgeClass = User.IsActive ? “bg-success” : “bg-secondary”;

output.Attributes.SetAttribute(“class”, $”card mb-3 {statusClass}”);
output.Attributes.SetAttribute(“style”, “width: 18rem;”);

// 构建内部HTML
var html = $@”

{User.Name}

{User.Email}

{(User.IsActive ? “Active” : “Inactive”)}
编辑

“;

output.Content.SetHtmlContent(html);
}
}
}
3. 编写 Razor 视图 (Index.cshtml)
@model List

@{
ViewData[“Title”] = “用户列表”;
var activeCount = Model.Count(u => u.IsActive);
}

总共有 @Model.Count 名用户，其中 @activeCount 名处于激活状态。

}

@foreach (var user in Model)
{

}

返回首页

4. 结果分析
这个实战示例展示了：
Razor
@model
和
@foreach
：用于接收强类型数据并循环遍历。
Razor 代码块
@{}
：用于计算统计信息。
自定义 Tag Helper

：将复杂的HTML结构和状态判断逻辑封装在C#类中，使得视图非常干净，只关注数据的遍历。
内置 Tag Helper

：生成安全的URL。
四、总结
Razor
是视图的骨架，它提供了简洁的语法来混合C#和HTML，处理数据绑定、逻辑控制和页面渲染。
Tag Helpers
是视图的肌肉，它提供了可重用的组件化方式来生成HTML。相比HTML Helpers，它更现代、更符合Web标准。
最佳实践
：
尽量使用强类型模型 (
@model
)。
将复杂的UI逻辑封装在自定义 Tag Helpers 中。
利用
@inject
在视图中访问服务，但不要过度（业务逻辑应留在Controller或Service层）。
使用局部视图 ( ) 来拆分大型视图文件。
通过掌握Razor和Tag Helpers，你可以构建出既高效又易于维护的ASP.NET Core MVC应用程序。

ASP.NET MVC视图引擎Razor语法与TagHelper深度解析与实战应用指南

@Model.UserName

@PageTitle

@ViewBag.UserName

{User.Name}

{User.Email}