Part 57 - Razor views in mvc

Suggested Videos 
Part 54 - T4 templates in asp.net mvc
Part 55 - What is cross site scripting attack
Part 56 - How to prevent cross site scripting attack

In this video, we will discuss razor view syntax.



Use @ symbol to switch between c# code and html.
@for (int i = 1; i <= 10; i++)
{
    <b>@i</b>
}

Output:
1 2 3 4 5 6 7 8 9 10



Use @{ } to define a code block. If we want to define some variables and perform calculations, then use code block. The following code block defines 2 variables and computes the sum of first 10 even and odd numbers.
@{
    int SumOfEvenNumbers = 0;
    int SumOfOddNumbers = 0;
    
    for(int i =1; i<=10; i++)
    {
        if(i %2 == 0)
        {
            SumOfEvenNumbers = SumOfEvenNumbers + i;
        }
        else
        {
            SumOfOddNumbers = SumOfOddNumbers + i;
        }
    }
}

<h3>Sum of Even Numbers = @SumOfEvenNumbers</h3> 
<h3>Sum of Odd Numbers = @SumOfOddNumbers</h3> 

Output:
Sum of Even Numbers = 30
Sum of Odd Numbers = 25

Use <text> element or @: to switch between c# code and literal text
@for (int i = 1; i <= 10; i++)
{
    <b>@i</b> 
    if (i % 2 == 0)
    {
        <text> - Even </text>
    }
    else
    {
        <text> - Odd </text>
    }
    <br />
}

The above program can be re-written using @: as shown below.
@for (int i = 1; i <= 10; i++)
{
    <b>@i</b> 
    if (i % 2 == 0)
    {
        @: - Even
    }
    else
    {
        @: - Odd
    }
    <br />
}

Output:
1 - Odd 
2 - Even 
3 - Odd 
4 - Even 
5 - Odd 
6 - Even 
7 - Odd 
8 - Even 
9 - Odd 
10 - Even