Walkthrough: Creating a Web Site using Razor Syntax in Visual Studio

Article
02/13/2013

ASP.NET Web Pages with Razor syntax provides a simple programming syntax for writing code in Web pages where the server-based code is embedded into the Web page HTML markup. The Razor code runs on the server before the page is sent to the browser. This server code can dynamically create client content—that is, it can generate HTML markup or other content on the fly and then send it to the browser along with any static HTML that the page contains.

Web Pages with Razor syntax provide an alternative to ASP.NET Web Forms. Web Forms pages center around Web server controls that generate HTML automatically and that emulate the event-based programming model used for client applications. In contrast, Razor pages work more directly like standard HTML pages, where you create virtually all of the HTML markup yourself and where you then add functionality around that markup using server code. In general, Razor pages are more lightweight than Web Forms pages. Because of that and because the syntax is simple, Razor can be easier for programmers to learn and can be faster for developing dynamic Web pages.

Web pages that contain Razor content have a special file extension (.cshtml or .vbhtml). The server recognizes these extensions, runs the code that's marked with Razor syntax, and then sends the resulting page to the browser.

Razor was initially introduced with Microsoft WebMatrix. This walkthrough demonstrates how to use ASP.NET Razor working in Visual Studio.

Prerequisites

In order to complete this walkthrough, you will need:

Visual Studio 2010 SP1

Installing the ASP.NET Razor Tools

This section explains how to install the Visual Studio tools that support ASP.NET Razor. If you installed Visual Studio 2010 SP1 using the Microsoft Web Platform Installer, you can skip this section because you already have the required tools. If you installed Visual Studio 2010 SP1 by downloading it from MSDN, you should follow this procedure.

To install the ASP.NET Razor tools for Visual Studio

If you do not already have the Web Platform Installer, download it using the following link: Microsoft Web Platform Installer.
Run the Web Platform Installer.
Find ASP.NET MVC 3, and then click Add. ASP.NET MVC 3 includes Visual Studio tools for building ASP.NET Razor Web sites.
Click Install to complete the installation.

Creating an ASP.NET Razor Web Site

After you install Visual Studio 2010 SP1 and the ASP.NET Razor tools, you can create either an ASP.NET Razor Web site project or a Web application project. In this walkthrough, you will create a Web site project.

To create a Web site using ASP.NET Razor

Start Visual Studio.
In the File menu, click New Web Site.
In the New Web Site dialog box, select the language to use (Visual C# or Visual Basic).
Select .NET Framework 4.
Select the ASP.NET Web Site (Razor) template.
In the Web locations drop-down list, select File System, and then browse to the local folder where you want to place the Web site files.
Click OK.

Examining ASP.NET Razor Syntax

In this section, you will add some code statements to the default page of the new Web site to see ASP.NET Razor in action.

To examine ASP.NET Razor syntax

Open the Default.cshtml or Default.vbhtml page.
At the top of the page, after the line that begins with Page.Title, add the following line of code:
```
var weekDay = DateTime.Now.DayOfWeek;
```
```
Dim weekDay = DateTime.Now.DayOfWeek
```
The code declares a variable and sets it equal to the current day of the week.
After the closing  tag in the page, add the following line of code:
```
Today is: @weekDay
```
```
Today is: @weekDay
```
This line displays the current day of the week. The @ character starts Razor inline expressions, single statement blocks, and multi-statement blocks. It separates HTML markup from runnable code.

Add the following code block.

@for(var i = 10; i < 16; i++)
{
    <p style="font-size: @(i + "pt")">My font size is now: @i</p>
}

@For i = 10 To 15
    @<p style="font-size: @(i)pt">My font size is now: @i</p>
Next

Add the following code block, which uses a foreach loop to display the name of each item in the Request.ServerVariables collection, which contains information about your Web server.
```
<ul>
@foreach (var myItem in Request.ServerVariables)
{
 <li>@myItem</li>
}
</ul>
```
```
<ul>
@For Each myItem In Request.ServerVariables
 @<li>@myItem</li>
Next myItem
</ul>
```
Press Ctrl+F5 to run the page. The following illustration shows what the page looks like the browser.

Next Steps

To learn ASP.NET Razor syntax in more depth, see Introduction to ASP.NET Web Programming Using the Razor Syntax.