Working with Razor

      Razor is one of the view engine supported in ASP.NET MVC. By using Razor we will able to write mix of HTML and server side code using C# or Visual Basic.From MVC3 on words Microsoft providing Razor as a default view engine in MVC.

      Razor provides us to write compact code and support Intellisense.By using Razor we can write our view code more efficiently because it similar to C#.

      Now we are going to learn different ways of coding using Razor.Before starting just create a controller and corresponding view for the action method.First we will start with simple Inline query for displaying current Date is look like below.   

 
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
            <p>Razor Inline query for displaying current date</p>
            <p>@DateTime.Now.ToShortDateString()</p>
    </div>
</body>
</html>

         In above we used @ for writing server side coding in View.If we run the application then we will get a output like below.

Razor Inline query output

         Now we will move with multi line satements.Multi line statements in Razor starts with @ then open and close braces(like @{---Our Code---}).And one important point in multi line statement is each line in code is must end with semicolon(;) as like C#.Following one is a example for multi line statements in Razor.

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
            @{
               var Greetings = "Current Date";
               var Date = DateTime.Now.ToShortDateString();
            }
            <p>Razor multi line query for displaying : @Greetings</p>

            <p>@Date</p>

    </div>
</body>
</html>

         If we run the application then we will get a output like following.

Razor multi line query

          Now we will going to display text from code block.For this we have to add either @:  or using <text></text>.Below one is using @:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
            @{
               var Greetings = "Current Date";
               var Date = DateTime.Now.ToShortDateString();

              @: <p>Razor multi line query for displaying : @Greetings</p>

              <p>@Date</p>
            }
    </div>
</body>
</html>


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
            @{
               var Greetings = "Current Date";
               var Date = DateTime.Now.ToShortDateString();

               <text>Razor multi line query for displaying : @Greetings</text>

               <p>@Date</p>
            }
    </div>
</body>
</html>

      If we run the application then in both cases we will get a same output as like multi line statement query.
      Now we look into if-else statement using Razor like below.

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
            @if(1 > 0)
            {
               @: true condition
            }
            else
            {
               @: false condition
            }
    </div>
</body>
</html>

      The output of above code is true condition.Now we going to learn how to declare a variable and for loop.

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
           @{int i = 0;}

           @for(;i < 5;i++)
           {
             @i


           }
    </div>
</body>
</html>

      In above  we declared a variable i and same is used in for loop.The output of above code is like below.

variable declaration and for loop in Razor

       Similarly we will access model by decaring model at the top(highlighted in bold) and same thing is used in view.For example let we have a Student Model and using model is represented like below.

@model Student
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
           <p> Student Name : @Model.StudentName</p>
    </div>
</body>
</html>

       Like above we can access all model data by just include model at the top and we can access the variables by @Model.
Subscribe to: Posts (Atom)