Razor and WebPages – 3 – Razor syntax

What are WebPages and Razor – how do we (ASP.NET developers) use them to build Web Applications.  This is the subject of this series of articles.  In part 1 I described how you can use WebMatrix to build a simple site using the new CSHTML file type, and in part 2 I introduced the new Razor syntax and how it compares with the syntax used in ASP.NET WebForms.  In this article I will dive deeper into the new Syntax.

The @ Operator

In the previous article I focused on the @ operator and how it used by the Razor parser to switch from markup (HTML) to code (C# or VB.NET).

Razor understands C# (and VB.NET) syntax so it is able to support the various language constructs.  Figures 1-3 show 3 simple C# constructs and how they would work in Razor.

Figure 1 – Inline Expressions

Figure 2 – Single Statement Blocks

Figure 3 – Multiple Statement Blocks

Note that when using single or multiple statement blocks that the C# “{}” braces are used to surround the code.

Once you are inside a block of C# code then anything that is valid C# is allowed to be used such as for loops, while statements and if else statements.

As mentioned in the previous article the Razor parser is smart and as long as the intention is clear can detect when switching back to markup, so the code in Figure 4 is valid.  As the code in line 25 ends with a “;” and the code which starts line 26 is not valid C# the parser automatically switches back to markup and recognizes the <p> tag.

Figure 4 – Automatic detection of markup

The @: Operator and <text></text> Tag

If it cannot be made clear that the intention is to switch back to markup then there are two ways you can indicate that the following text should be considered markup, – the @: Operator and the <text> tag.

The @: Operator can be used in code to indicate that the rest of the line is text or markup. (see Figure 5)

Figure 5 – Using the @: Operator

In this example, the @: operator forces Razor to switch back to markup mode.  Without the @: operator the Razor parser assumes this is C# (although not valid), because it knows it is not a valid markup tag.

The <text></text> tag is a pseudo markup tag that identifies everything between the opening and closing elements as text.  It is most useful when the content stretches over more than one line. (see Figure 6)

Figure 6 – Using the <text></text> Tag

Note that once inside the pseudo-markup the @ operator still switches into code – the <text> element is treated the same as any markup tag – it is just ignored as real markup.

Comments - The @* and *@ Operators

Although Razor has a limited syntax, just like any other syntax it may be necessary to place comments in Razor code.  If we are in markup then the standard <!-- --> syntax is used to add comments to markup which are not rendered in the browser.  If we are in code then the standard //  or /* */ syntax is used to add comments to the C# code, which is ignored by the C# compiler. 

In addition Razor provides its own comments which are ignored by the Razor parser.

Figure 7 – Razor comments

That’s it – that’s all you need to know to write your own Razor code.  of course you need to understand HTML markup and a programming language supported by Razor (currently C# and VB.NET), but that is beyond the scope of this article.