Razor 是一个用于将基于服务器的代码嵌入到网页中的标记语法。 Razor语法由 Razor 标记、c # 和 HTML 组成。 通常包含 Razor 的文件的扩展名 cshtml
Razor 语法
Razor 支持 c #,并使用 @
符号从 HTML 转换为 c #。 Razor 计算 c # 表达式并在 HTML 输出中呈现。
当 @
符号后跟 Razor 保留关键字时,它会转换为 Razor 特定标记。 否则会转换为纯 C#。
该代码在 HTML 中使用单个 @
符号呈现:
<p>@Username</p>
包含电子邮件地址的 HTML 属性和内容不将 @
符号视为转换字符。 以下示例中的电子邮件地址将通过分析来保持不变 Razor :
<a href="mailto:Support@contoso.com">Support@contoso.com</a>
若要对 @
标记中的符号进行转义 Razor ,请使用第二个 @
符号:
<p>@@Username</p>
隐式 Razor 表达式
隐式 Razor 表达式以开头, @
后跟 c # 代码:
隐式表达式不能包含空格,但 C# await
关键字除外。 如果该 C# 语句具有明确的结束标记,则可以混用空格:
<p>@await DoSomething("hello", "world")</p>
隐式表达式 不能 包含 C# 泛型,因为括号 (<>
) 内的字符会被解释为 HTML 标记。 以下代码 无 效:
<p>@GenericMethod<int>()</p>
上述代码生成与以下错误之一类似的编译器错误:
-
“int” 元素未结束。 所有元素都必须自结束或具有匹配的结束标记。
-
无法将方法组 “GenericMethod” 转换为非委托类型 “object”。 是否希望调用此方法?`
泛型方法调用必须在显式 Razor 表达式或 Razor 代码块中进行包装。
显式 Razor 表达式
显式 Razor 表达式由 @
带对称括号的符号组成。 若要呈现上周的时间,请 Razor 使用以下标记:
<p>Last week this time: @(DateTime.Now - TimeSpan.FromDays(7))</p>
将计算 @()
括号中的所有内容,并将其呈现到输出中。
前面部分中所述的隐式表达式通常不能包含空格。 在下面的代码中,不会从当前时间减去一周:
<p>Last week: @DateTime.Now - TimeSpan.FromDays(7)</p>
该代码呈现以下 HTML:
<p>Last week: 7/7/2016 4:39:52 PM - TimeSpan.FromDays(7)</p>
可以使用显式表达式将文本与表达式结果串联起来:
@{ var joe = new Person("Joe", 33); } <p>Age@(joe.Age)</p>
如果不使用显式表达式,<p>Age@joe.Age</p>
会被视为电子邮件地址,因此会呈现<p>Age@joe.Age</p>
。 如果编写为显式表达式,则呈现<p>Age33</p>
。
显式表达式可用于从 .cshtml 文件中的泛型方法呈现输出。 以下标记显示了如何更正之前出现的由 C# 泛型的括号引起的错误。 此代码以显式表达式的形式编写:
<p>@(GenericMethod<int>())</p>
表达式编码
计算结果为字符串的 C# 表达式采用 HTML 编码。 计算结果为 IHtmlContent
的 C# 表达式直接通过 IHtmlContent.WriteTo
呈现。 计算结果不为 IHtmlContent
的 C# 表达式通过 ToString
转换为字符串,并在呈现前进行编码。
@("<span>Hello World</span>")
前面的代码呈现以下 HTML:
<span>Hello World</span>
HTML 在浏览器中显示为纯文本:
<span> Hello World < /span>
HtmlHelper.Raw
输出不进行编码,但呈现为 HTML 标记。
警告
对未经审查的用户输入使用
HtmlHelper.Raw
会带来安全风险。 用户输入可能包含恶意的 JavaScript 或其他攻击。 审查用户输入比较困难。 应避免对用户输入使用HtmlHelper.Raw
。@Html.Raw(“<span>Hello World</span>”)
该代码呈现以下 HTML:
<span>Hello World</span>
Razor 代码块
Razor 代码块以开头 @
,并由括起来 {}
。 代码块内的 C# 代码不会呈现,这点与表达式不同。 一个视图中的代码块和表达式共享相同的作用域并按顺序进行定义:
@{ var quote = "The future depends on what you do today. - Mahatma Gandhi"; } <p>@quote</p> @{ quote = "Hate cannot drive out hate, only love can do that. - Martin Luther King, Jr."; } <p>@quote</p>
该代码呈现以下 HTML:
<p>The future depends on what you do today. - Mahatma Gandhi</p> <p>Hate cannot drive out hate, only love can do that. - Martin Luther King, Jr.</p>
在代码块中,使用标记将本地函数声明为用作模板化方法:
@{ void RenderName(string name) { <p>Name: <strong>@name</strong></p> } RenderName("Mahatma Gandhi"); RenderName("Martin Luther King, Jr."); }
该代码呈现以下 HTML:
<p>Name: <strong>Mahatma Gandhi</strong></p> <p>Name: <strong>Martin Luther King, Jr.</strong></p>
隐式转换
代码块中的默认语言是 c #,但 Razor 页面可转换回 HTML:
@{ var inCSharp = true; <p>Now in HTML, was in C# @inCSharp</p> }
带分隔符的显式转换
若要定义应呈现 HTML 的代码块的子节,请将字符括在标记后 Razor <text>
:
@for (var i = 0; i < people.Length; i++) { var person = people[i]; <text>Name: @person.Name</text> }
使用此方法可呈现未被 HTML 标记括起来的 HTML。 如果没有 HTML 或 Razor 标记,则 Razor 会发生运行时错误。
<text>
标记可用于在呈现内容时控制空格:
-
仅呈现
<text>
标记之间的内容。 -
<text>
标记之前或之后的空格不会显示在 HTML 输出中。
显式行转换
要在代码块内以 HTML 形式呈现整个行的其余内容,请使用 @:
语法:
@for (var i = 0; i < people.Length; i++) { var person = people[i]; @:Name: @person.Name }
如果 @:
代码中没有,则 Razor 会生成运行时错误。
@
文件中的额外字符 Razor 可能会导致在块中后面的语句中出现编译器错误。 这些编译器错误可能难以理解,因为实际错误发生在报告的错误之前。 将多个隐式/显式表达式合并到单个代码块以后,经常会发生此错误。
控制结构
控制结构是对代码块的扩展。 代码块的各个方面(转换为标记、内联 C#)同样适用于以下结构:
条件语句 @if, else if, else, and @switch
@if
控制何时运行代码:
@if (value % 2 == 0) { <p>The value was even.</p> }
else
和else if
不需要@
符号:
@if (value % 2 == 0) { <p>The value was even.</p> } else if (value >= 1337) { <p>The value is large.</p> } else { <p>The value is odd and small.</p> }
以下标记展示如何使用 switch 语句:
@switch (value) { case 1: <p>The value is 1!</p> break; case 1337: <p>Your number is 1337!</p> break; default: <p>Your number wasn't 1 or 1337.</p> break; }
循环语句 @for, @foreach, @while, and @do while
可以使用循环控制语句呈现模板化 HTML。 若要呈现一组人员:
@{ var people = new Person[] { new Person("Weston", 33), new Person("Johnathon", 41), ... }; }
支持以下循环语句:
@for
@for (var i = 0; i < people.Length; i++) { var person = people[i]; <p>Name: @person.Name</p> <p>Age: @person.Age</p> }
@foreach
@foreach (var person in people) { <p>Name: @person.Name</p> <p>Age: @person.Age</p> }
@while
@{ var i = 0; } @while (i < people.Length) { var person = people[i]; <p>Name: @person.Name</p> <p>Age: @person.Age</p> i++; }
@do while
@{ var i = 0; } @do { var person = people[i]; <p>Name: @person.Name</p> <p>Age: @person.Age</p> i++; } while (i < people.Length);
复合语句 @using
在 C# 中,using
语句用于确保释放对象。 在中 Razor ,使用相同的机制来创建包含其他内容的 HTML 帮助器。 在下面的代码中,HTML 帮助程序使用 @using
语句呈现 <form>
标记:
@using (Html.BeginForm()) { <div> Email: <input type="email" id="Email" value=""> <button>Register</button> </div> }
@try, catch, finally
异常处理与 C# 类似:
@try { throw new InvalidOperationException("You did something invalid."); } catch (Exception ex) { <p>The exception message: @ex.Message</p> } finally { <p>The finally statement.</p> }
@lock
Razor 能够用 lock 语句保护关键部分:
@lock (SomeLock) { // Do critical section work }
说明
Razor 支持 c # 和 HTML 注释:
@{ /* C# comment */ // Another C# comment } <!-- HTML comment -->
该代码呈现以下 HTML:
<!-- HTML comment -->
Razor 在呈现网页之前,服务器将删除注释。 Razor 用于 @* *@
分隔注释。 以下代码已被注释禁止,因此服务器不呈现任何标记:
@* @{ /* C# comment */ // Another C# comment } <!-- HTML comment --> *@
指令
Razor 指令由带有符号后的保留关键字的隐式表达式表示 @
。 指令通常用于更改视图分析方式或启用不同的功能。
@attribute
@attribute
指令将给定的属性添加到生成的页或视图的类中。 以下示例添加 [Authorize]
属性:
@attribute [Authorize]
@code
此方案仅适用于 Razor ( razor) 的组件。
@code
块使 Razor 组件可以将 c # 成员添加 () 到组件的字段、属性和方法:
@code { // C# members (fields, properties, and methods) }
对于 Razor 组件,@code
是的别名,@functions
建议使用@functions
。 允许多个@code
块。
@functions
@functions
指令允许将 C# 成员(字段、属性和方法)添加到生成的类中:
@functions { // C# members (fields, properties, and methods) }
在 Razor 组件中,使用 @code
Over @functions
来添加 c # 成员。
例如:
@functions { public string GetHello() { return "Hello"; } } <div>From method: @GetHello()</div>
该代码生成以下 HTML 标记:
<div>From method: Hello</div>
下面的代码是生成的 Razor c # 类:
using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc.Razor; public class _Views_Home_Test_cshtml : RazorPage<dynamic> { // Functions placed between here public string GetHello() { return "Hello"; } // And here. #pragma warning disable 1998 public override async Task ExecuteAsync() { WriteLiteral("\r\n<div>From method: "); Write(GetHello()); WriteLiteral("</div>\r\n"); } #pragma warning restore 1998
@functions
方法有标记时,会用作模板化方法:
@{ RenderName("Mahatma Gandhi"); RenderName("Martin Luther King, Jr."); } @functions { private void RenderName(string name) { <p>Name: <strong>@name</strong></p> } }
该代码呈现以下 HTML:
<p>Name: <strong>Mahatma Gandhi</strong></p> <p>Name: <strong>Martin Luther King, Jr.</strong></p>
@implements
@implements
指令为生成的类实现接口。
以下示例实现 System.IDisposable,以便可以调用 Dispose 方法:
@implements IDisposable <h1>Example</h1> @functions { private bool _isDisposed; ... public void Dispose() => _isDisposed = true; }
@inherits
@inherits
指令对视图继承的类提供完全控制:
@inherits TypeNameOfClassToInheritFrom
下面的代码是一个自定义的 Razor 页类型:
using Microsoft.AspNetCore.Mvc.Razor; public abstract class CustomRazorPage<TModel> : RazorPage<TModel> { public string CustomText { get; } = "Gardyloo! - A Scottish warning yelled from a window before dumping" + "a slop bucket on the street below."; }
CustomText
显示在视图中:
@inherits CustomRazorPage<TModel> <div>Custom text: @CustomText</div>
该代码呈现以下 HTML:
<div> Custom text: Gardyloo! - A Scottish warning yelled from a window before dumping a slop bucket on the street below. </div>
@model
和@inherits
可在同一视图中使用。@inherits
可位于视图导入的 _ViewImports.cshtml 文件中:
@inherits CustomRazorPage<TModel>
下面的代码是一种强类型视图:
@inherits CustomRazorPage<TModel> <div>The Login Email: @Model.Email</div> <div>Custom text: @CustomText</div>
如果在模型中传递“rick@contoso.com”,视图将生成以下 HTML 标记:
<div>The Login Email: rick@contoso.com</div> <div> Custom text: Gardyloo! - A Scottish warning yelled from a window before dumping a slop bucket on the street below. </div>
@inject
@inject
指令使 Razor 页面可以将服务从服务容器注入到视图。 有关详细信息,请参阅视图中的依赖关系注入。
@layout
此方案仅适用于 Razor ( razor) 的组件。
@layout
指令指定 Razor 具有指令的可路由组件的布局 @page
。 布局组件用于避免代码重复和不一致。 有关详细信息,请参阅 ASP.NET Core Blazor 布局。
@model
此方案仅适用于 Razor () 的 MVC 视图和页面。
@model
指令指定传递到视图或页面的模型类型:
@model TypeNameOfModel
在 Razor 使用单独的用户帐户创建的 ASP.NET CORE MVC 或页面应用中, Views/Account/Login。 cshtml 包含以下模型声明:
@model LoginViewModel
生成的类继承自 RazorPage<dynamic>
:
public class _Views_Account_Login_cshtml : RazorPage<LoginViewModel>
Razor 公开 Model
用于访问传递到视图的模型的属性:
<div>The Login Email: @Model.Email</div>
@model
指令指定 Model
属性的类型。 该指令将 RazorPage<T>
中的 T
指定为生成的类,视图便派生自该类。 如果未指定 @model
指令,则 Model
属性的类型为 dynamic
。 有关详细信息,请参阅强类型模型和 @model 关键字。
@namespace
@namespace
指令:
-
设置生成的 Razor 页、MVC 视图或组件的类的命名空间 Razor 。
-
在目录树中最近的导入文件中设置页面、视图或组件类的根派生命名空间, _ViewImports) 或 _Imports razor (组件) (视图或页面。 Razor
@namespace Your.Namespace.Here
对于 Razor 下表中所示的页面示例:
-
每个页面都导入 Pages/_ViewImports.cshtml。
-
Pages/_ViewImports.cshtml 包含
@namespace Hello.World
。 -
每个页面都有
Hello.World
,作为其命名空间的根。
页 | 命名空间 |
---|---|
Pages/Index. cshtml | Hello.World |
Pages/MorePages/Page.cshtml | Hello.World.MorePages |
Pages/MorePages/EvenMorePages/Page.cshtml | Hello.World.MorePages.EvenMorePages |
上述关系适用于导入与 MVC 视图和组件一起使用的文件 Razor 。
当多个导入文件具有 @namespace
指令时,最靠近目录树中的页面、视图或组件的文件将用于设置根命名空间。
如果前面示例中的 EvenMorePages 文件夹具有包含 @namespace Another.Planet
的导入文件(或 Pages/MorePages/EvenMorePages/Page.cshtml 文件包含 @namespace Another.Planet
),则结果如下表所示。
页 | 命名空间 |
---|---|
Pages/Index. cshtml | Hello.World |
Pages/MorePages/Page.cshtml | Hello.World.MorePages |
Pages/MorePages/EvenMorePages/Page.cshtml | Another.Planet |
@page
@page
指令具有不同的效果,具体取决于其所在文件的类型。 指令:
-
在 cshtml 文件中,指示该文件是一个 Razor 页面。 有关详细信息,请参阅自定义路由和 ASP.NET Core 中的 Razor Pages 介绍。
-
指定 Razor 组件应直接处理请求。 有关详细信息,请参阅 ASP.NET Core Blazor 路由。
@preservewhitespace
此方案仅适用于 Razor (.razor
) 的组件。
如果设置为 false
(默认) ,则将在 Razor 以下情况下删除从组件 () 中呈现的标记中的空白 .razor
:
-
元素中的前导或尾随空白。
-
RenderFragment
参数中的前导或尾随空白。 例如,传递到另一个组件的子内容。 -
在 C# 代码块(例如
@if
和@foreach
)之前或之后。
@section
此方案仅适用于 Razor () 的 MVC 视图和页面。
@section
指令与MVC 和 Razor 页面布局结合使用,以使视图或页面能够在 HTML 页面的不同部分中呈现内容。 有关详细信息,请参阅 ASP.NET Core 中的布局。
@using
@using
指令用于向生成的视图添加 C# using
指令:
@using System.IO @{ var dir = Directory.GetCurrentDirectory(); } <p>@dir</p>
在 " Razor 组件" 中, @using
还控制哪些组件在范围内。
指令属性
Razor 指令特性由带有符号后的保留关键字的隐式表达式表示 @
。 指令特性通常会改变元素的分析方式,或实现不同的功能。
@attributes
此方案仅适用于 Razor ( razor) 的组件。
@attributes
允许组件呈现未声明的属性。 有关详细信息,请参阅 创建和使用 ASP.NET Core Razor 组件。
@bind
此方案仅适用于 Razor ( razor) 的组件。
组件中的数据绑定通过 @bind
属性实现。 有关详细信息,请参阅 ASP.NET Core Blazor 数据绑定。
@on{EVENT}
此方案仅适用于 Razor ( razor) 的组件。
Razor 为组件提供事件处理功能。 有关详细信息,请参阅 ASP.NET Core Blazor 事件处理。
@on{EVENT}:preventDefault
此方案仅适用于 Razor ( razor) 的组件。
禁止事件的默认操作。
@on{EVENT}:stopPropagation
此方案仅适用于 Razor ( razor) 的组件。
停止事件的事件传播。
@key
此方案仅适用于 Razor ( razor) 的组件。
@key
指令属性使组件比较算法保证基于键的值保留元素或组件。 有关详细信息,请参阅 创建和使用 ASP.NET Core Razor 组件。
@ref
此方案仅适用于 Razor ( razor) 的组件。
组件引用 (@ref
) 提供了一种引用组件实例的方法,以便可以向该实例发出命令。 有关详细信息,请参阅 创建和使用 ASP.NET Core Razor 组件。
@typeparam
此方案仅适用于 Razor ( razor) 的组件。
@typeparam
指令声明生成的组件类的泛型类型参数。 有关详细信息,请参阅 ASP.NET Core Blazor 模板化组件。
模板化 Razor 委托
Razor 模板允许使用以下格式定义 UI 代码段:
@<tag>...</tag>
下面的示例演示如何将模板化 Razor 委托指定为 Func 。 为委托封装的方法的参数指定动态类型。 将对象类型指定为委托的返回值。 该模板与 Pet
(具有 Name
属性)的 List 一起使用。
public class Pet { public string Name { get; set; } } @{ Func<dynamic, object> petTemplate = @<p>You have a pet named <strong>@item.Name</strong>.</p>; var pets = new List<Pet> { new Pet { Name = "Rin Tin Tin" }, new Pet { Name = "Mr. Bigglesworth" }, new Pet { Name = "K-9" } }; }
使用foreach
语句提供的pets
呈现该模板:
@foreach (var pet in pets) { @petTemplate(pet) }
呈现的输出:
<p>You have a pet named <strong>Rin Tin Tin</strong>.</p>
<p>You have a pet named <strong>Mr. Bigglesworth</strong>.</p>
<p>You have a pet named <strong>K-9</strong>.</p>
你还可以将内联 Razor 模板作为参数提供给方法。 在下面的示例中, Repeat
方法接收 Razor 模板。 该方法使用模板生成 HTML 内容,其中包含列表中提供的重复项:
@using Microsoft.AspNetCore.Html @functions { public static IHtmlContent Repeat(IEnumerable<dynamic> items, int times, Func<dynamic, IHtmlContent> template) { var html = new HtmlContentBuilder(); foreach (var item in items) { for (var i = 0; i < times; i++) { html.AppendHtml(template(item)); } } return html; } }
使用前面示例中的 pets 列表,调用 Repeat
方法以及:
-
Pet
的 List。 -
每只宠物的重复次数。
-
用于无序列表的列表项的内联模板。
<ul> @Repeat(pets, 3, @<li>@item.Name</li>) </ul>
呈现的输出:
<ul> <li>Rin Tin Tin</li> <li>Rin Tin Tin</li> <li>Rin Tin Tin</li> <li>Mr. Bigglesworth</li> <li>Mr. Bigglesworth</li> <li>Mr. Bigglesworth</li> <li>K-9</li> <li>K-9</li> <li>K-9</li> </ul>
标记帮助程序
此方案仅适用于 Razor () 的 MVC 视图和页面。
标记帮助程序有三个相关指令。
指令 | 函数 |
---|---|
@addTagHelper |
向视图提供标记帮助程序。 |
@removeTagHelper |
从视图中删除以前添加的标记帮助程序。 |
@tagHelperPrefix |
指定标记前缀,以启用标记帮助程序支持并阐明标记帮助程序的用法。 |