使用 Visual Studio ASP.NET 网页 (Razor) 编程

  • 项目

作者 Tom FitzMacken

本文介绍如何使用 Visual Studio 或 Visual Web Developer Express ASP.NET 网页 (Razor) 网站进行编程。

学习内容

  • (在 Visual Studio 版本中使用 ASP.NET 网页时需要安装的内容（如果有任何) ）。
  • 如何向 Visual Web Developer 2010 Express 添加对 ASP.NET 网页的支持。
  • 如何使用 Visual Studio 中的功能来处理 ASP.NET Razor 页面，包括 IntelliSense 和调试器。

本教程中使用的软件版本

  • ASP.NET 网页 (Razor) 3
  • Visual Studio 2013
  • WebMatrix 3

本教程还适用于 ASP.NET 网页 2、Visual Studio 2012、Visual Studio 2010 和 WebMatrix 2。

可以使用 WebMatrix 或许多其他代码编辑器使用 Razor 语法 ASP.NET 网页进行编程。 还可以使用 Microsoft Visual Studio，它是一个功能齐全的集成开发环境， (IDE) ，它提供了一组功能强大的工具，用于创建许多类型的应用程序 (，而不仅仅是网站) 。 若要使用 ASP.NET Razor 页面，可以使用 Visual Studio 2017。

Visual Studio 为使用 ASP.NET Razor 网页编程提供的两个特别有用的功能是：

  • IntelliSense。 Visual Studio 中内置的 IntelliSense 功能比 WebMatrix 中的 IntelliSense 更全面。
  • 调试器。 通过调试器，可以在程序运行时停止代码、检查变量并逐行执行代码，从而对代码进行故障排除。

将 Visual Studio 与不同版本的 ASP.NET 网页 配合使用

若要在 Visual Studio 2017 中开发 ASP.NET Web 应用，请安装 ASP.NET 和 Web 开发 工作负载。

Visual Studio 2012 和 Visual Studio 2013 包括对 ASP.NET 网页的支持。 (安装 Visual Studio.) 时，会安装支持 ASP.NET 网页所需的包

默认情况下，Visual Studio 2010 不包括对 ASP.NET 网页的支持。 若要将 ASP.NET 网页 与 Visual Studio 2010 配合使用，必须安装 ASP.NET MVC 包。 若要获取 ASP.NET 网页 2，请安装 ASP.NET MVC 4。

下表汇总了不同版本的 Visual Studio 中对 ASP.NET 网页的支持。

Visual Studio 2010 Visual Studio 2012 Visual Studio 2013
ASP.NET 网页 2 安装 ASP.NET MVC 4 包含 () 包含 ()
ASP.NET 网页 3 通过 NuGet 更新到 ASP.NET 网页 3 包含 ()

若要使用 Visual Studio 2010，请参阅在 Visual Studio 2010 中安装对 ASP.NET 网页的支持。

从 WebMatrix 启动 Visual Studio

如果已在 WebMatrix 中启动项目，并且想要切换到 Visual Studio，WebMatrix 提供了一个按钮，用于在 Visual Studio 中轻松打开项目。 计算机上必须安装 Visual Studio 才能启用此按钮。 下图显示了 WebMatrix 中的按钮。

启动 Visual Studio

单击该按钮时，项目在 Visual Studio 中打开。 可以在 WebMatrix 和 Visual Studio 之间来回切换，不会出现任何问题。 如果其他环境中有任何文件已更改，并且需要重新加载以获取最新更改，你将收到通知。

在 Visual Studio 中创建 ASP.NET Razor 网站

若要在 Visual Studio 中创建 ASP.NET Razor 网站，请执行以下操作：

  1. 打开 Visual Studio。

  2. 在“ 文件 ”菜单中，单击“ 新建网站”。

    创建新网站

  3. 在“ 新建网站 ”对话框中，选择要 (Visual C# 或 Visual Basic) 使用的语言。

  4. 选择 ASP.NET 网站 (Razor) 模板。

    razor 站点

  5. 单击" 确定"。

新项目存在，并填充了一些默认网页，以帮助你入门。

Using IntelliSense

创建网站后，即可了解 IntelliSense 在 Visual Studio 中的工作原理。

  1. 在刚刚创建的网站中，打开 Default.cshtml 页面。

  2. 在页面中的 <h3> 标记后面，键入 @ServerInfo. (包括点) 。 请注意 IntelliSense 如何在下拉列表中显示帮助程序可用的方法 ServerInfo 。

    intellisense

  3. GetHtml从列表中选择 方法，然后按 Enter。 IntelliSense 会自动填充 方法。 (与 C# 中的任何方法一样，必须在 方法后面添加 () 字符。) 方法的已完成代码 GetHtml 如以下示例所示：

    @ServerInfo.GetHtml()

  4. 按 Ctrl+F5 运行页面。 页面在浏览器中显示时如下所示：

    浏览器中的默认页面

  5. 关闭浏览器。

使用调试器

  1. 在 Default.cshtml 页面顶部的以 开头 Page.Title的行后面添加以下代码行：

    var myTime = DateTime.Now.TimeOfDay;

  2. 在代码左侧编辑器的灰色边距中，单击此新行旁边的以添加 断点。 断点是一个标记，它告知调试器在此时停止运行程序，以便可以查看所发生的情况。

    设置断点

  3. 删除对 方法的 ServerInfo.GetHtml 调用，并在变量的位置添加对 变量 @myTime 的调用。 此调用显示新代码行返回的当前时间值。

  4. 按 F5 在调试器中运行页面。 页面将停止在设置的断点上。 下图显示了页面在编辑器中的外观，断点 (黄色) 。

    调试断点

  5. 在“调试”工具栏中，单击“ 单步执行 ”按钮 (或按 F11) 运行下一行代码。 每次单击此按钮时，都会将执行推进到下一行代码。

    “单步执行”按钮

  6. 通过将鼠标指针悬停在 myTime 变量上方或通过检查“ 局部变量 ”和 “调用堆栈 ”窗口中显示的值来检查变量的值。 Visual Studio 显示变量的值。

    显示时间值

  7. 检查完变量并单步执行代码后，按 F5 继续运行页面，而不会在每一行停止。 完成单步执行所有代码后，浏览器将显示页面。

若要详细了解调试器以及如何在 Visual Studio 中调试代码，请参阅 演练：在 Visual Web Developer 中调试网页。

通过 Visual Studio 在 ASP.NET MVC 项目中使用 Razor

Razor 语法在 ASP.NET MVC 项目中也广泛使用。 MVC 是一种基于模式的强大方式，用于构建动态网站。 如果 ASP.NET 网页站点难以维护，可以考虑将其转换为 ASP.NET MVC 应用程序。 有关创建 MVC 应用程序的示例，请参阅使用 ASP.NET MVC 5 入门。

在 Visual Studio 2010 中安装对 ASP.NET 网页的支持

本部分介绍如何安装 Visual Web Developer Express 2010 和 ASP.NET 网页 Tools for Visual Studio。

  1. 如果还没有 Web 平台安装程序，请从以下 URL 下载它：

    https://www.microsoft.com/web/downloads/platform.aspx

  2. 运行 Web 平台安装程序。

  3. 单击“ 产品 ”选项卡。

    “WebPI 产品”选项卡

  4. 搜索 ASP.NET 网页 2) ASP.NET MVC 4 (，然后单击“添加”。 这些产品包括用于生成 ASP.NET Razor 网站的 Visual Studio 工具。

    WebPi 安装选项

  5. 单击“安装”以完成安装。