In Focus

Razor View Syntax In ASP.NET MVC

In this article, you will learn the syntax of Razor View in ASP.NET MVC.

Introduction

 
This article will explain the Razor View syntax in ASP.NET MVC. We will discuss how C# code can be written in a View combined with HTML. We can use the @ symbol to switch between C# code and HTML. If we want to define some variables and perform calculations, then we use a code block. Use @{ } to define a code block. The @ symbol is used as a code delimiter in Razor Views. However, Razor is smart enough to recognize the format of the internet email address and not to treat the @ symbol as a code delimiter.
 
Step 1
 
Open SQL Server 2014 or a version of your choice and create a table with some data.
 
Step 2
 
In Visual Studio, choose a web application project and give an appropriate name to your project.
 
Razor View Syntax In ASP.NET MVC
 
Step 3
 
Select "empty template", check on the MVC checkbox, and click OK.
 
Razor View Syntax In ASP.NET MVC
 
Step 4
 
Right-click on the Controllers folder and add a controller.
 
Razor View Syntax In ASP.NET MVC
 
A window will appear. Choose MVC5 Controller-Empty and click "Add".
 
Razor View Syntax In ASP.NET MVC
 
After clicking on "Add", another window will appear with DefaultController. Change the name to HomeController and click "Add". The HomeController will be added under the Controllers folder. Don’t change the Controller suffix for all controllers, change only the highlight, and instead of Default, just change Home.
 
Razor View Syntax In ASP.NET MVC
 
Step 5
 
Right-click the Index method in HomeController. The "Add View" window will appear with default index name checked (use a Layout page). Click on "Add".
 
Razor View Syntax In ASP.NET MVC
 
Example 1
  1. @{  
  2.     ViewBag.Title = "Index";  
  3. }  
  4.    
  5. <h3>Razor Programming</h3>  
  6.    
  7. @for (int i = 1; i < 10; i++)  
  8. {  
  9.     <b>@i</b>  
  10. }  
Razor View Syntax In ASP.NET MVC
 
Example 2
  1. @{  
  2.     ViewBag.Title = "Index";  
  3. }  
  4.    
  5. <h3>Razor Programming</h3>  
  6.    
  7. @{  
  8.     int firstNumber = 10;  
  9.     int secondNumber = 20;  
  10.    
  11.     int sum = firstNumber + secondNumber;  
  12.    
  13.     <h4>First Number:@firstNumber</h4>  
  14.     <h4>Second Number:@secondNumber</h4>  
  15.     <h4>Total:@sum</h4>  
  16. }  
Razor View Syntax In ASP.NET MVC
 
Example 3
  1. @{  
  2.     ViewBag.Title = "Index";  
  3. }  
  4.    
  5. <h3>Razor Programming</h3>  
  6.    
  7. @{  
  8.     int[]number = new int[10] {1,0,1,0,1,0,1,0,1,0};  
  9.     Array.Sort(number);  
  10.    
  11.     foreach (var item in number)  
  12.     {  
  13.         <b>@item</b>  
  14.     }  
  15. }  
Razor View Syntax In ASP.NET MVC
 
Example 4
  1. @{  
  2.     ViewBag.Title = "Index";  
  3. }  
  4.    
  5. <h3>Razor Programming</h3>  
  6.    
  7. @{  
  8.     int i, j;  
  9.     for (i = 1; i <= 5; i++)  
  10.     {  
  11.         for (j = 1; j <= i; j++)  
  12.         {  
  13.             <b>*</b>  
  14.         }  
  15.         <br/>  
  16.     }  
  17. }  
Razor View Syntax In ASP.NET MVC
 
Example 5
  1. @{  
  2.     ViewBag.Title = "Index";  
  3. }  
  4.    
  5. <h3>Razor Programming</h3>  
  6.    
  7. @{  
  8.     int i, j;  
  9.     for (i = 1; i <= 5; i++)  
  10.     {  
  11.         for (j = i; j < 5; j++)  
  12.         {  
  13.             <b> </b>  
  14.         }  
  15.         for (j = 1; j <= (2 * i - 1); j++)  
  16.         {  
  17.             <b>*</b>  
  18.         }  
  19.         <br />  
  20.     }  
  21.     for (i = 5; i >= 1; i--)  
  22.     {  
  23.         for (j = i; j <= 5; j++)  
  24.         {  
  25.             <b> </b>  
  26.         }  
  27.         for (j = 2; j < (2 * i - 1); j++)  
  28.         {  
  29.             <b>*</b>  
  30.         }  
  31.         <br/>  
  32.     }  
  33. }  
Razor View Syntax In ASP.NET MVC