ASP.NET Razor - C# and VB Code Syntax

Razor supports both C# (C sharp) and VB (Visual Basic).

The main Razor syntax rules in C#

  • Razor code is enclosed in @{ ... }
  • Inline expressions (variables and functions) start with @
  • Code statements end with a semicolon
  • Strings are enclosed in quotes
  • C# code is case-sensitive
  • The extension name of C# files is .cshtml

C# Example

<!-- Single-line code block -->
@{ var myMessage =	"Hello World"; }
<!-- Inline expressions or variables -->
<p>The value of myMessage is: @myMessage</p> 
<!-- Multi-line code 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

The main Razor syntax rules in VB

  • Razor code blocks are enclosed in @Code ... End Code
  • Inline expressions (variables and functions) start with @
  • Variables are declared with the Dim keyword
  • Strings are enclosed in quotes
  • VB is case-insensitive
  • The extension name of VB files is .vbhtml

Example

<!-- Single-line code block -->
@Code dim myMessage = "Hello World" End Code
<!-- Inline expressions or variables -->
<p>The value of myMessage is: @myMessage</p> 
<!-- Multi-line code 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 used to embed server-side code in web pages.

Razor syntax is based on the ASP.NET framework, which is a component of Microsoft's .NET framework specifically designed for web application development.

Razor syntax grants you all the capabilities of ASP.NET, but with a simplified syntax, making it easier for beginners to learn and more productive for experts.

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

When the server reads this page, it will first run the Razor code before sending the HTML page to the browser. These codes executed on the server can complete tasks that cannot be completed in the browser, such as accessing the server database. Server code can create dynamic HTML content before the page is sent to the browser. From the browser's perspective, the HTML generated by the server code is indistinguishable from static HTML content.

ASP.NET web pages using Razor syntax have special file extensions cshtml (using C# Razor syntax) or vbhtml (using VB Razor).

Dealing with objects

Server code often involves objects.

"Date" object is a typical ASP.NET built-in object, but you can also define your own objects, such as a webpage, a textbox, a file, or a database record, etc.

Objects can have methods that can be executed. Database records can provide a 'save' method, image objects can have a 'rotate' method, email objects can provide a 'send' method, and so on.

Objects can also have properties that describe their characteristics. Database records can have FirstName and LastName properties.

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 following example shows how to access certain 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

A key feature of dynamic web pages is to determine the actions to be executed based on conditions.

The common method to achieve this is to use if ... else statements:

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

Read User Input

Another important feature of dynamic web pages is reading user input.

Read input by the Request[] function and tested by 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;
    }
}
<html>
<body style="background-color: beige; font-family: Verdana, Arial;">
<form action="" method="post">
<p><label for="text1">First Number:</label><br>
<p><input type="text" name="text1" /></p>
<p><label for="text2">Second Number:</label><br>
<p><input type="text" name="text2" /></p>
<p><input type="submit" value="Add" /></p>
</form>
<p>@totalMessage</p>
</body>
</html>

Run Example