Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

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 

1 comment:

  1. It is one of the best tutorial for beginners.I always follow in this tutorial and it makes my carrier growth.

    ReplyDelete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.