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 contained in @{ ... }
  • Inline expressions (variables and functions) start with @
  • Code statements end with semicolons
  • Variables are declared with the var keyword
  • Strings are enclosed in quotation marks
  • C# code is case-sensitive
  • The extension of C# files is .cshtml

C# Example

<!-- 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>

Run example »

Main Razor VB Syntax Rules

  • Razor code blocks are contained in @Code ... End Code
  • Inline expressions (variables and functions) start with @
  • Variables are declared with the Dim keyword
  • Strings are enclosed in quotation marks
  • VB code is not case-sensitive
  • The extension of VB files 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 example »

How does it work?

Razor is a simple programming syntax for embedding server code in web pages.

Razor syntax is based on the ASP.NET framework, the part of the Microsoft.NET framework specifically designed for creating Web applications.

Razor syntax supports all ASP.NET features, but uses a simplified syntax that is easier for beginners to learn and more efficient for experts.

Razor web pages can be described as HTML pages with the following two types of content: HTML content and Razor code.

When the server reads the page, it runs the Razor code first, then sends the HTML page to the browser. Code executed on the server can perform tasks that cannot be done in the browser, such as accessing server databases. Server code can create dynamic HTML content and then send it to the browser. From the browser's perspective, the HTML generated by server code is no different from 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 objects can also be custom, a web page, a text box, a file, a database record, and so on.

Objects have methods for execution. A database record may have a "Save" method, an image object may have a "Rotate" method, an email object may have a "Send" method, etc.
Objects also have properties that describe their characteristics. A database record may have FirstName and LastName properties.

The ASP.NET Date object has a Now property (written as Date.Now), and the Now property has a Day property (written as Date.Now.Day). The example below demonstrates how to access some properties of the Date 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 »

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 the 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 »

Reading User Input

Another important feature of dynamic web pages is that you can read user input.

Input is read via the Request[] feature, and the transmitted input data is passed through the IsPost conditional check:

Example

@{
var totalMessage = "";
if(IsPost)
{
var num1 = Request["text1"];
var num2 = Request["text2"];
var total = num1.AsInt() + num2.AsInt();
totalMessage = "Total = " + total;
}
}
<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 example »

Other extensions