Razor 是一种用于构建动态网页的标记语法,它嵌入在 HTML 中,并在服务器端进行处理,最终生成 HTML 页面发送给浏览器。 Razor 指令是 Razor 语法的核心组成部分,它们以 @
符号开头,用于指示 Razor 引擎执行特定的操作或理解代码块。
Razor 指令是构建动态 ASP .NET 应用程序的基础,通过组合这些指令,可以在视图中嵌入 C# 代码、控制流程、处理数据、生成 HTML 内容,并与服务器端逻辑进行交互。
代码块指令
代码块指令 @{ ... }
- 作用: 用于定义包含 C# 代码的 Razor 代码块。代码块中的代码会在服务器端执行。
- 使用:
@{
var message = "Hello from Razor code block!";
var currentTime = DateTime.Now;
}
<p>@message</p>
<p>当前时间: @currentTime</p>
代码块通常用于声明变量、执行逻辑、调用方法等,而不会直接输出 HTML 内容。如果需要在代码块中输出 HTML,可以使用 @:
,<text>
,@Html.Raw()
等方式。
内联表达式指令
内联表达式指令 @(...)
或 @变量 / 属性
- 作用: 用于在 HTML 中内联 C# 表达式的值并将其渲染为字符串。
- 使用:
简单变量/属性:
@model string // 假设 Model 是字符串类型
<h1>@Model</h1> // 直接输出 Model 的值
复杂表达式: 需要用括号 ( )
包裹
@{
var name = "John Doe";
}
<p>欢迎你, @(name.ToUpper()) !</p> // 调用字符串的 ToUpper() 方法
<p>今天的日期是:@(DateTime.Now.ToShortDateString())</p> //调用 DateTime 的静态属性和方法
Razor 引擎会自动对表达式的值进行 HTML 编码,防止 XSS 攻击。
文本输出指令
文本输出指令 @:
- 作用: 用于在 Razor 代码块中输出纯文本内容,不进行任何 HTML 编码或者 C# 代码解析。
- 使用:
@{
if (true)
{
@: 这是一行纯文本,即使在代码块中也能输出。
@: 你可以输出多行文本。
}
}
@:
后的内容会被直接输出到 HTML,常用于在代码块中穿插文本输出。
控制流指令
控制流指令有: @if
、 @else if
、 @else
、 @for
、 @foreach
、 @while
、 @do-while
、 @switch
- 作用: 用于在 Razor 视图中实现条件判断和循环逻辑,根据条件或集合动态生成 HTML 内容。
- 使用:
@if
、 @else if
、 @else
:条件语句
@if (Model.IsLoggedIn)
{
<p>欢迎回来,@Model.UserName!</p>
}
else
{
<p>请登录以查看更多内容。</p>
}
@for
:for 循环
<ul>
@for (int i = 0; i < 5; i++)
{
<li>项目 @(i + 1)</li>
}
</ul>
@foreach
:foreach 循环(遍历集合)
@model List<string>
<ul>
@foreach (var item in Model)
{
<li>@item</li>
}
</ul>
@while
、 @do-while
、 @switch
:用法与 C# 中的标准语法类似,只是在 Razor 中使用 @
前缀。
模型指令
模型指令 @model
或 @inherits
- 作用: 用于指定 Razor 视图的模型类型,或者指定视图继承的基类。
- 使用:
@model
:指定视图的模型类型(常用)
@model YourNamespace.ViewModels.MyViewModel
<h1>@Model.PageTitle</h1>
<p>@Model.Description</p>
@model
指令必须是 Razor 视图文件的第一行(或位于 @using
,@inject
等指令之后但在任何 HTML 内容之前)。
@inherits
:指定视图继承的基类(用于自定义视图行为,较少用)
@inherits YourNamespace.BaseViewPage<YourNamespace.ViewModels.MyViewModel>
命名空间指令
命名空间指令 @using
- 作用: 用于在 Razor 视图文件中引入 C# 命名空间,使得命名空间中的类型可以直接使用,无需写完整限定名。
- 使用:
@using System
@using System.Collections.Generic
@using YourNamespace.Services
@{
var now = DateTime.Now; // 可以直接使用 DateTime,因为引入了 System 命名空间
var myList = new List<string>(); // 可以直接使用 List<string>,因为引入了 System.Collections.Generic
var myService = new MyService(); // 假设 MyService 在 YourNamespace.Services 命名空间,也已引入
}
布局指令
布局指令 @{ Layout = "..."; }
或 Layout = "...";
- 作用: 用于指定当前 Razor 视图使用的布局页 (Layout Page),实现页面结构的统一和复用。
- 使用:
在 Razor 视图文件的顶部代码块中设置 Layout
属性:
@{
Layout = "_Layout"; // 假设布局页文件名为 _Layout.cshtml,位于 Views/Shared 目录
ViewData["Title"] = "我的页面标题"; // 可选: 设置 ViewData,在布局页中使用
}
可以直接在 Razor 视图文件的顶部设置 Layout
属性更简洁,
ASP .NET Core Razor Pages 默认使用:
razor @page @{ Layout = "_Layout"; ViewData["Title"] = "我的页面标题"; }
HTML助手方法
HTML 助手方法 @Html. ...
- 作用: Razor 提供了
HtmlHelper
类(通过@Html
对象访问),包含一系列静态方法,用于生成常用的 HTML 元素、链接、表单控件等,并能处理模型绑定、验证等功能。 - 常用
HtmlHelper
方法:@Html.ActionLink("链接文本", "ActionName", "ControllerName", routeValues)
:生成链接到指定 Action 的<a>
标签。@Html.BeginForm("ActionName", "ControllerName", FormMethod.Post)
和@Html.EndForm()
:生成 HTML 表单。@Html.TextBoxFor(model => model.PropertyName)
:生成绑定到模型属性的文本输入框<input type="text" />
。@Html.LabelFor(model => model.PropertyName)
:生成关联模型属性的标签<label>
。@Html.ValidationMessageFor(model => model.PropertyName)
:显示模型属性的验证错误消息。@Html.Partial("_PartialViewName", Model)
:渲染部分视图 (Partial View)。@Html.Raw(htmlString)
:输出未编码的 HTML 字符串,通常用于输出包含 HTML 标签的内容。
示例:
@model YourNamespace.ViewModels.MyFormViewModel
@using (Html.BeginForm("SubmitForm", "Home", FormMethod.Post))
{
@Html.LabelFor(m => m.Name, "姓名:")
@Html.TextBoxFor(m => m.Name)
@Html.ValidationMessageFor(m => m.Name)
<br />
@Html.LabelFor(m => m.Email, "邮箱:")
@Html.TextBoxFor(m => m.Email)
@Html.ValidationMessageFor(m => m.Email)
<br />
<button type="submit">提交</button>
}
URL助手方法
URL 助手方法 @Url. ...
- 作用: Razor 提供了
UrlHelper
类(通过@Url
对象访问),用于生成应用程序的 URL(相对或绝对路径)。 - 常用
UrlHelper
方法:@Url.Action("ActionName", "ControllerName", routeValues)
:生成指向指定 Action 的 URL。@Url.Content("~/path/to/resource")
:生成指向应用根目录相对路径的 URL,用于引用静态资源(如 CSS, JavaScript, Images)。@Url.RouteUrl("RouteName", routeValues)
:根据路由名称和参数生成 URL(用于命名路由)。
示例:
<a href="@Url.Action("Index", "Home")">回到首页</a>
<link rel="stylesheet" href="@Url.Content("~/css/site.css")" />
注入指令
注入指令 @inject
- 作用: 用于在 Razor 视图中注入服务依赖项(Dependency Injection)。
- 使用:
@inject YourNamespace.Services.IMyService MyService
@{
var data = MyService.GetData(); // 使用注入的服务
}
<ul>
@foreach (var item in data)
{
<li>@item</li>
}
</ul>
@inject
指令通常放在 @model
或 @using
指令之后,但在 HTML 内容之前。需要先在 Startup.ConfigureServices
中配置依赖注入。
组件指令
组件指令 <Component />
、 <Component Parameter="value" />
、 <Component> ... </Component>
(Blazor 特有,ASP .NET Core MVC/Razor Pages 也开始支持)
- 作用: 用于在 Razor 视图中渲染 Razor 组件 (通常用于 Blazor 应用,但 ASP .NET Core MVC/Razor Pages 也逐渐支持 Razor Components)。
- 使用:
@page "/my-page"
<h1>这是我的页面</h1>
<MyCounterComponent IncrementAmount="10" /> // 渲染名为 MyCounterComponent 的组件
<MyAnotherComponent>
<p>组件内容插槽!</p>
</MyAnotherComponent>
组件指令类似于 HTML 标签,用于实例化和渲染 Razor 组件。
可以通过属性 (Parameters) 向组件传递数据。
可以使用标签闭合语法 <Component> ... </Component>
来定义组件的内容插槽(RenderFragments)。
注释指令
注释指令 @* ... *@
- 作用: 用于在 Razor 代码中添加注释,注释内容不会被 Razor 引擎处理,也不会输出到最终的 HTML 页面。
- 使用:
@* 这是一行 Razor 注释。
它可以跨越多行。
*@
<p>这段文字是可见的。</p>
@* @{ // 注释掉一段 Razor 代码块
var hiddenMessage = "This will not be rendered.";
} *@