教程:开始使用ASP.NET Core中的Razor PagesTutorial: Get started with Razor Pages in ASP.NET Core

本文内容

作者:Rick Anderson

本教程是系列教程中的第一个教程,介绍生成 ASP.NET Core Razor Pages Web 应用的基础知识。

有关面向熟悉控制器和视图的开发人员的更高级介绍,请参阅 Razor Pages 简介

在本系列结束时,你将拥有一个管理电影数据库的应用。

查看或下载示例代码如何下载)。

查看或下载示例代码如何下载)。

在本教程中,你将了解:

  • 创建 Razor Pages Web 应用。
  • 运行应用。
  • 检查项目文件。

在本教程结束时,你将有一个工作的 Razor Pages Web 应用。在后续教程中,你可以在其基础上进行构建。

主页或索引页

先决条件Prerequisites

Visual Studio Code 说明使用用于 ASP.NET Core 的 .NET Core CLI 开发功能,如项目创建。可在任何平台(macOS、Linux 或 Windows)上或在任何代码编辑器中遵循这些说明。如果使用 Visual Studio Code 以外的其他内容,则可能需要进行少量更改。

创建 Razor Pages Web 应用Create a Razor Pages web app

  • 从 Visual Studio“文件” 菜单中选择“新建” >“项目” 。

  • 创建新的 ASP.NET Core Web 应用程序,然后选择“下一步” 。新建 ASP.NET Core Web 应用程序

  • 将项目命名为“RazorPagesMovie” 。将项目命名为“RazorPagesMovie”非常重要,这样在复制和粘贴代码时命名空间就会匹配 。新建 ASP.NET Core Web 应用程序

  • 在下拉列表中选择“ASP.NET Core 3.1”,然后依次选择“Web 应用程序”和“创建” 。

新建 ASP.NET Core Web 应用程序

创建以下初学者项目:

“解决方案资源管理器”

  • 打开集成终端

  • 更改为将包含项目的目录 (cd)。

  • 运行以下命令:

  1. dotnet new webapp -o RazorPagesMovie
  2. code -r RazorPagesMovie
  • dotnet new 命令可在 RazorPagesMovie 文件夹中创建新的 Razor Pages 项目 。
  • code 命令在 Visual Studio Code 的当前实例中打开 RazorPagesMovie 文件夹。
    • 状态栏的 OmniSharp 火焰图标变绿后,对话框将询问“'RazorPagesMovie' 缺少生成和调试所需的资产。 是否添加它们?”选择 “是”

将向项目的根目录添加包含 launch.json 和 tasks.json 文件的 .vscode 目录。

  • 选择“文件”>“新建解决方案” 。

macOS 新建解决方案

  • 选择“.NET Core” >“应用” >“Web 应用程序” >“下一步”。

macOS“新建项目”对话框

  • 在“配置新的 Web 应用程序”对话框中,将目标框架设置为“.NET Core 3.1” 。

macOS .NET Core 3.1 选择

  • 将项目命名为“RazorPagesMovie”,然后选择“创建”。

nameproj

运行应用Run the app

  • 按 Ctrl+F5 以在不使用调试程序的情况下运行。

Visual Studio 会显示以下对话框:

此项目配置为使用 SSL。

如果信任 IIS Express SSL 证书,请选择“是”。

将显示以下对话框:

安全警告对话

如果你同意信任开发证书,请选择“是”。

Visual Studio 启动 IIS Express 并运行应用。地址栏显示 localhost:port#,而不是显示 example.com。这是因为 localhost 是本地计算机的标准主机名。Localhost 仅为来自本地计算机的 Web 请求提供服务。Visual Studio 创建 Web 项目时,Web 服务器使用的是随机端口。

  • 通过运行以下命令来信任 HTTPS 开发证书:
  1. dotnet dev-certs https --trust

上述命令在 Linux 上无效。有关信任证书的详细信息,请参阅 Linux 发行版的文档。

以上命令会显示以下对话:

安全警告对话

  • 如果你同意信任开发证书,请选择“是”。

有关详细信息,请参阅信任 ASP.NET Core HTTPS 开发证书

  • Ctrl-F5 以在不使用调试程序的情况下运行。

Visual Studio Code 启动 Kestrel,启动浏览器并导航到 http://localhost:5001。地址栏显示 localhost:port#,而不是显示 example.com。这是因为 localhost 是本地计算机的标准主机名。Localhost 仅为来自本地计算机的 Web 请求提供服务。

Visual Studio for Mac 会显示以下弹出窗口:

找不到 HTTPS 开发证书。

如果你信任开发证书,请选择“是”。

将显示以下对话框:

安全警告对话

输入你的密码,然后选择“确定”

如果你同意信任开发证书,请选择“是”。

有关详细信息,请参阅信任 ASP.NET Core HTTPS 开发证书

  • 在 Visual Studio 中,按“Opt-Cmd-Return”可在不使用调试器的情况下运行 。或者,导航到菜单栏,转到“运行”>“在不调试的情况下启动” 。

Visual Studio 启动 Kestrel,启动浏览器并导航到 http://localhost:5001

检查项目文件Examine the project files

下面是主项目文件夹和文件的概述,将在后续教程中使用。

Pages 文件夹Pages folder

包含 Razor 页面和支持文件。每个 Razor 页面都是一对文件:

  • 一个 .cshtml 文件,其中包含使用 Razor 语法的 C# 代码的 HTML 标记 。
  • 一个 .cshtml.cs 文件,其中包含处理页面事件的 C# 代码 。

支持文件的名称以下划线开头。例如,_Layout.cshtml 文件可配置所有页面通用的 UI 元素 。此文件设置页面顶部的导航菜单和页面底部的版权声明。有关详细信息,请参阅 ASP.NET Core 中的布局

wwwroot 文件夹wwwroot folder

包含静态文件,如 HTML 文件、JavaScript 文件和 CSS 文件。有关详细信息,请参阅 ASP.NET Core 中的静态文件

appSettings.jsonappSettings.json

包含配置数据,如连接字符串。有关详细信息,请参阅 ASP.NET Core 中的配置

Program.csProgram.cs

包含程序的入口点。有关详细信息,请参阅 .NET 通用主机

Startup.csStartup.cs

包含配置应用行为的代码。有关详细信息,请参阅 ASP.NET Core 中的应用启动

后续步骤Next steps

进入系列的下一教程:

添加模型

这是系列中的第一个教程。本系列介绍构建 ASP.NET Core Razor Pages Web 应用的基础知识。

有关面向熟悉控制器和视图的开发人员的更高级介绍,请参阅 Razor Pages 简介

在本系列结束时,你将拥有一个管理电影数据库的应用。

查看或下载示例代码如何下载)。

查看或下载示例代码如何下载)。

在本教程中,你将了解:

  • 创建 Razor Pages Web 应用。
  • 运行应用。
  • 检查项目文件。

在本教程结束时,你将有一个工作的 Razor Pages Web 应用。在后续教程中,你可以在其基础上进行构建。

主页或索引页

先决条件Prerequisites

警告

如果使用 Visual Studio 2017,请参阅 dotnet/sdk 问题 #3124,以了解无法与 Visual Studio 一起使用的 .NET Core SDK 版本的信息。

Visual Studio Code 说明使用用于 ASP.NET Core 的 .NET Core CLI 开发功能,如项目创建。可在任何平台(macOS、Linux 或 Windows)上或在任何代码编辑器中遵循这些说明。如果使用 Visual Studio Code 以外的其他内容,则可能需要进行少量更改。

创建 Razor Pages Web 应用Create a Razor Pages web app

  • 从 Visual Studio“文件” 菜单中选择“新建” >“项目” 。

  • 创建新的 ASP.NET Core Web 应用程序,然后选择“下一步” 。

新建 ASP.NET Core Web 应用程序

  • 将项目命名为“RazorPagesMovie” 。将项目命名为“RazorPagesMovie”非常重要,这样在复制和粘贴代码时命名空间就会匹配 。

新建 ASP.NET Core Web 应用程序

  • 在下拉列表中选择“ASP.NET Core 2.2”,然后依次选择“Web 应用程序”和“创建” 。

新建 ASP.NET Core Web 应用程序

创建以下初学者项目:

“解决方案资源管理器”

  • 打开集成终端

  • 更改为将包含项目的目录 (cd)。

  • 运行以下命令:

  1. dotnet new webapp -o RazorPagesMovie
  2. code -r RazorPagesMovie
  • dotnet new 命令可在 RazorPagesMovie 文件夹中创建新的 Razor Pages 项目 。
  • code 命令在 Visual Studio Code 的当前实例中打开 RazorPagesMovie 文件夹。
    • 状态栏的 OmniSharp 火焰图标变绿后,对话框将询问“'RazorPagesMovie' 缺少生成和调试所需的资产。 是否添加它们?”选择 “是”

将向项目的根目录添加包含 launch.json 和 tasks.json 文件的 .vscode 目录。

  • 选择“文件”>“新建解决方案” 。

macOS 新建解决方案

  • 选择“.NET Core” >“应用” >“Web 应用程序” >“下一步”。

macOS“新建项目”对话框

  • 在“配置新的 ASP.NET Core Web API”对话框中,将目标框架设置为“.NET Core 3.1” 。

macOS .NET Core 3.0 选择

  • 将项目命名为“RazorPagesMovie”,然后选择“创建”。

nameproj

运行应用Run the app

  • 按 Ctrl+F5 以在不使用调试程序的情况下运行。

Visual Studio 会显示以下对话框:

此项目配置为使用 SSL。

如果信任 IIS Express SSL 证书,请选择“是”。

将显示以下对话框:

安全警告对话

如果你同意信任开发证书,请选择“是”。

Visual Studio 启动 IIS Express 并运行应用。地址栏显示 localhost:port#,而不是显示 example.com。这是因为 localhost 是本地计算机的标准主机名。Localhost 仅为来自本地计算机的 Web 请求提供服务。Visual Studio 创建 Web 项目时,Web 服务器使用的是随机端口。

  • 在应用的主页上,选择“接受”以同意跟踪 。

此应用不会跟踪个人信息,但项目模板包括许可功能,以防需要它来符合欧盟的一般数据保护条例 (GDPR)

主页或索引页

下图展示了同意跟踪后的应用:

主页或索引页

  • 通过运行以下命令来信任 HTTPS 开发证书:
  1. dotnet dev-certs https --trust

上述命令在 Linux 上无效。有关信任证书的详细信息,请参阅 Linux 发行版的文档。

以上命令会显示以下对话:

安全警告对话

  • 如果你同意信任开发证书,请选择“是”。

有关详细信息,请参阅信任 ASP.NET Core HTTPS 开发证书

  • Ctrl-F5 以在不使用调试程序的情况下运行。

Visual Studio Code 启动 Kestrel,启动浏览器并导航到 http://localhost:5001。地址栏显示 localhost:port#,而不是显示 example.com。这是因为 localhost 是本地计算机的标准主机名。Localhost 仅为来自本地计算机的 Web 请求提供服务。

  • 在应用的主页上,选择“接受”以同意跟踪 。

此应用不会跟踪个人信息,但项目模板包括许可功能,以防需要它来符合欧盟的一般数据保护条例 (GDPR)

主页或索引页

下图展示了同意跟踪后的应用:

主页或索引页

Visual Studio for Mac 会显示以下弹出窗口:

找不到 HTTPS 开发证书。

如果你信任开发证书,请选择“是”。

将显示以下对话框:

安全警告对话

输入你的密码,然后选择“确定”

如果你同意信任开发证书,请选择“是”。

有关详细信息,请参阅信任 ASP.NET Core HTTPS 开发证书

  • 按 Cmd-Opt-F5 ,以在不使用调试器的情况下运行。

Visual Studio 启动 Kestrel,启动浏览器并导航到 http://localhost:5001

  • 在应用的主页上,选择“接受”以同意跟踪 。

此应用不会跟踪个人信息,但项目模板包括许可功能,以防需要它来符合欧盟的一般数据保护条例 (GDPR)

主页或索引页

下图展示了同意跟踪后的应用:

主页或索引页

检查项目文件Examine the project files

下面是主项目文件夹和文件的概述,将在后续教程中使用。

Pages 文件夹Pages folder

包含 Razor 页面和支持文件。每个 Razor 页面都是一对文件:

  • 一个 .cshtml 文件,其中包含使用 Razor 语法的 C# 代码的 HTML 标记 。
  • 一个 .cshtml.cs 文件,其中包含处理页面事件的 C# 代码 。

支持文件的名称以下划线开头。例如,_Layout.cshtml 文件可配置所有页面通用的 UI 元素 。此文件设置页面顶部的导航菜单和页面底部的版权声明。有关详细信息,请参阅 ASP.NET Core 中的布局

wwwroot 文件夹wwwroot folder

包含静态文件,如 HTML 文件、JavaScript 文件和 CSS 文件。有关详细信息,请参阅 ASP.NET Core 中的静态文件

appSettings.jsonappSettings.json

包含配置数据,如连接字符串。有关详细信息,请参阅 ASP.NET Core 中的配置

Program.csProgram.cs

包含程序的入口点。有关详细信息,请参阅 .NET 通用主机

Startup.csStartup.cs

包含配置应用行为的代码,例如,是否需要同意 cookie。有关详细信息,请参阅 ASP.NET Core 中的应用启动

其他资源Additional resources

后续步骤Next steps

进入系列的下一教程:

添加模型