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

作者:Rick AndersonBy Rick Anderson

本教程是系列教程中的第一个教程,介绍生成 ASP.NET Core Razor 页面 Web 应用的基础知识。This is the first tutorial of a series that teaches the basics of building an ASP.NET Core Razor Pages web app.

有关面向熟悉控制器和视图的开发人员的更高级介绍,请参阅 Razor Pages 简介For a more advanced introduction aimed at developers who are familiar with controllers and views, see Introduction to Razor Pages.

在本系列结束时,你将拥有一个管理电影数据库的应用。At the end of the series, you'll have an app that manages a database of movies.

查看或下载示例代码如何下载)。View or download sample code (how to download).

在本教程中,你将了解:In this tutorial, you:

  • Create Razor Pages Web 应用。Create a Razor Pages web app.
  • 运行应用。Run the app.
  • 检查项目文件。Examine the project files.

在本教程结束时,你将有一个工作的 Razor Pages Web 应用。在后续教程中,你可以在其基础上进行增强。At the end of this tutorial, you'll have a working Razor Pages web app that you'll enhance in later tutorials.

主页或 Index 页

先决条件Prerequisites

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

  1. 启动 Visual Studio 并选择“Create新项目”。Start Visual Studio and select Create a new project. 有关详细信息,请参阅在 Visual Studio 中Create新项目For more information, see Create a new project in Visual Studio.

    从“启动”窗口 Create 新项目

  2. 在“Create新项目”对话框中,选择“ASP.NET Core Web 应用程序”,然后选择“下一步”。In the Create a new project dialog, select ASP.NET Core Web Application, and then select Next.

    新建 ASP.NET Core Web 应用程序

  3. 在“配置新项目”对话框中,为“项目名称”输入 RazorPagesMovieIn the Configure your new project dialog, enter RazorPagesMovie for Project name. 请务必将项目命名为“RazorPagesMovie”(包括匹配大小写),这样在复制和粘贴代码时命名空间就会匹配。It's important to name the project RazorPagesMovie, including matching the capitalization, so the namespaces will match when you copy and paste example code.

  4. 选择 Create。Select Create.

    新建 ASP.NET Core Web 应用程序

  5. 在“Create新的 ASP.NET Core Web 应用程序”对话框中,选择:In the Create a new ASP.NET Core web application dialog, select:

    1. 下拉列表中的“.NET Core”和“ASP.NET Core 5.0”。.NET Core and ASP.NET Core 5.0 in the dropdowns.
    2. Web 应用程序Web Application.
    3. Create.Create.

    新建 ASP.NET Core Web 应用程序

    创建以下初学者项目:The following starter project is created:

    “解决方案资源管理器”

运行应用Run the app

  • 按 Ctrl+F5 以在不使用调试程序的情况下运行。Press Ctrl+F5 to run without the debugger.

    Visual Studio 会显示以下对话框:Visual Studio displays the following dialog:

    此项目配置为使用 SSL。

    如果信任 IIS Express SSL 证书,请选择“是” 。Select Yes if you trust the IIS Express SSL certificate.

    将显示以下对话框:The following dialog is displayed:

    安全警告对话

    如果你同意信任开发证书,请选择“是”。 Select Yes if you agree to trust the development certificate.

    有关信任 Firefox 浏览器的信息,请参阅 Firefox SEC_ERROR_INADEQUATE_KEY_USAGE 证书错误For information on trusting the Firefox browser, see Firefox SEC_ERROR_INADEQUATE_KEY_USAGE certificate error.

    Visual Studio 启动 IIS Express 并运行应用。Visual Studio starts IIS Express and runs the app. 地址栏显示 localhost:port#,而不是显示 example.comThe address bar shows localhost:port# and not something like example.com. 这是因为 localhost 是本地计算机的标准主机名。That's because localhost is the standard hostname for the local computer. Localhost 仅为来自本地计算机的 Web 请求提供服务。Localhost only serves web requests from the local computer. Visual Studio 创建 Web 项目时,为 Web 服务器使用随机端口。When Visual Studio creates a web project, a random port is used for the web server.

检查项目文件Examine the project files

下面是主项目文件夹和文件的概述,将在后续教程中使用。Here's an overview of the main project folders and files that you'll work with in later tutorials.

Pages 文件夹Pages folder

包含 Razor 页面和支持文件。Contains Razor pages and supporting files. 每个 Razor 页面都是一对文件:Each Razor page is a pair of files:

  • 一个 .cshtml 文件,其中包含使用 Razor 语法的 C# 代码的 HTML 标记。A .cshtml file that has HTML markup with C# code using Razor syntax.
  • 一个 .cshtml.cs 文件,其中包含处理页面事件的 C# 代码。A .cshtml.cs file that has C# code that handles page events.

支持文件的名称以下划线开头。Supporting files have names that begin with an underscore. 例如,_Layout.cshtml 文件可配置所有页面通用的 UI 元素。For example, the _Layout.cshtml file configures UI elements common to all pages. 此文件设置页面顶部的导航菜单和页面底部的版权声明。This file sets up the navigation menu at the top of the page and the copyright notice at the bottom of the page. 有关详细信息,请参阅 ASP.NET Core 中的布局For more information, see ASP.NET Core 中的布局.

wwwroot 文件夹wwwroot folder

包含静态资产,如 HTML 文件、JavaScript 文件和 CSS 文件。Contains static assets, like HTML files, JavaScript files, and CSS files. 有关详细信息,请参阅 ASP.NET Core 中的静态文件For more information, see ASP.NET Core 中的静态文件.

appsettings.json

包含配置数据,如连接字符串。Contains configuration data, like connection strings. 有关详细信息,请参阅 ASP.NET Core 中的配置For more information, see ASP.NET Core 中的配置.

Program.csProgram.cs

包含应用的入口点。Contains the entry point for the app. 有关详细信息,请参阅 ASP.NET Core 中的 .NET 通用主机For more information, see ASP.NET Core 中的 .NET 通用主机.

Startup.csStartup.cs

包含配置应用行为的代码。Contains code that configures app behavior. 有关详细信息,请参阅 ASP.NET Core 中的应用启动For more information, see ASP.NET Core 中的应用启动.

后续步骤Next steps

本教程是系列教程中的第一个教程,介绍生成 ASP.NET Core Razor 页面 Web 应用的基础知识。This is the first tutorial of a series that teaches the basics of building an ASP.NET Core Razor Pages web app.

有关面向熟悉控制器和视图的开发人员的更高级介绍,请参阅 Razor Pages 简介For a more advanced introduction aimed at developers who are familiar with controllers and views, see Introduction to Razor Pages.

在本系列结束时,你将拥有一个管理电影数据库的应用。At the end of the series, you'll have an app that manages a database of movies.

查看或下载示例代码如何下载)。View or download sample code (how to download).

在本教程中,你将了解:In this tutorial, you:

  • Create Razor Pages Web 应用。Create a Razor Pages web app.
  • 运行应用。Run the app.
  • 检查项目文件。Examine the project files.

在本教程结束时,你将有一个工作的 Razor 页面 Web 应用。在后续教程中,你可以在其基础上进行构建。At the end of this tutorial, you'll have a working Razor Pages web app that you'll build on in later tutorials.

主页或 Index 页

先决条件Prerequisites

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

  • 从 Visual Studio“文件”菜单中选择“新建”>“项目”。From the Visual Studio File menu, select New > Project.

  • Create新的 ASP.NET Core Web 应用程序,然后选择“下一步”。Create a new ASP.NET Core Web Application and select Next. 新建 ASP.NET Core Web 应用程序new ASP.NET Core Web Application

  • 将项目命名为“RazorPagesMovie”。Name the project RazorPagesMovie. 请务必将项目命名为“RazorPagesMovie”,这样在复制和粘贴代码时命名空间就会匹配。It's important to name the project RazorPagesMovie so the namespaces will match when you copy and paste code. 新建 ASP.NET Core Web 应用程序new ASP.NET Core Web Application

  • 在下拉列表中选择“ASP.NET Core 3.1”,然后依次选择“Web 应用程序”和“Create”。Select ASP.NET Core 3.1 in the dropdown, Web Application, and then select Create.

新建 ASP.NET Core Web 应用程序

创建以下初学者项目:The following starter project is created:

“解决方案资源管理器”

运行应用Run the app

  • 按 Ctrl+F5 以在不使用调试程序的情况下运行。Press Ctrl+F5 to run without the debugger.

    Visual Studio 会显示以下对话框:Visual Studio displays the following dialog:

    此项目配置为使用 SSL。

    如果信任 IIS Express SSL 证书,请选择“是” 。Select Yes if you trust the IIS Express SSL certificate.

    将显示以下对话框:The following dialog is displayed:

    安全警告对话

    如果你同意信任开发证书,请选择“是”。 Select Yes if you agree to trust the development certificate.

    有关信任 Firefox 浏览器的信息,请参阅 Firefox SEC_ERROR_INADEQUATE_KEY_USAGE 证书错误For information on trusting the Firefox browser, see Firefox SEC_ERROR_INADEQUATE_KEY_USAGE certificate error.

    Visual Studio 启动 IIS Express 并运行应用。Visual Studio starts IIS Express and runs the app. 地址栏显示 localhost:port#,而不是显示 example.comThe address bar shows localhost:port# and not something like example.com. 这是因为 localhost 是本地计算机的标准主机名。That's because localhost is the standard hostname for the local computer. Localhost 仅为来自本地计算机的 Web 请求提供服务。Localhost only serves web requests from the local computer. Visual Studio 创建 Web 项目时,为 Web 服务器使用随机端口。When Visual Studio creates a web project, a random port is used for the web server.

检查项目文件Examine the project files

下面是主项目文件夹和文件的概述,将在后续教程中使用。Here's an overview of the main project folders and files that you'll work with in later tutorials.

Pages 文件夹Pages folder

包含 Razor 页面和支持文件。Contains Razor pages and supporting files. 每个 Razor 页面都是一对文件:Each Razor page is a pair of files:

  • 一个 .cshtml 文件,其中包含使用 Razor 语法的 C# 代码的 HTML 标记。A .cshtml file that has HTML markup with C# code using Razor syntax.
  • 一个 .cshtml.cs 文件,其中包含处理页面事件的 C# 代码。A .cshtml.cs file that has C# code that handles page events.

支持文件的名称以下划线开头。Supporting files have names that begin with an underscore. 例如,_Layout.cshtml 文件可配置所有页面通用的 UI 元素。For example, the _Layout.cshtml file configures UI elements common to all pages. 此文件设置页面顶部的导航菜单和页面底部的版权声明。This file sets up the navigation menu at the top of the page and the copyright notice at the bottom of the page. 有关详细信息,请参阅 ASP.NET Core 中的布局For more information, see ASP.NET Core 中的布局.

wwwroot 文件夹wwwroot folder

包含静态文件,如 HTML 文件、JavaScript 文件和 CSS 文件。Contains static files, like HTML files, JavaScript files, and CSS files. 有关详细信息,请参阅 ASP.NET Core 中的静态文件For more information, see ASP.NET Core 中的静态文件.

appSettings.jsonappSettings.json

包含配置数据,如连接字符串。Contains configuration data, like connection strings. 有关详细信息,请参阅 ASP.NET Core 中的配置For more information, see ASP.NET Core 中的配置.

Program.csProgram.cs

包含程序的入口点。Contains the entry point for the program. 有关详细信息,请参阅 ASP.NET Core 中的 .NET 通用主机For more information, see ASP.NET Core 中的 .NET 通用主机.

Startup.csStartup.cs

包含配置应用行为的代码。Contains code that configures app behavior. 有关详细信息,请参阅 ASP.NET Core 中的应用启动For more information, see ASP.NET Core 中的应用启动.

后续步骤Next steps

这是系列中的第一个教程。This is the first tutorial of a series. 本系列介绍构建 ASP.NET Core Razor 页面 Web 应用的基础知识。The series teaches the basics of building an ASP.NET Core Razor Pages web app.

有关面向熟悉控制器和视图的开发人员的更高级介绍,请参阅 Razor Pages 简介For a more advanced introduction aimed at developers who are familiar with controllers and views, see Introduction to Razor Pages.

在本系列结束时,你将拥有一个管理电影数据库的应用。At the end of the series, you'll have an app that manages a database of movies.

查看或下载示例代码如何下载)。View or download sample code (how to download).

在本教程中,你将了解:In this tutorial, you:

  • Create Razor Pages Web 应用。Create a Razor Pages web app.
  • 运行应用。Run the app.
  • 检查项目文件。Examine the project files.

在本教程结束时,你将有一个工作的 Razor 页面 Web 应用。在后续教程中,你可以在其基础上进行构建。At the end of this tutorial, you'll have a working Razor Pages web app that you'll build on in later tutorials.

主页或 Index 页

先决条件Prerequisites

警告

如果使用 Visual Studio 2017,请参阅 dotnet/sdk 问题 #3124,以了解无法与 Visual Studio 一起使用的 .NET Core SDK 版本的信息。If you use Visual Studio 2017, see dotnet/sdk issue #3124 for information about .NET Core SDK versions that don't work with Visual Studio.

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

  • 从 Visual Studio“文件”菜单中选择“新建”>“项目”。From the Visual Studio File menu, select New > Project.

  • Create新的 ASP.NET Core Web 应用程序,然后选择“下一步”。Create a new ASP.NET Core Web Application and select Next.

    新建 ASP.NET Core Web 应用程序

  • 将项目命名为“RazorPagesMovie”。Name the project RazorPagesMovie. 请务必将项目命名为“RazorPagesMovie”,这样在复制和粘贴代码时命名空间就会匹配。It's important to name the project RazorPagesMovie so the namespaces will match when you copy and paste code.

    新建 ASP.NET Core Web 应用程序

  • 在下拉列表中选择“ASP.NET Core 2.2”,然后依次选择“Web 应用程序”和“Create”。Select ASP.NET Core 2.2 in the dropdown, Web Application, and then select Create.

新建 ASP.NET Core Web 应用程序

创建以下初学者项目:The following starter project is created:

“解决方案资源管理器”

运行应用Run the app

  • 按 Ctrl+F5 以在不使用调试程序的情况下运行。Press Ctrl+F5 to run without the debugger.

    使用“Ctrl+F5”启动应用(非调试模式)后,可执行代码更改、保存文件、刷新浏览器和查看代码更改等操作。Launching the app with Ctrl+F5 (non-debug mode) allows you to make code changes, save the file, refresh the browser, and see the code changes. 许多开发人员更喜欢使用非调试模式快速启动应用并查看更改。Many developers prefer to use non-debug mode to quickly launch the app and view changes.

    Visual Studio 会显示以下对话框:Visual Studio displays the following dialog:

    此项目配置为使用 SSL。

    如果信任 IIS Express SSL 证书,请选择“是” 。Select Yes if you trust the IIS Express SSL certificate.

    将显示以下对话框:The following dialog is displayed:

    安全警告对话

    如果你同意信任开发证书,请选择“是”。 Select Yes if you agree to trust the development certificate.

    有关信任 Firefox 浏览器的信息,请参阅 Firefox SEC_ERROR_INADEQUATE_KEY_USAGE 证书错误For information on trusting the Firefox browser, see Firefox SEC_ERROR_INADEQUATE_KEY_USAGE certificate error.

    Visual Studio 启动 IIS Express 并运行应用。Visual Studio starts IIS Express and runs the app. 地址栏显示 localhost:port#,而不是显示 example.comThe address bar shows localhost:port# and not something like example.com. 这是因为 localhost 是本地计算机的标准主机名。That's because localhost is the standard hostname for the local computer. Localhost 仅为来自本地计算机的 Web 请求提供服务。Localhost only serves web requests from the local computer. Visual Studio 创建 Web 项目时,Web 服务器使用的是随机端口。When Visual Studio creates a web project, a random port is used for the web server.

  • 在应用的主页上,选择“接受”以同意跟踪。On the app's home page, select Accept to consent to tracking.

    此应用不会跟踪个人信息,但项目模板包括许可功能,以防需要它来符合欧盟的一般数据保护条例 (GDPR)This app doesn't track personal information, but the project template includes the consent feature in case you need it to comply with the European Union's General Data Protection Regulation (GDPR).

    主页或 Index 页

    下图展示了提供同意跟踪后的应用:The following image shows the app after consent to tracking is provided:

    主页或 Index 页

检查项目文件Examine the project files

下面是主项目文件夹和文件的概述,将在后续教程中使用。Here's an overview of the main project folders and files that you'll work with in later tutorials.

Pages 文件夹Pages folder

包含 Razor 页面和支持文件。Contains Razor pages and supporting files. 每个 Razor 页面都是一对文件:Each Razor page is a pair of files:

  • 一个 .cshtml 文件,其中包含使用 Razor 语法的 C# 代码的 HTML 标记。A .cshtml file that has HTML markup with C# code using Razor syntax.
  • 一个 .cshtml.cs 文件,其中包含处理页面事件的 C# 代码。A .cshtml.cs file that has C# code that handles page events.

支持文件的名称以下划线开头。Supporting files have names that begin with an underscore. 例如,_Layout.cshtml 文件可配置所有页面通用的 UI 元素。For example, the _Layout.cshtml file configures UI elements common to all pages. 此文件设置页面顶部的导航菜单和页面底部的版权声明。This file sets up the navigation menu at the top of the page and the copyright notice at the bottom of the page. 有关详细信息,请参阅 ASP.NET Core 中的布局For more information, see ASP.NET Core 中的布局.

Razor 页面派生自 PageModelRazor Pages are derived from PageModel. 按照约定,PageModel 派生的类称为 <PageName>ModelBy convention, the PageModel-derived class is named <PageName>Model.

wwwroot 文件夹wwwroot folder

包含静态文件,如 HTML 文件、JavaScript 文件和 CSS 文件。Contains static files, like HTML files, JavaScript files, and CSS files. 有关详细信息,请参阅 ASP.NET Core 中的静态文件For more information, see ASP.NET Core 中的静态文件.

appSettings.jsonappSettings.json

包含配置数据,如连接字符串。Contains configuration data, like connection strings. 有关详细信息,请参阅 ASP.NET Core 中的配置For more information, see ASP.NET Core 中的配置.

Program.csProgram.cs

包含程序的入口点。Contains the entry point for the program. 有关详细信息,请参阅 ASP.NET Core 中的 .NET 通用主机For more information, see ASP.NET Core 中的 .NET 通用主机.

Startup.csStartup.cs

包含配置应用行为的代码,例如是否需要同意 cookie。Contains code that configures app behavior, such as whether it requires consent for cookies. 有关详细信息,请参阅 ASP.NET Core 中的应用启动For more information, see ASP.NET Core 中的应用启动.

其他资源Additional resources

后续步骤Next steps