教程:在 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.

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

  • 创建 Razor 页面 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.

主页或索引页

先决条件Prerequisites

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

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

  • 创建新的 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 应用程序”和“创建” 。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.

    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 contains HTML markup with C# code using Razor syntax.
  • 一个 .cshtml.cs 文件,其中包含处理页面事件的 C# 代码。A .cshtml.cs file that contains 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, such as HTML files, JavaScript files, and CSS files. 有关详细信息,请参阅 ASP.NET Core 中的静态文件For more information, see ASP.NET Core 中的静态文件.

appSettings.jsonappSettings.json

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

Program.csProgram.cs

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

Startup.csStartup.cs

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

后续步骤Next steps

进入系列的下一教程:Advance to the next tutorial in the series:

这是系列中的第一个教程。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.

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

  • 创建 Razor 页面 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.

主页或索引页

先决条件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.

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

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

  • 创建新的 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 应用程序”和“创建” 。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.

    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.

    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).

    主页或索引页

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

    主页或索引页

检查项目文件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 contains HTML markup with C# code using Razor syntax.
  • 一个 .cshtml.cs 文件,其中包含处理页面事件的 C# 代码。A .cshtml.cs file that contains 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, such as HTML files, JavaScript files, and CSS files. 有关详细信息,请参阅 ASP.NET Core 中的静态文件For more information, see ASP.NET Core 中的静态文件.

appSettings.jsonappSettings.json

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

Program.csProgram.cs

包含程序的入口点。Contains the entry point for the program. 有关详细信息,请参阅 .NET 通用主机For more information, see .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

进入系列的下一教程:Advance to the next tutorial in the series: