ASP.NET Web Pages - Adding Razor Code
In this tutorial, we will use Razor markup with C# and Visual Basic code.
What is Razor?
- Razor is a markup syntax for adding server-based code to web pages.
- Razor has the functionality of traditional ASP.NET markup, but it is easier to use and easier to learn.
- Razor is a server-side markup syntax, very much like ASP and PHP.
- Razor supports the C# and Visual Basic programming languages.
Adding Razor Code
Remember the web page from the example in the previous chapter:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Web Pages Demo</title>
</head>
<body>
<h1>Hello Web Pages</h1>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Web Pages Demo</title>
</head>
<body>
<h1>Hello Web Pages</h1>
</body>
</html>
Now let's add some Razor code to the example:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Web Pages Demo</title>
</head>
<body>
<h1>Hello Web Pages</h1>
<p>The time is @DateTime.Now</p>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Web Pages Demo</title>
</head>
<body>
<h1>Hello Web Pages</h1>
<p>The time is @DateTime.Now</p>
</body>
</html>
Run Example »
This page contains ordinary HTML markup, and in addition, a piece of Razor code identified by @ has been added.
Razor code can perform all actions on the server in real time and display the results. (You can specify formatting options, otherwise only the default items will be displayed.)
Main Razor C# Syntax Rules
- Razor code blocks are enclosed 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 file extension for 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 + " Today is: " + weekDay;
}
<p>The greeting is: @greetingMessage</p>
@{ 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 + " Today is: " + weekDay;
}
<p>The greeting is: @greetingMessage</p>
Run Example »
Main Razor VB Syntax Rules
- 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 quotation marks
- VB code is not case-sensitive
- The file extension for 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 & " Today is: " & weekDay
End Code
<p>The greeting is: @greetingMessage</p>
@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 & " Today is: " & weekDay
End Code
<p>The greeting is: @greetingMessage</p>
Run Example »
More About C# and Visual Basic
If you want to learn more about Razor, C#, and Visual Basic programming languages, please check this tutorial'sRazor section。
Other Extensions