MVC Razor Syntax

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

Razor Syntax:

Razor is one of the view engine supported in ASP.NET MVC. Razor allows you to write 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 following Characteristics:

  • Compact: Razor syntax is compact which enables you to minimize number of characters and keystrokes required to write a 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.

Now, let's learn how to write razor code.

Inline expression:

Start with @ symbol to write server side C# or VB code with Html code. For example, write @Variable_Name to display a value of a server side variable. For example, DateTime.Now returns a current date and time. So, write @DateTime.Now to display current datetime 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>

Result:


Razor syntax demo
08-09-2014

Multi-statement Code block:

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

C# Razor Syntax:


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

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

Result:


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

Display text from code block:

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

C# Razor Syntax:


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

Result:


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

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

Razor Syntax:


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

Result:


Razor syntax demo
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 single statement.

Razor Syntax:


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

Result:


2014 is not a leap year.

for loop:

Razor Syntax:


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

Result:


0
1
2
3
4

Model:

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

C# Razor Syntax:


@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>

Result:


Student Detail:

- 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.

C# Razor Syntax:


@{
    string str = "";

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

<p>@str</p>

Result:


Hello World!

So this was some of the important razor syntaxes. Visit asp.net to learn razor syntax in detail.

Points to Remember :

  1. Use @ to write server side code.

  2. Server side code block starts with @{* code * }

  3. Use @: or <text></<text> to display text from code block.

  4. if condition starts with @if{ }

  5. for loop starts with @for

  6. @model allows you to use model object anywhere in the view.

Learn how to use HtmlHelpers in razor view in the next section.