Programming ASP.NET Web Pages (Razor) Using Visual Studio
This article explains how you can use Visual Studio or Visual Web Developer Express to program ASP.NET Web Pages (Razor) websites.
What you'll learn
- What you need to install (if anything) to work with ASP.NET Web Pages in Visual Studio 2010 and Visual Studio 2012.
- How to add support for ASP.NET Web Pages to Visual Web Developer 2010 Express. (ASP.NET Web Pages 2 is already included with Visual Studio 2012.)
- How to use features in Visual Studio to work with ASP.NET Razor pages, including IntelliSense and the debugger.
Note The information in this article applies to ASP.NET Web Pages 1.0 and Web Pages 2 .
You can program ASP.NET Web pages with Razor syntax using WebMatrix or many other code editors. You can also use Microsoft Visual Studio 2010 or Microsoft Visual Studio 2012. These programs are full-featured integrated development environments (IDE) that provide a powerful set of tools for creating many types of applications (not just websites). To work with ASP.NET Razor pages, you can either use one of the full editions of Visual Studio or the free Visual Web Developer Express edition.
Two particularly useful features that Visual Studio provides for programming with ASP.NET Razor web pages are:
IntelliSense. The IntelliSense feature built into Visual Studio is more comprehensive than IntelliSense in WebMatrix 2.
Debugger. The debugger lets you troubleshoot your code by stopping a program while it's running, examining variables, and stepping through the code line by line.
Using Visual Studio with Different Versions of ASP.NET Web Pages
Visual Studio 2012 includes support for ASP.NET Web Pages 2. (The packages that are required in order to support ASP.NET Web Pages 2 are installed when you install Visual Studio 2012.) It's possible to install ASP.NET Web Pages 1.0 in Visual Studio 2012 if you need to do so.
Visual Studio 2010 does not include support by default for ASP.NET Web Pages. To use ASP.NET Web Pages with Visual Studio 2010, you must install the ASP.NET MVC package. To get ASP.NET Web Pages 2, you install ASP.NET MVC 4. To get ASP.NET Web Pages 1.0, you install ASP.NET MVC 3.
The following table summarizes the support for ASP.NET Web Pages in different versions of Visual Studio.
|Visual Studio 2010||Visual Studio 2012|
|ASP.NET Web Pages 1.0||Install ASP.NET MVC 3||Install ASP.NET MVC 3|
|ASP.NET Web Pages 2||Install ASP.NET MVC 4||(Included)|
Installing Support for ASP.NET Web Pages in Visual Studio 2010
This section shows how to install Visual Web Developer Express 2010 and the ASP.NET Web Pages Tools for Visual Studio.
- If you don't already have the Web Platform Installer, download it from the following URL:
Run the Web Platform Installer.
Click the Products tab.
If you don't already have Visual Studio or Visual Web Developer Express installed, search for Visual Web Developer Express and then click Add.
Search for ASP.NET MVC 4 (for ASP.NET Web Pages 2) or ASP.NET MVC 3 (for ASP.NET Web Pages 1.0), and then click Add. These products include Visual Studio tools for building ASP.NET Razor websites.
- Click Install to complete the installation.
Using the ASP.NET Razor Tools for Visual Studio
To use IntelliSense and the debugger, you need to create an ASP.NET Razor website in Visual Studio.
Start Visual Studio or Visual Web Developer.
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 the ASP.NET Web Site (Razor) template.
- In the drop-down list near Web locations, select
File System, and for the path, enter a local folder.
(This screenshot shows Visual Studio 2012 Beta, but the New Web Site
dialog box in Visual Studio 2010 is similar.)
- Click OK.
Now that you've created a site, you can see how IntelliSense works in Visual Studio.
In the website you just created, open the Default.cshtml page. At the bottom of the window, make sure the Source tab is selected.
- After the closing
</p>tag in the page, type
@ServerInfo.(including the dot). Notice how IntelliSense displays the available methods for the
ServerInfohelper in a drop-down list.
- Select the
GetHtmlmethod from the list and then press Enter. IntelliSense automatically fills in the method. (As with any method in C#, you must add
()characters after the method.)
The completed code for the
GetHtmlmethod looks like the following example:
- Press Ctrl+F5 to run the page. This is what the page looks like when displayed
in a browser:
- Close the browser, and then save the updated Default.cshtml page.
Using the Debugger
- At the top of the Default.cshtml page, after the line that begins
Page.Title, add the following line of code:
var myTime = DateTime.Now.TimeOfDay;
In the gray margin of the editor to the left of the code, click next to this new line in order to add a breakpoint. A breakpoint is a marker that tells the debugger to stop running the program at that point so you can see what's happening.
- Remove the call to the
ServerInfo.GetHtmlmethod, and add a call to the
@myTimevariable in its place. This call displays the current time value that's returned by the new line of code.
The updated page with the two new lines of code and the breakpoint looks like the following:
- Press F5 to run the page in the debugger. The page stops on the breakpoint
that you set. The following image shows what the page looks like in the editor
with the breakpoint (in yellow), the Debug toolbar, and the
Step Into button.
Click the Step Into button (or press F11). This runs the next line of code. Pressing F11 again moves to the next line of executable code, and so on.
Examine the value of the
myTimevariable by holding your mouse pointer over it or by inspecting the values displayed in the Locals and Call Stack windows.
- When you're done examining the variable and stepping through code, press F5 to continue running the page without stopping at each line. When you've finished stepping through all the code, the browser displays the page.
To learn more about the debugger and about how to debug code in Visual Studio, see Walkthrough: Debugging Web Pages in Visual Web Developer.