Learn Razor Syntax by Example in ASP.NET MVC 5

What is Razor Syntax?

Razor Syntax is a powerful and easiest way to write server-based code directly into your view pages. Razor is a markup syntax that allows you to embed C# Programming directly into your view page. It is generally written in the .cshtml file.

How to Write Razor Syntax in MVC View Page?

It is very easy to learn About Razor Syntax. Always remember that Razor is not a programming language, it just gives you space in your .cshtml page to write C# code or VB code.

In order to write Razor Syntax in ASP.NET MVC View page, memorize the following guidelines.

Example

@{
    ViewBag.Title = "Computer Shop Management";
}

<div class="jumbotron">
    <h2 style="color:chocolate">Welcome to Computer Shop Management</h2>
</div>
<div>
    @{ 
        for(int i=0; i<5; i++)
        {
            <h3 style="color:deeppink">Hello world @i</h3>
        }
    }
</div>

Example

@{
    ViewBag.Title = "Computer Shop Management";
}

<div class="jumbotron">
    <h2 style="color:chocolate">Welcome to Computer Shop Management</h2>
</div>
<div>
    @{ 
        int i = 10;
        <h2>@i</h2>

        <h3><i>Today Date is @DateTime.Now.ToShortDateString()</i></h3>

    }
</div>

Example

@{
    ViewBag.Title = "Computer Shop Management";
}

<div class="jumbotron">
    <h2 style="color:chocolate">Welcome to Computer Shop Management</h2>
</div>
<div>
    @{ 
        var a = 5;
        var b = 10;
        var result = a + b;
        <h2>Addition of @a + @b = @result</h2>

    }
</div>

Example

@{
    ViewBag.Title = "Computer Shop Management";
}

<div class="jumbotron">
    <h2 style="color:chocolate">Welcome to Computer Shop Management</h2>
</div>
<div>
    @{ 
        var str = "Hello World";
        <h3>@str</h3>
    }
</div>

Example

@{
    ViewBag.Title = "Computer Shop Management";
}

<div class="jumbotron">
    <h2 style="color:chocolate">Welcome to Computer Shop Management</h2>
</div>
<div>
    @{ 
        var str = "Hello World";
        <h3>@str</h3>
        <span>This is Text inside Razor.</span>
    }
</div>

Example

@{
    ViewBag.Title = "Computer Shop Management";
}

<div class="jumbotron">
    <h2 style="color:chocolate">Welcome to Computer Shop Management</h2>
</div>
<div>
    @{ 
        var price = 30;
        <h2>You can get 1GB Data @@ of @price</h2>
    }
</div>

Example

@{
    ViewBag.Title = "Computer Shop Management";
}

<div class="jumbotron">
    <h2 style="color:chocolate">Welcome to Computer Shop Management</h2>
</div>
<div>
    @{ 
        var price = 45;
        if(@price > 30)
        {
            <h3>Price is Higher than 30.</h3>
        }
        else if(@price == 30)
        {
            <h3>Price is Equal to 30.</h3>
        }
        else
        {
            <h3>Price is Lower than 30.</h3>
        }
    }
</div>

Example:

@{
    ViewBag.Title = "Computer Shop Management";
}

<div class="jumbotron">
    <h2 style="color:chocolate">Welcome to Computer Shop Management</h2>
</div>
<div>
    @{
        var Days = DateTime.Now.DayOfWeek.ToString();

        switch (Days)
        {
            case "Sunday": <strong>Its Holiday</strong>
                break;
            case "Monday": <strong>Oh no! It's Monday Again</strong>
                break;
            case "Tuesday": <strong>Go to Work. It's Tuesday</strong>
                break;
            case "Wednesday": <strong>Continue to Work. It's Wednesday</strong>
                break;
            case "Thursday": <strong>Continue to Work. It's Thursday</strong>
                break;
            case "Friday": <strong>Yeah! It's Friday.</strong>
                break;
            case "Saturday": <strong>Hurreyy... It's Saturday.</strong>
                break;
            default: <strong>Its Mystrious. I don't know the day name.</strong>
                    break;
            }
        }

</div>

Example:

@{
    ViewBag.Title = "Computer Shop Management";
}

<div class="jumbotron">
    <h2 style="color:chocolate">Welcome to Computer Shop Management</h2>
</div>
<div>
    @{
        <h3>For Loop Example</h3>
        for (var i = 0; i < 5; i++)
        {
            <strong>@i </strong>
        }

        <h3>While Loop Example</h3>
        var j = 0;
        while(j<5)
        {
            <strong>@j </strong>
            j++;
        }

        <h3>Do While Loop Example</h3>
        var k = 0;
        do
        {
            <strong>@k </strong>
            k++;
        }
        while (k < 5);
    }

</div>

Example

@{
    ViewBag.Title = "Computer Shop Management";
}

<div class="jumbotron">
    <h2 style="color:chocolate">Welcome to Computer Shop Management</h2>
</div>
<div>
    @{
        int[] arr = { 1, 3, 5, 7, 11, 13, 17, 19 };
        foreach (int x in arr)
        {
            <span>@x, </span>
        }
    }

</div>

Example

@{
    ViewBag.Title = "Computer Shop Management";
}

<div class="jumbotron">
    <h2 style="color:chocolate">Welcome to Computer Shop Management</h2>
</div>
<div>
    @{
        try
        {
            int a, b, result;
            a = 5;
            b = 0;
            result = a / b;
            <span>@result </span>
        }
        catch(Exception ex)
        {
            <span>@ex.ToString()</span>
        }
    }

</div>

You can add namespace by using the @using command.

Example:

@{
    ViewBag.Title = "Computer Shop Management";
}

<div class="jumbotron">
    <h2 style="color:chocolate">Welcome to Computer Shop Management</h2>
</div>
<div>
    @using System.IO;
    @using System.Data.SqlClient;
    @using System.Configuration;
    @{
        // Your Code Here.
    }

</div>

@*
    @{
        /* C# comment */
        // Another C# comment
    }
    <!-- HTML comment -->
*@

The @model command is used for adding and accessing model variables and data into the view page.

@model LoginViewModel
You will learn more about @model in next chapter.

Summary

In this tutorial, you learned Quick Razor Syntax and also learned how to use these syntaxes in the cshtml page. In the next chapter, you will learn ViewBag, ViewData, and TempData.