w3resource

Razor Syntax


Razor is one of the view templating engines currently supported in ASP.NET which gives us the ability to write C# and Visual Basic codes in our HTML pages. Razor files are saved with .cshtml file extension for C$# projects and .vbhtml for visual basic projects.

Razor is wildly accepted because of some of these amazing features:

Compact: The syntax is minimalistic in nature. That is, lesser keystrokes are required to achieve greater things.

Easy to Learn: Razor syntax is beginner and user friendly. It is easy to learn and gives you grounds to use your regular C# and visual basic.

Intellisense: In visual studio, auto complete features are enabled by default, making developers life a bit easier, as some commands need not be memorized.

Now lets get started using Razor to craft our views:

Inline expression

All razor expressions are preceded with the character @. To write a C# or visual basic expression in your HTML code, start the server side codes with the @ symbol.

Example: To display or declare a variable, say @variable_name. To display a value say @DateTime.Now to display the current date and time. In Razor, a single expression need not end with a semicolon.

C# Razor Syntax single expression demo

<h2>@DateTime.Now.ToShortDateString()</h2>

Output:

23-19-2019

Multi-statement Code block

When you want to write multiple lines of C# or visual basic codes in your view files, enclose them with braces @{ .....}. Here each line of code mush end with a semi colon.

C# Razor Syntax multi line demo

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

<h2>Today's date is: @date </h2>
<h3>@message</h3>

Output:

Today's date is: 08-09-2014
Hello World!

To Display Text from Code Block

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

Display Text in Razor Syntax demo

@{
    var date = DateTime.Now.ToShortDateString();
    string message = "Hello World!";
   @:Today's date is:@date <br/>
   @message                               
}

Output:

Today's date is: 23-08-2019
Hello World!

Display text using within a code block as shown below.

Text in Razor Syntax demo

@{
  var date = DateTime.Now.ToShortDateString();
  string message = "Hello World!";
  <text>Today's date is:</text> @date <br/>
  @message                               
}

Output:

Today's date is: 08-09-2014
Hello World!

if-else statements

If else statements must start with the symbol @, with the if else block enclosed in braces. In conditional statements, braces must be used, even if it's a one-line condition.

If else in Razor demo:

@if(DateTime.IsLeapYear(DateTime.Now.Year) )
{
   @DateTime.Now.Year @:is a leap year.
}
else { 
   @DateTime.Now.Year @:is not a leap year.
}

Output:

2019 is not leap year.

Loops in Razor

Just like in the conditionals, loops are preceded with the @ symbol and the loop block enclosed in braces as illustrated in the code snippet below.

Loop in Razor demo

@for (int i = 1; i < 6; i++) { 
   @i.ToString() <br/>
}

Output:

1
2
3
4
5

Model

To use model classes in the views, start the model declaration with the @model symbol.

Model in Razor demo

@model ActivityTab.Models.Activity

<h2>My Activity Detail:</h2>
<ul>
    <li>Activity Id: @model.Id</li>
    <li>Activity Name:@model.ActivityName</li>
    <li>Status:@model.Status</li>
</ul>

Output:

My Activity Detail:            
- Activity Id: 1 
- Activity Name: Write C# tutorials 
- Status: Done

Declare Variables

Variables can be declared in a code block enclosed with braces and then later used outside the block, with the @ symbol.

Variable in Razor demo

@{
    string welcome_message = "";
    if(1 > 0)
    {
        str = "Hello World to Razor!";
    }
}
<p>@welcome_message </p>

Output:

Hello World!

So far, we have seen some important syntax in Razor to help us get started in our ASP.NET MVC journey. There are a lot of other syntax, which we may not have covered. You can look it up at the Razor template official documentation. The ones we have covered is enough to get us stated. See you in the very next tutorial.



Inviting useful, relevant, well-written and unique guest posts