Razor syntax
ASP.NET Razor - C# and VB code syntax
Razor supports both C# (C sharp) and VB (Visual Basic).
Main Razor C# syntax rules
- Razor code blocks are enclosed in @{ ... }
- Inline expressions (variables and functions ) Start with @
- Code statements end with semicolon
- Variables are declared using the var keyword
- Strings are enclosed in quotes
- C# Code is size sensitive The extension of writing
C# file is .cshtml
Example
<html>
<body>
<!-- Single statement block -->
@{ var myMessage = "Hello World"; }
<!-- Inline expression or variable -->
<p>The value of myMessage is: @myMessage</p>
<!-- Multi-statement block -->
@{
var greeting = "Welcome to our site!";
var weekDay = DateTime.Now.DayOfWeek;
var greetingMessage = greeting + " Here in Huston it is: " + weekDay;
}
<p>The greeting is: @greetingMessage</p>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Main Razor VB syntax rules
- Razor code Blocks are enclosed in @Code ... End Code
- Inline expressions (variables and functions) begin with @
- Variables are declared using the Dim keyword
- Strings are declared with Enclosed in quotation marks
- VB code is not case sensitive
- The extension of VB file is .vbhtml
Example
<!-- Single statement block --> @Code dim myMessage = "Hello World" End Code <!-- Inline expression or variable --> <p>The value of myMessage is: @myMessage</p> <!-- Multi-statement block --> @Code dim greeting = "Welcome to our site!" dim weekDay = DateTime.Now.DayOfWeek dim greetingMessage = greeting & " Here in Huston it is: " & weekDay End Code <p>The greeting is: @greetingMessage</p>
Run Instance»
Click the "Run Instance" button to view the online instance
How does it work?
Razor is a simple programming syntax that embeds server code in web pages.
Razor syntax is based on the ASP.NET Framework, a portion of the Microsoft .NET Framework specifically designed for creating Web applications.
Razor syntax supports all the features of ASP.NET, but uses a simplified syntax that is easier to learn for beginners and more efficient for experts.
Razor web pages can be described as HTML web pages with the following two types of content: HTML content and Razor code.
When the server reads the page, it first runs the Razor code before sending the HTML page to the browser. Code executed on the server can perform tasks that cannot be completed on the browser, such as accessing the server database. Server code can create dynamic HTML content and send it to the browser. From a browser perspective, the HTML generated by the server code is no different than static HTML content.
ASP.NET web pages with Razor syntax have special file extensions cshtml (Razor C#) or vbhtml (Razor VB).
Using objects
Server coding often involves objects.
The "Date" object is a typical built-in ASP.NET object, but the object can also be a custom one, a web page, a text box, a file, a database record, etc.
Objects have methods for execution. A database record might have a "Save" method, an image object might have a "Rotate" method, an email object might have a "Send" method, and so on.
Objects also have attributes used to describe their respective characteristics. A database record may have FirstName and LastName properties.
ASP.NET Date objects have a Now property (written as Date.Now), and the Now property has a Day property (written as Date.Now.Day). The following example demonstrates how to access some properties of the Data object:
Example
<table border="1"> <tr> <th width="100px">Name</th> <td width="100px">Value</td> </tr> <tr> <td>Day</td><td>@DateTime.Now.Day</td> </tr> <tr> <td>Hour</td><td>@DateTime.Now.Hour</td> </tr> <tr> <td>Minute</td><td>@DateTime.Now.Minute</td> </tr> <tr> <td>Second</td><td>@DateTime.Now.Second</td> </tr> </td> </table>
Run Example»
Click "Run" Example" button to view online examples
If and Else conditions
An important feature of dynamic web pages is that you can decide what to do based on conditions.
A common way to do this is to use an if ... else statement:
Example
@{
var txt = "";
if(DateTime.Now.Hour > 12)
{txt = "Good Evening";}
else
{txt = "Good Morning";}
}
<html>
<body>
<p>The message is @txt</p>
</body>
</html>Run Example »
Click the "Run Instance" button to view the online example
Read user input
Another important feature of dynamic web pages is that you can read Get user input.
The input is read through the Request[] function, and the input data is transmitted through the IsPost condition:
Example
@{
var totalMessage = "";
if(IsPost)
{
var num1 = Request["text1"];
var num2 = Request["text2"];
var total = num1.AsInt() + num2.AsInt();
totalMessage = "Total = " + total;
}
}
<!DOCTYPE html>
<html>
<body style="background-color: beige; font-family: Verdana, Arial;">
<form action="" method="post">
<p><label for="text1">First Number:</label><br>
<input type="text" name="text1"></p>
<p><label for="text2">Second Number:</label><br>
<input type="text" name="text2"></p>
<p><input type="submit" value=" Add "></p>
</form>
<p>@totalMessage</p>
</body>
</html>Run instance »
Click the "Run instance" button to view the online instance
