Razor Syntax in MVC
Razor is one of the view engine supported in ASP.NET MVC. Razor allows you to write mix of HTML and server side code using C# or Visual Basic. Razor view with visual basic syntax has .vbhtml file extension and C# syntax has .cshtml file extension.
Razor syntax has following Characteristics:
Compact: Razor syntax is compact which enables you to minimize number of characters and keystrokes required to write a code.
Easy to Learn: Razor syntax is easy to learn where you can use your familiar language C# or Visual Basic.
Intellisense: Razor syntax supports statement completion within Visual Studio.
how to write razor code.
Start with @ symbol to write server side C# or VB code with Html code. For example, write @Variable_Name to display a value of a server side variable. For example, DateTime.Now returns a current date and time. So, write @DateTime.Now to display current system datetime as shown below. A single line expression does not require a semicolon at the end of the expression
Razor Syntax of example
C# Razor Syntax
Razor syntax demo
@DateTime.Now.ToShortDateString()
Output:
Razor syntax demo
22-12-2018 //Current date show my computer system
Multi-statement Code bloc
You can write multiple line of server side code enclosed in braces @{ ... }.
Each line must ends with semicolon same as C#.
Example: Server side Code in Razor Syntax
@{
var date = DateTime.Now.ToShortDateString();
var message = "Hello Friends";
}
Today's date is: @date
@message
Output:
Today's date is: 08-09-2014
Hello World!
Display Text from Code Block
Use @: or
texts within code block.
Example: Display Text in Razor Syntax
@{
var date = DateTime.Now.ToShortDateString();
string message = "Hello World!";
@:Today's date is: @date
@message
}
Output:
Today's date is: 08-09-2014
Hello World!
Display text using
Example: Text in Razor Syntax
@{
var date = DateTime.Now.ToShortDateString();
string message = "Hello World!";
@message
}
Output:
Today's date is: 08-09-2014
Hello World!
Condition Write
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.
@{var price=60;}
@if (price>50)
{
The price is greater than 50.
}
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.
@{var price=60;}
@if (price>50)
{
The price is greater than 50.
}
else
{
The price is less than 50.
}
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.
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.
@for(var i = 0; i < 10; i++)
{No @i
}
@for(var i = 0; i < 10; i++)
{No @i
}
For Each Loops
Foreach loop is used when you are working with collections or an array.
- @foreach (var x in Request.ServerVariables) {
- @x }
- @foreach (var x in Request.ServerVariables) {
- @x }
Model
Use @model to use model object anywhere in the view.
Example: Use Model in Razor
@model Book
BookDetail:
BookId: @Model.BookId
Book Name: @Model.BookName
Book Page: @Model.BookPage
Output: Book Detail :
- BookId: 1001
- Book Name: Abc
- Book Page: 18
Declare Variables
Declare a variable in a code block enclosed in brackets and then use those
variables inside html with @ symbol.
Example: Variable in Razor
@{
string str = "";
if(1 > 0)
{
str = "Hello World!";
}
}
@str
Output:
Hello World!
No comments: