Post
Ask Question

Razor View Engine In ASP.NET MVC

In this article, let's understand Razor View Engine.

Razor View engine is a markup syntax which helps us to write HTML and server-side code in web pages using C# or VB.NET. It is server-side markup language however it is not at all a programming language.

Razor is a templating engine and ASP.NET MVC has implemented a view engine which allows us to use Razor inside of an MVC application to produce HTML. However, Razor does not have any ties with ASP.NET MVC.

Now, Razor Syntax is compact which minimizes the characters to be used, however it is also easy to learn.

Some of Razor Syntax Rules for C# are given below.

  • It must be always enclosed in @{ ... }
  • Semicolon “;” must be used to ending statements
  • Files have .cshtml extension.
  • Variables are declared with var keyword
  • Inline expressions (variables and functions) start with @
  • C# code is case sensitive

Now, let’s see how to write Razor code:

Variables

  1. // Using the var keyword:  
  2. var greeting = "Welcome to Razor";  
  3. var counter = 200;  
  4. var day = DateTime.Today;  
  5.   
  6. // Using data types:  
  7. string greeting = "Welcome to Razor ";  
  8. int counter = 200;  
  9. DateTime day = DateTime.Today;  

Now, in the above example, we have declared variables using var keyword as well as by their types i.e. string, int, DateTime. You can go for any of them. However, it uses int, float, decimal, bool and string data types.

Conditions

If statement

It starts with code block and its condition is written in parenthesis. And the code which needs to be executed once condition gets satisfied is written inside braces.

Let’s understand with the below example.

  1. @{var price=60;}  
  2. <html>  
  3.    <body>  
  4.       @if (price>50)  
  5.        {  
  6.           <p>The price is  greater than 50.</p>  
  7.        }  
  8.    </body>  
  9. </html>  

In the above example, we have declared var price has a value of 60 and we are using if statement which is validating price. If the price is greater than 50 then the code written in side braces gets executed.

If – Else statement

It starts with code block and its condition is written in parenthesis. And code which needs to be executed once the condition gets satisfied is written inside braces and if it does not gets satisfied then code written inside else block gets executed.

Let’s understand with the below example.

  1. @{var price=60;}  
  2. <html>  
  3. <body>  
  4. @if (price>50)  
  5.     {  
  6.     <p>The price is  greater than 50.</p>  
  7.  }  
  8.   
  9. else  
  10.   {  
  11.   <p>The price is less than 50.</p>  
  12.   }   
  13.   
  14. </body>  
  15. </html>  

In the above example, we have declared var price having a value of 60 and we are using if statement which is validating price. If the price is greater than 50 then the code written inside braces gets executed else the price is less than 50 and it will get executed.

Switch statement

It is used to check multiple individual conditions.

  1. @ {  
  2.     var month = DateTime.Now.Year.ToString();  
  3.     var message = "";  
  4. }   
  5. <html>  
  6.   <body>   
  7.   @ {  
  8.         switch (month)   
  9.         {  
  10.             case "January":  
  11.                 message = "Startingof Year.";  
  12.                 break;  
  13.             case "June":  
  14.                 message = "Middle of Year";  
  15.                 break;  
  16.             case "December":  
  17.                 message = "End of Year";  
  18.                 break;  
  19.         }  
  20.         @message;   
  21.   </body>   
  22. </html>  

Loops

Loops are used for executingthe  same statement multiple times.

For Loops

If you know how many times you want to run the loop, you can use a For loop.

  1. <html>  
  2.    <body>  
  3.       @for(var i = 0; i < 10; i++)  
  4.        {<p>No @i</p>}  
  5.    </body>  
  6. </html>  
For Each Loops

Foreach loop is used when you are working with collections or an array.

  1. <html>  
  2. <body>  
  3.     <ul> @foreach (var x in Request.ServerVariables) {  
  4.         <li>@x</li>} </ul>  
  5. </body>  
  6. </html>  

Model

If you want to use model in, then you must declare the model in the view;  for this you must use @model shown as below.

@model modelname

Let's understand in the below example.

  1. @model Employee  
  2. <h2>Employee Detail:</h2>  
  3. <ul>  
  4.     <li>Student Id: @Model.EmployeeId</li>  
  5.     <li>Student Name: @Model. EmployeeName</li>  
  6.     <li>Age: @Model.Age</li>  
  7. </ul>  

Now, in the above example, we have used Employee model which is created in the Model folder by declaring @model Employee.

And by using @Model, we are using its properties.


Similar Articles