Razor 语法基础

在本章里，我们会来学习Razor语法的基本原则。

你使用Razor语法能做的最基本的事情就是使用@符号为作一个变量或函数的前缀来访问服务端的内容。在上一章里我们已经看过几个这样的例子，我们可以简单地把HTML、文本以及服务端的变量以这样的方式写在一起：

<p>Hello, world - my name is @name and the current date is: @DateTime.Now.ToString()</p>

上方的表达式输出了文本，其中混合了 name 变量（name 变量需要在别处被声明）然后它从 DateTime 结构体的 Now 属性访问到了当前的日期。多亏了这则简单的语法，这行代码的可读性不错。

但是，@前缀不只可以用来访问简单的变量或是一个类上的属性。它在Razor中也可以用来做几乎任何事情，包括定义行内控制语句、代码块、注释以及其它东西。你将在下面的例子中见到它的具体应用。

HTML 编码

当你使用上方的隐式 Razor 表达式语法时，输出结果会被自动进行 HTML 编码。通常这种编码行为就是你想要的。但在一些情况下，你想要能够输出 HTML 并且被浏览器解释，而不是将其渲染后作为输出。为了达成这一目标，你可以使用 Html 类中的 Raw() 方法。这有一个例子，你可以在其中看出不同之处：

@{
    var helloWorld = "<b>Hello, world!</b>";
}
<p>@helloWorld</p>
<p>@Html.Raw(helloWorld)</p>

结果如下所示。你可以看到，第一行输出的 HTML 语句被渲染成了纯文本（已经被 HTML 编码），而第二行则被浏览器解释了，因此文本被加粗了。

<b>Hello, world!</b>

Hello, world!

显示表达式

在上面的第一个例子中，我们使用了一个叫隐式表达式的东西。但在有些情况下，需要更明确的变体，来向转换器准确地展示你的意图。Razor 为这些情况提供了显示表达式的语法，基本上就是用一组括号来括住表达式。这会帮助转换器理解你要做的事情，并允许在 Razor 表达式中做一些事情，例如进行运算和修饰。

下面有一个例子：

@{
    var name = "John Doe";
}
Hello, @(name.Substring(0,4)). Your age is: <b>@(37 + 5).</b>

注意这块的语法，@符号后面跟了一组圆括号。我们用了两次圆括号，第一次是为了访问字符串变量上的Substring方法，然后为了直接在 Razor 表达式中做一次非常简单的数学运算，就又调用了一次。输出结果看起来像这样：

程序输出结果（英文原文）： Hello, John. Your age is: 42. 中文翻译：你好，约翰。你的年龄是：42。

Razor 中的多语句块

如果你要做的不仅限于访问内容（例如，访问一个变量），那么你也可以在 Razor 中输入一个专用的多代码块，只需要在@符号后面输入一对花括号就行了。例子如下：

@{
    var sum = 32 + 10;
    var greeting = "Hello, world!";
    var text = "";
    for(int i = 0; i < 3; i++)
    { 
    text += greeting + " The result is: " + sum + "\n";
    }
}

<h2>CodeBlocks</h2>
Text: @text

注意到我是如何在代码块中编写常用的 C# 代码了吗？像是循环、条件判断语句以及你所熟悉的C#语法里的其它一些东西，都可以写在代码块里。一个最重要的不同之处就是，代码块中的流程控制语句后面必须跟上一对花括号。例如，尽管例子中的 if 语句下面只跟了一行代码，也要把花括号写上 —— 否则转换器就不知道如何将里面的代码进行转换了。

并且，注意到我在代码块里定义变量的方法了吗？例子中还展示了在需要时修改变量的值的方法以及在代码块的外面使用刚刚定义好的变量的方法。

代码块中的 HTML 标签和纯文本

像上述例子所展示的那样，你依然可能在代码块中输出纯文本——实际上，有这种需求很正常。Razor 可以让你在代码块里直接混入 HTML 标签，而不用让你一会儿切到代码块内，一会儿又切出去。请看下面的例子：

@{
    var helloWorld = "This is a code block...";
    
    <p>This is a tag with plain text and <b>markup</b> inside of it...</p>   
}

Razor 仅仅看到你的 HTML 标签，然后假设你是为了让它输出前端代码而不是当成 C# 代码来处理。但如果你不想把文本写在标签里面，那要怎么办？Razor 中也有实现该需求的选项，即使用 @: 运算符：

@:This is plain text!

如果你需要使用多行纯文本，你可以使用一组<text>来对其进行包裹。下面是一个更复杂的例子，我将向你同时展示这两种表达式的用法：

@{
    var helloWorld = "This is a code block...";
    
 
    @:This is plain text!
    <br><br>
    <text>This is plain text as well, and we can
    even span multiple lines, if needed!</text>
}

注意到了吗？我们可以很容易地将C#代码，HTML标签和纯文本混合在一起。

Razor 中的服务端注释

有时，你需要在代码中留下注释；或者为了做一些测试，临时将几行代码注掉。因此，绝大多数编程语言都包含了注释代码的语句，Razor 也不例外。你可以单单使用 HTML 注释，但众所周知，这些注释最终会被渲染到浏览器。如果用了“查看源代码”选项，这些注释就会被看到。另一方面，Razor 注释则永远不会被渲染到浏览器，它们会在页面转换时被忽略掉。

这个例子展示了在视图中编写 Razor 注释的方法：

@*
    Here's a Razor server-side comment
    It won't be rendered to the browser
    It can span multiple lines
*@

如果是在 Razor 代码块的里面，你甚至可以使用常规的 C# 风格注释：

@{
    @*
    Here's a Razor server-side comment
    *@

    // C# style single-line comment

    /* 
    C# style multiline comment
    It can span multiple lines
    */    
}

总结

这些是你要了解的最最基础的Razor知识，并且这些知识应该已经让你入门了。在下一章节中，我们会深入了解一些高级部分的内容。

This article has been fully translated into the following languages:

Is your preferred language not on the list? Click here to help us translate this article into your language!

Metadata