Razor 是一种轻量级且功能强大的视图引擎，广泛用于 ASP.NET
MVC 和 ASP.NET Core 中，它允许开发者将 C# 代码与 HTML 标记语言无缝结合，从而生成动态网页内容。以下是对
Razor 语法的全面指南，涵盖基础
语法、常用结构以及最佳实践。
### 3.1
Razor 中的 `@` 符号
`@` 符号是
Razor 的核心
语法标记，用于切换 HTML 和 C# 代码的上下文。在
Razor 文件中，遇到 `@` 时，后续内容将被视为 C# 表达式或语句。
例如，以下代码将当前日期时间显示在页面上：
```csharp
<p>当前时间：@DateTime.Now</p>
```
如果需要在文本中使用 `@` 符号本身（例如电子邮件地址），可以使用双 `@` 来转义：
```html
<p>联系我：example@@domain.com</p>
```
### 3.2 嵌入 C# 代码块
Razor 允许嵌入多行 C# 代码块，使用 `@{ ... }` 定义。这些代码块可以包含变量声明、条件判断、循环等逻辑。
```csharp
@{
var message = "欢迎使用
Razor";
if (DateTime.Now.Hour < 12)
{
message += "，上午好！";
}
else
{
message += "，下午好！";
}
}
<p>@message</p>
```
### 3.3 条件语句与循环结构
Razor 支持常见的 C# 控制结构，如 `if`、`else`、`for`、`foreach` 等。这些结构无需额外的 `@` 前缀，但需要在 HTML 中正确闭合。
```csharp
@if (DateTime.Now.DayOfWeek == DayOfWeek.Saturday)
{
<p>今天是周末！</p>
}
else
{
<p>今天是工作日。</p>
}
<ul>
@foreach (var item in new[] { "苹果", "香蕉", "橙子" })
{
<li>@item</li>
}
</ul>
```
### 3.4 模型绑定与强类型视图
Razor 支持通过 `@model` 指令绑定模型对象，从而实现强类型视图。这样可以在视图中访问模型属性并进行类型检查。
```csharp
@model MyProject.Models.Product
<p>产品名称：@Model.Name</p>
<p>价格：@Model.Price.ToString("C")</p>
```
### 3.5 布局页与部分视图
Razor 支持布局页（Layout）和部分视图（Partial Views），以实现页面结构的复用和模块化。
- **布局页**：通常定义为 `_Layout.cshtml`，并通过 `@RenderBody()` 指定内容插入点。
```csharp
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
</head>
<body>
<header>公共头部</header>
<main>
@RenderBody()
</main>
<footer>公共底部</footer>
</body>
</html>
```
- **视图中使用布局**：
```csharp
@{
Layout = "_Layout";
}
<h1>首页内容</h1>
```
- **部分视图**：通过 `@await Html.PartialAsync("_PartialViewName")` 引入。
### 3.6 表单与 HTML 辅助方法
Razor 提供了丰富的 HTML 辅助方法，用于生成表单、链接、标签等。这些方法通常以 `@Html.` 开头。
```csharp
@using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post))
{
@Html.Label("username", "用户名")
@Html.TextBox("username")
<input type="submit" value="提交" />
}
```
### 3.7 JavaScript 与
Razor 的结合
在
Razor 页面中，可以将 C# 变量传递给 JavaScript，实现动态脚本逻辑。
```csharp
<script>
var serverTime = "@DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")";
console.log("
服务器时间：" + serverTime);
</script>
```
### 3.8
Razor 语法重构与迁移建议
在某些情况下，例如将旧的 WebForms 视图迁移到
Razor 或进行跨平台迁移时，可能需要对现有代码进行重构。建议手动检查
服务器端脚本，并将其转换为客户端 JavaScript 或视图模型逻辑[^2]。对于复杂逻辑，可参考官方文档或社区资源获取迁移方案。
### 3.9 使用 DevExtreme 等第三方控件库
在 ASP.NET Core 项目中，可结合 DevExtreme 等现代 UI 控件库，提升界面交互体验。DevExtreme 提供了丰富的 HTML5/JavaScript 小部件，如数据网格、图表、编辑器等，支持
Razor 语法集成[^3]。
例如，使用 DevExtreme 的数据网格控件：
```csharp
@using DevExtreme.AspNet.
Mvc
@(Html.DevExtreme().DataGrid()
.ID("grid")
.DataSource(d => d.WebApi().Controller("Products"))
.Columns(columns =>
{
columns.Add().DataField("Name");
columns.Add().DataField("Price");
})
)
```
扫一扫
697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
