Basic Razor syntax

In this chapter, we will look at all the basic principles of the Razor syntax.

The most basic thing you can do with the Razor syntax is to access something from the server-side by prefixing a variable or function name with an @ (at-character). We saw a couple of examples of this in the previous chapter, where we can simply mix HTML, text and server-side variables all together like this:

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

The above expression outputs text, mixed with the name variable (has to be declared elsewhere) and then it access the current date from the Now property of the DateTime struct, and thanks to the simple syntax, the code is actually quite easy to read.

But the @-prefix is not just for accessing simple variables or properties on a class. It's used for pretty much anything in Razor, including inline control statements, code blocks, comments and much more, as you will see in the following examples.

HTML Encoding

You should be aware that the when you use the implicit Razor expression syntax shown above, the output will be automatically HTML encoded. This is usually the behavior you want, but in some cases, you want to be able to output HTML and have it interpreted by the browser instead of rendered as output. For this, you can use the Raw() method on the Html class and here's an example where you can see the difference:

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

The result will look like this, where you can see that in the first line, the HTML in the string is just rendered as text (it has been HTML encoded), while the second line is interpreted and thereby making the text bold:

<b>Hello, world!</b>

Hello, world!

Explicit expressions

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.