Razor supports both C# (C sharp) and VB (Visual Basic).
This section explains the syntax rules of Razor C# and Razor VB.
Razor code blocks are enclosed in @{ ... }
Inline expressions (variables and functions) start with @
End code statements with a semicolon
Variables are declared using the var keyword
Strings enclosed in quotes
C# code is case sensitive
The C# file extension is .cshtml
<!-- 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>Razor code blocks are enclosed in @Code ... End Code
Inline expressions (variables and functions) start with @
Variables are declared using the Dim keyword
Strings enclosed in quotes
VB code is not case sensitive
The extension for VB files is .vbhtml
<!-- 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 --> @Codedim greeting = "Welcome to our site!" dim weekDay = DateTime.Now.DayOfWeek dim greetingMessage = greeting & " Here in Huston it is: " & weekDayEnd Code <p>The greeting is: @greetingMessage </p>
Razor is a simple programming syntax for embedding server code in web pages.
Razor syntax is based on the ASP.NET framework, a portion of the Microsoft .NET framework designed specifically 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.
A Razor web page can be described as an HTML web page with 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).
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 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 following example demonstrates how to access some properties of the Data object:
<table> <tr> <th>Name</th> <td>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>
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 if ... else statements:
@{var txt = "";if(DateTime.Now.Hour > 12){txt = "Good Evening";}else{txt = "Good Morning";}} <html> <body> <p>The message is @txt </p> </body> </html>Another important feature of dynamic web pages is that you can read user input.
Input is read through the Request[] function, and the input data is transmitted through the IsPost condition:
@{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>