×

iFour Logo

What is Razor View Engine in ASP.Net Core?

Kapil Panchal - October 27, 2020

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

  • play
  • pause
  • pause
What is Razor View Engine in ASP.Net Core?

What is View Engine?


View Engine is responsible for producing an HTML response when called by the Controller Action method.The Controller Action methods can return different types of responseswhich are collectively called as Action Results. The View-result is the Action Result which produces the HTML Response.

The View Results are produced by the View Engine. When the Controller Action method call the view () or PartialView ()it calls the View Engine, which generate the HTML Response.View Engine is responsible for rendering the view into HTML form to the browser, View Engine is used to convert HTMLProgramming language to pure HTML.

Why is View Engine required in ASP.NET?


  • View engine is responsible in creating HTML for View.

  • It converts Pure HTML programming language to HTML

  • View Engine is used to find the Related view for the action method.

  • We are able to write C#/VB code on View

  • View Engine is Needed to implement the strongly-typed View.

What is Razor View Engine?


The Razor View Engine is the default View Engine for the ASP.NET Core. It looks for Razor markup in the View File and parses it and produces the HTML response.

Razor Markup


The Controller in MVC invokes the View by passing the info to render. The Views must have the power to process the info and generate a response. This is done by the Razor markup, which allows us to use C# code in an HTML file. The Razor View Engine process these markups to get the HTML.

The files which contains Razor markup have a. cshtml file extension.The Razor syntax is shorter, simpler and straightforward to find out because it uses the C# or visual basic. The Visual Studio Intelligence support also helps with Razor syntax.

What is Razor Syntax in MVC?


There aretwo types of Razor syntax.

  1. Single statement block: It starts with @.

  2. Multi statement block: It is starts with @ {Coding part}.

It needs to be always enclosed in @ {Coding part}

The semicolon “;” must be used to end the statements

Inline expressions (variables and functions) start with @

 

1) Single block Statements

A single statement block is used when a single line of code needs to write on View.

Example

To display current Date-time.

Create Index.cshtml View and add below code.


  @{  
     ViewBag.Title = "Index";  
 }

Inspect browser and search for “DateTime.Now.ToString()” on browser.We cannot find the C# code on the browser as we did.

If you inspect browser and search for “DateTime.Now.ToString()” on the browser. it could not see the C# code on the browser. We can only see the only HTML code. This is the job of View Engine which convert C# code into pure Html format in the browser.

 

2) Multi statement block

We can also define a multiline statement block as a single-line statement block. In a multiline statement block we can define multiple code statements and doprocess. A multiline block is between opening and closing curly braces {}, but the opening brace will have the "@" character in the same line if we define the "@" and opening curly braces in different lines then it will give an error.

                
@{ Var Java=100; Var Rubi=200; Var Ionic=400; Var sum=(Java+Rubi+Ionic); } Sum of @Java and @Rubi and @Ionic is

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

  Variables 

// Using the var keyword:  
var a = "Welcome to MyProgram";  
var b = 300;  
var c = DateTime.Today;    
// Using data types:  
string greeting = "Welcome to MyProgram ";  
int counter = 300;  
DateTime day = DateTime.Today; 
                                        

Now, in the above example, we have declared variables using “var” keyword as well as throughits types forexample. string, int, Date Time. You can declare any of them. Italso 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 true is written inside braces.

Let’s understand with the below example.


  @{var a=60;}  
  
  @if (a>50) { The a is greater than 50.
  }
  
                                          

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


If – Else statement

Initially the code block and its condition arewritten in parenthesis and code which is needs to be executed once the condition gets true is written inside braces and if it does not gettrue then code write inside else block gets executed.

Let’s understand with the below example.


  @ {var a=60;}  
  
  @if (a>50) { The value is greater than 50.
  } else {
  The value is less than 50.
  }
  
                                            

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


Switch statement

It is used to check multiple times with different conditions.


  @ {  
      var month = DateTime.Now.Year.ToString();  
      var message = "";  
  }   
    
       
    @ {  
          switch (month)   
          {  
              case "January":  
                  message = "Starting of Year.";  
                  break;  
              case "June":  
                  message = "Middle of Year";  
                  break;  
              case "December":  
                  message = "End of Year";  
                  break;  
          }  
          @message;   
  
                                                

Looking to Hire ASP.Net Core Developer ?

Contact Now

 

Loops

Loops are used for executing same statement multiple times.

For Loops

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


  @for(var i = 0; i<10; i++) {
      No @i
  }  

                                                
For Each Loops

Foreach loop is used when you are working with array.


@foreach (var x in Request.variable) {
    @x
}

                                                

Model

If you want to use model in HTML page then you have to declare model shown below


  @model modelname
  Let's understand in the below example.
    @model data Detail:
  Id: @Model.Id 
  Name: @Model.Name
  Age: @Model.Age
  
                                              

Now, in the above example, we have used data model which is created in the Model folder by declaring @model data and by using @Model, we are using its properties.

Conclusion


Using Razor View Engine,you can make dynamic HTML Pages and use to get the data from model and database.

What is Razor View Engine in ASP.Net Core? Table of Content 1. What is View Engine? 2. Why is View Engine required in ASP.NET? 3. What is Razor View Engine? 4. Razor Markup 5. What is Razor Syntax in MVC? 5.1. Single block Statements 5.2. Multi statement block 5.2.1. Variables 5.2.2. Conditions 5.2.3. Loops 5.2.4. Model 6. Conclusion What is View Engine? View Engine is responsible for producing an HTML response when called by the Controller Action method.The Controller Action methods can return different types of responseswhich are collectively called as Action Results. The View-result is the Action Result which produces the HTML Response. The View Results are produced by the View Engine. When the Controller Action method call the view () or PartialView ()it calls the View Engine, which generate the HTML Response.View Engine is responsible for rendering the view into HTML form to the browser, View Engine is used to convert HTMLProgramming language to pure HTML. Why is View Engine required in ASP.NET? View engine is responsible in creating HTML for View. It converts Pure HTML programming language to HTML View Engine is used to find the Related view for the action method. We are able to write C#/VB code on View View Engine is Needed to implement the strongly-typed View. What is Razor View Engine? The Razor View Engine is the default View Engine for the ASP.NET Core. It looks for Razor markup in the View File and parses it and produces the HTML response. Razor Markup The Controller in MVC invokes the View by passing the info to render. The Views must have the power to process the info and generate a response. This is done by the Razor markup, which allows us to use C# code in an HTML file. The Razor View Engine process these markups to get the HTML. The files which contains Razor markup have a. cshtml file extension.The Razor syntax is shorter, simpler and straightforward to find out because it uses the C# or visual basic. The Visual Studio Intelligence support also helps with Razor syntax. What is Razor Syntax in MVC? There aretwo types of Razor syntax. Single statement block: It starts with @. Multi statement block: It is starts with @ {Coding part}. It needs to be always enclosed in @ {Coding part} The semicolon “;” must be used to end the statements Inline expressions (variables and functions) start with @ Read More: How To Use Elmah For Enumerating Error In Asp.net Core?   1) Single block Statements A single statement block is used when a single line of code needs to write on View. Example To display current Date-time. Create Index.cshtml View and add below code. @{ ViewBag.Title = "Index"; } Current-Date: @DateTime.Now.ToString() Current-Long Date: @DateTime.Now.ToLongDateString() Inspect browser and search for “DateTime.Now.ToString()” on browser.We cannot find the C# code on the browser as we did. If you inspect browser and search for “DateTime.Now.ToString()” on the browser. it could not see the C# code on the browser. We can only see the only HTML code. This is the job of View Engine which convert C# code into pure Html format in the browser.   2) Multi statement block We can also define a multiline statement block as a single-line statement block. In a multiline statement block we can define multiple code statements and doprocess. A multiline block is between opening and closing curly braces {}, but the opening brace will have the "@" character in the same line if we define the "@" and opening curly braces in different lines then it will give an error. @{ Var Java=100; Var Rubi=200; Var Ionic=400; Var sum=(Java+Rubi+Ionic); } Sum of @Java and @Rubi and @Ionic is Now, let’s see how to write Razor code:   Variables  // Using the var keyword: var a = "Welcome to MyProgram"; var b = 300; var c = DateTime.Today; // Using data types: string greeting = "Welcome to MyProgram "; int counter = 300; DateTime day = DateTime.Today; Now, in the above example, we have declared variables using “var” keyword as well as throughits types forexample. string, int, Date Time. You can declare any of them. Italso 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 true is written inside braces. Let’s understand with the below example. @{var a=60;} @if (a>50) { The a is greater than 50. } In the above example, we have declared var “a” has a value of 60 and we are using if statement which is validating value of “a”. If the value is greater than 50 then the code written in side braces is executed. If – Else statement Initially the code block and its condition arewritten in parenthesis and code which is needs to be executed once the condition gets true is written inside braces and if it does not gettrue then code write inside else block gets executed. Let’s understand with the below example. @ {var a=60;} @if (a>50) { The value is greater than 50. } else { The value is less than 50. } In the above example, we have declared var “a” having a value of 60 and we are using if statement which is validating value of “a”. If the “a” is greater than 50 then the code written inside braces gets executed else the “a” is less than 50 and it will be executed. Switch statement It is used to check multiple times with different conditions. @ { var month = DateTime.Now.Year.ToString(); var message = ""; } @ { switch (month) { case "January": message = "Starting of Year."; break; case "June": message = "Middle of Year"; break; case "December": message = "End of Year"; break; } @message; Looking to Hire ASP.Net Core Developer ? Contact Now See here   Loops Loops are used for executing same statement multiple times. For Loops If you know how many times you want to run the loop, you can use a For loop. @for(var i = 0; i<10; i++) { No @i } For Each Loops Foreach loop is used when you are working with array. @foreach (var x in Request.variable) { @x } Model If you want to use model in HTML page then you have to declare model shown below @model modelname Let's understand in the below example. @model data Detail: Id: @Model.Id Name: @Model.Name Age: @Model.Age Now, in the above example, we have used data model which is created in the Model folder by declaring @model data and by using @Model, we are using its properties. Conclusion Using Razor View Engine,you can make dynamic HTML Pages and use to get the data from model and database.

Build Your Agile Team

Enter your e-mail address Please enter valid e-mail

Categories

Ensure your sustainable growth with our team

Talk to our experts
Sustainable
Sustainable
 

Blog Our insights

Power Apps vs Power Automate: When to Use What?
Power Apps vs Power Automate: When to Use What?

I often see people asking questions like “Is Power App the same as Power Automate?”. “Are they interchangeable or have their own purpose?”. We first need to clear up this confusion...

Azure DevOps Pipeline Deployment for Competitive Business: The Winning Formula
Azure DevOps Pipeline Deployment for Competitive Business: The Winning Formula

We always hear about how important it is to be competitive and stand out in the market. But as an entrepreneur, how would you truly set your business apart? Is there any way to do...

React 18 Vs React 19: Key Differences To Know For 2024
React 18 Vs React 19: Key Differences To Know For 2024

Ever wondered how a simple technology can spark a revolution in the IT business? Just look at React.js - a leading Front-end JS library released in 2013, has made it possible. Praised for its seamless features, React.js has altered the way of bespoke app development with its latest versions released periodically. React.js is known for building interactive user interfaces and has been evolving rapidly to meet the demands of modern web development. Thus, businesses lean to hire dedicated React.js developers for their projects. React.js 19 is the latest version released and people are loving its amazing features impelling them for its adoption.