常见的Razor指令及用法

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.";
} *@