Basic Razor syntax

在本章里，我们会来学习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!

显示表达式

In the first example above, we used a so-called implicit expression, but some situations calls for a more explicit variant, to show the parser exactly what your intentions are. Razor comes with an explicit expression syntax for just those situations and basically it's all about wrapping your expression with a set of parentheses. This makes it easier for the parser to understand what you're doing, and allows for stuff like calculations and modifications inside of a Razor expression.

Here's an example:

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

Notice the syntax, where the @-character is followed by a set of surrounding parentheses. We use it two times, first to access the Substring method on the string variable, and then to do a piece of very simple math directly inside the Razor expression. The resulting output looks like this:

Hello, John. Your age is: 42.

Multi-statement Razor blocks

If you need to do more than simply accessing e.g. a variable, Razor allows you to enter a dedicated, multiline code-block by entering a start curly-bracket after the @-operator. Here's an example:

@{
    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

Notice how I can write regular C# code inside the code-block, including loops, conditional statements and everything else that you're used to from the C# language. One important difference though is that you have to have curly-braces around your control statements inside of code blocks, even if they only span one line - otherwise you will confuse the parser.

Also notice how I can define a variable inside the code block, modify it if needed, and then use it outside of the code block!

HTML tags and plain text inside code blocks

So, when you're inside a code block, like shown in the example above, you may still need to output text - in fact, that's quite normal. But instead of forcing you in and out of code blocks, Razor allows you to mix in HTML tags directly in your code blocks, like this:

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

Razor simply sees your HTML tags and then assumes that you're now giving it markup for output instead of code for processing. But what if you don't want to wrap your text inside of tags? Razor has an option for doing this as well, using the @: operator:

@:This is plain text!

If you need more than one line of plain text, you can surround it with a set of <text> tags. Here's a more complete example, where I show you both syntaxes:

@{
    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>
}

Notice how we can now mix code, HTML and plain text very easily!

Razor server-side comments

Sometimes you may want to leave comments in your code, or comment out lines of code temporarily to test things. Therefore, most programming languages include a syntax for commenting your code and so does Razor. You could just use HTML comments, but as we all know, these are rendered to the browser and can therefore be seen if the "View source" option is used. Razor comments on the other hand are never rendered to the browser but simply ignored when the page is parsed.

Here's an example on how you can have a Razor comment in your views:

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

If you're inside a Razor code block, you can even use the regular C# style comments:

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

    // C# style single-line comment

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

Summary

This was the most basic stuff you need to know about Razor and it should get you started. In the next chapter, we'll look into some more advanced stuff.