Razor Syntax

Razor is one of the view engines supported in ASP.NET MVC. Razor allows you to write a mix of HTML and server-side code using C# or Visual Basic. Razor view with visual basic syntax has .vbhtml file extension and C# syntax has .cshtml file extension.

Razor syntax has the following Characteristics:

Compact: Razor syntax is compact, enabling you to minimize the number of characters and keystrokes required to write code.
Easy to Learn: Razor syntax is easy to learn where you can use your familiar language C# or Visual Basic.
Intellisense: Razor syntax supports statement completion within Visual Studio.

Inline expression

Start with @ symbol to write server-side C# or VB code with HTML code. For example, write @Variable_Name to display the value of a server-side variable, e.g., DateTime.Now returns the current date and time. So, write @DateTime.Now to display the current date and time, as shown below. A single line expression does not require a semicolon at the end of the expression.

C# Razor Syntax

<h1>Razor syntax demo</h1>

<h2>@DateTime.Now.ToShortDateString()</h2>
</code></pre>
        <div className="card-footer example-footer"></div></div>
</div><div className="card rounded-0 mb-3">
        <div className="card-header">Output:</div>
        <div className="card-body"><pre className="csharpcode white"><code><b>Razor syntax demo </b>
08-09-2014

Multi-statement Code block

You can write multiple lines of server-side code enclosed in braces @{ ... }. Each line must ends with a semicolon the same as C#.

Example: Server side Code in Razor Syntax

@{
    var date = DateTime.Now.ToShortDateString();
    var message = "Hello World";
}

<h2>Today's date is: @date </h2>
<h3>@message</h3>
</code></pre>
        <div className="card-footer example-footer"></div></div>
</div><div className="card rounded-0 mb-3">
        <div className="card-header">Output:</div>
        <div className="card-body">
    <pre className="csharpcode white"><code>Today's date is: 08-09-2014
Hello World!

Display Text from Code Block

Use @: or <text>/<text> to display texts within code block.

Example: Display Text in Razor Syntax

@{
    var date = DateTime.Now.ToShortDateString();
    string message = "Hello World!";
    @:Today's date is: @date <br />
    @message                               
}
</code></pre>
        <div className="card-footer example-footer"></div></div>
</div><div className="card rounded-0 mb-3">
        <div className="card-header">Output:</div>
        <div className="card-body"><pre className="csharpcode white">
<code>Today's date is: 08-09-2014
Hello World!

Display text using <text> within a code block, as shown below.

Example: Text in Razor Syntax

@{
    var date = DateTime.Now.ToShortDateString();
    string message = "Hello World!";
    <text>Today's date is:</text> @date <br />
    @message                               
}
</code></pre>
        <div className="card-footer example-footer"></div></div>
</div><div className="card rounded-0 mb-3">
        <div className="card-header">Output:</div>
        <div className="card-body"><pre className="csharpcode white">
<code>Today's date is: 08-09-2014
Hello World!

if-else condition

Write if-else condition starting with @ symbol. The if-else code block must be enclosed in braces , even for a single statement.

Example: if else in Razor

@if(DateTime.IsLeapYear(DateTime.Now.Year) )
{
    @DateTime.Now.Year @:is a leap year.
}
else { 
    @DateTime.Now.Year @:is not a leap year.
}
</code></pre>
        <div className="card-footer example-footer"></div></div>
</div><div className="card rounded-0 mb-3">
        <div className="card-header">Output:</div>
        <div className="card-body">
<pre className="csharpcode white"><code>2014 is not a leap year.

for loop

Example: for loop in Razor

@for (int i = 0; i &lt; 5; i++) { 
    @i.ToString() <br />
}

Output:

0 1 2 3 4

Model

Use @model to use model object anywhere in the view.

Example: Use Model in Razor

@model Student

<h2>Student Detail:</h2>
<ul>
    <li>Student Id: @Model.StudentId</li>
    <li>Student Name: @Model.StudentName</li>
    <li>Age: @Model.Age</li>
</ul>
</code></pre>
        <div className="card-footer example-footer"></div></div>
</div><div className="card rounded-0 mb-3">
        <div className="card-header">Output:</div>
        <div className="card-body"><pre className="csharpcode white"><code><b>Student Detail:</b>
            
- Student Id: 1 
- Student Name: John 
- Age: 18

Declare Variables

Declare a variable in a code block enclosed in brackets and then use those variables inside HTML with @ symbol.

Example: Variable in Razor

@{ 
    string str = "";

    if(1 &gt; 0)
    {
        str = "Hello World!";
    }
}

<p>@str</p>

Output:

Hello World!

Learn more about razor syntax on docs.microsoft.com.