Razor Cheat Sheet / Quick Reference
for C# & VB.NET

@name

Hello, <b>@name.</b>

Simply prefix with the @ character to access a variable, a class or a function. Be aware that the output will be automatically HTML encoded.

As you can see from the example, this is easily mixed with text and HTML and the parser can even handle trailing periods/HTML tags!

@(5+5)

Hello, @name. Your age is: <b>@(5+5).</b>

The explicit impression should be used when you want to do something that might otherwise confuse the parser. For instance, if you need to access a variable in the middle of a string or if you want to do calculations/modifications to the output.

In the example, we make a calculation (5 + 5) with simple numbers, but you could also include other variables, call functions etc. inside of the parentheses.

@Html.Raw(name)

Hello, <b>@Html.Raw(name).</b>

The same as the implicit expression, but the output will not be HTML encoded.

@{
	/* C# Code goes here */
}

@{
    var greeting = "Hello, world!";
    for(int i = 1; i <= 3; i++)
    {
        <p>@greeting (@i)</p>
    }
}

A Razor code block starts with a combination of the @-character and the {-character and ends with the } character. Inside of this, you're now writing C# code.

However, as you can see from the extended example, you can still have markup directly in the code, to easily generate HTML output. Text does need to be inside of markup or with an explicit text declaration (see below) when you're inside a code block though, and you can't do single-line statements - they have to be inside a block (braces).

@:Plain text goes here...

@if(isTrue)
{
    var text = "Code goes here...";
    @:Plain text goes here...
}

When you're inside a code block, either because of a control structure (like in the example) or because you have explicitly defined one, you can output plain text by prefixing with a @-character followed by a : (colon) character.

An alternative exists (see below), where you use <text> tags instead.

<text>Plain text goes here...</text>

@if(isTrue)
{
    var text = "Code goes here...";
    <text>Plain text goes here...</text>
}

When you're inside a code block, either because of a control structure (like in the example) or because you have explicitly defined one, you can output plain text by surrounding it with <text> tags.

An alternative exists (see above), where you use the @: operator instead.

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

If you need to, you can easily write Razor comments in your code. They are a great alternative to HTML comments, because the Razor comments won't be included in the output to the browser.

<div style="@divStyle">Hello, world!</div>

@{
    string divStyle = null;
    if(Request.QueryString["style"] != null)
    {
        divStyle = "background-color: yellow;";
    }
}
<div style="@divStyle">Hello, world!</div>

With this syntax, you don't have to check for NULL values you want an HTML attribute to use a variable value. In the example, the style attribute will only be rendered if the variable divStyle has a non-NULL value. Please be aware that the variable still has to be declared!

<div style="background-color: yellow;">Hello, world!</div>

<div>Hello, world!</div>

@name

Hello, <b>@name.</b>

Simply prefix with the @ character to access a variable, a class or a function. Be aware that the output will be automatically HTML encoded.

As you can see from the example, this is easily mixed with text and HTML and the parser can even handle trailing periods/HTML tags!

@(5+5)

Hello, @name. Your age is: <b>@(5+5).</b>

The explicit impression should be used when you want to do something that might otherwise confuse the parser. For instance, if you need to access a variable in the middle of a string or if you want to do calculations/modifications to the output.

In the example, we make a calculation (5 + 5) with simple numbers, but you could also include other variables, call functions etc. inside of the parentheses.

@Html.Raw(name)

Hello, <b>@Html.Raw(name).</b>

The same as the implicit expression, but the output will not be HTML encoded.

@Code
	/* VB.NET Code goes here */
End Code

@Code
    Dim greeting = "Hello, world!"
    For i = 1 To 3
        @<p>@greeting (@i)</p>
	Next i
End Code

A Razor code block starts with a @Code statement and ends with the End Code statement. Inside of this, you're now writing VB.NET code.

However, as you can see from the extended example, you can still have markup directly in the code, to easily generate HTML output. Text does need to be inside of markup or with an explicit text declaration (see below) when you're inside a code block though, and you can't do single-line statements - they have to be inside a block.

@Code
    @:Plain text goes here
End Code

@If IsPost Then
    Dim text = "Code goes here..."
    @:Plain text goes here...
End If

When you're inside a code block, either because of a control structure (like in the example) or because you have explicitly defined one, you can output plain text by prefixing with a @-character followed by a : (colon) character.

An alternative exists (see below), where you use <text> tags instead.

@<text>Plain text goes here...</text>

@If IsPost Then
    Dim text = "Code goes here..."
    @<text>Plain text goes here...</text>
End If

When you're inside a code block, either because of a control structure (like in the example) or because you have explicitly defined one, you can output plain text by surrounding it with <text> tags.

An alternative exists (see above), where you use the @: operator instead.

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

If you need to, you can easily write Razor comments in your code. They are a great alternative to HTML comments, because the Razor comments won't be included in the output to the browser.

<div style="@divStyle">Hello, world!</div>

@Code
    Dim divStyle As String
    If Request.QueryString("style") IsNot Nothing Then
        divStyle = "background-color: yellow;"
    End If
End Code
<div style="@divStyle">Hello, world!</div>

With this syntax, you don't have to check for NULL (Nothing) values you want an HTML attribute to use a variable value. In the example, the style attribute will only be rendered if the variable divStyle has a non-NULL (Nothing) value. Please be aware that the variable still has to be declared!

<div style="background-color: yellow;">Hello, world!</div>

<div>Hello, world!</div>