Learn Razor Syntax by Example in ASP.NET MVC 5

In this chapter, you will learn:
1. What is Razor Syntax?
2. How to Write Razor Syntax in MVC View Page?
3. Razor Rules for C# Programming
4. Razor Example

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.

The Complete Razor Tutorial
Note: It is the quick guide that teaches you Razor Syntax just in one chapter. If you want to learn Razor Syntax in details then learn here.
https://www.completecsharptutorial.com/razor-tutorial/

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.

1. Use @{ … } block to write C# code.
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>
2. All the Inline Expressions like Variables and Functions starts with @.
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>
3. Variables are declared with the var keyword and all the code statements end with a semicolon(;).
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>
4. Keep String value within double quotes (" ")
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>
5. Use HTML Markup for adding HTML code inside Razor block.
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>
6. Use Double @@, if you want to print single @.
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>
7. Control Statement: if, else if and else
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>
8. Switch Case
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>
9. Loop Statement: for, foreach, while, do while
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>
10. Foreach and Array
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>
11. Handling Errors with Try Catch
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>
12. @using : Add NameSpace

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>
13. Comments in Razor
@*
    @{
        /* C# comment */
        // Another C# comment
    }
    <!-- HTML comment -->
*@
14. @model: Accessing Model data.

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.
The Complete Razor Tutorial
Note: It is the quick guide that teaches you Razor Syntax just in one chapter. If you want to learn Razor Syntax in details then learn here.
https://www.completecsharptutorial.com/razor-tutorial/

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.

More Articles

 

Share your thought