常见的Razor指令及用法

编程技术
, ,
1

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