使用 ASP.NET Core 创建 Web UI

使用 ASP.NET Core 创建 Web UI

简介

示例方案

假设你是一家名为 Contoso Pizza 的披萨公司的雇员。 经理要求你为公司内部管理网站开发一个必备组件 - 披萨库存管理页面。 生成的应用应使视图和数据模型关注点分离。

你将做些什么？

在本模块中，你将：

• 了解在 ASP.NET Core 应用中使用 Razor Pages 的时机和原因。
• 查看使用 Razor Pages 的现有 ASP.NET Core 应用。
• 创建一个支持应用的产品数据管理要求的新 Razor 页面。
• 使用标记帮助程序减少 HTML 和 C# 之间的上下文切换。
• 使用 Razor 页面处理程序处理 HTTP 请求。

本模块末尾提供了一些链接，可以通过其中的内容更深入地了解我们介绍的各个功能区域。

必需工具

本模块使用 .NET CLI 和 Visual Studio Code（Windows、Linux 和 macOS）来演示 ASP.NET Core Razor Pages 开发。 完成本模块后，可以使用 Visual Studio (Windows)、Visual Studio for Mac (macOS) 或 Visual Studio Code 等开发环境来应用其概念。

提示

可以根据 IDE 使用 GitHub Codespaces 跳过安装以下工具。 在另一个浏览器选项卡中，导航到包含此模块的初学者应用的 GitHub 存储库，选择“代码”按钮，并在 main 分支上创建新的 codespace。 有关详细信息，请参阅创建 Codespace。

了解使用 Razor Pages 的时机和原因

• 5 分钟

本单元介绍在 ASP.NET Core 应用中使用 Razor Pages 的时机和原因。

Razor Pages 的优势

Razor Pages 是一种以页面为中心的服务器端编程模型，用于使用 ASP.NET Core 构建 Web UI。 优点包括：

• 使用 HTML、CSS 和 C# 轻松设置动态 Web 应用。
• 按功能整理文件，以便于维护。
• 使用 Razor 语法将标记与服务器端 C# 代码相结合。

Razor Pages 使用 Razor 将基于服务器的代码嵌入到网页中。 Razor 语法结合了 HTML 和 C# 来定义动态呈现逻辑。 这意味着可以在 HTML 标记中使用 C# 变量和方法，以在运行时在服务器上生成动态 Web 内容。 请务必了解 Razor Pages 不能替代 HTML、CSS 或 JavaScript。 它们是结合这些技术创建动态 Web 内容的一种方式。

分离关注点

Razor Pages 强制使用 C# PageModel 类分离关注点，封装范围限定为其 Razor 页面的数据属性和逻辑运算，并为 HTTP 请求定义页面处理程序。 PageModel 类是由 ASP.NET Core 项目模板自动生成的分部类。 PageModel 类位于 Pages 文件夹中，以 Razor 页命名。 例如，Index.cshtml Razor 页的 PageModel 类名为 IndexModel.cs。

使用 Razor Pages 的时机

在 ASP.NET Core 应用中使用 Razor Pages 的时机：

• 想要生成动态 Web UI。
• 首选以页面为中心的方法。
• 希望减少部分视图的重复。

Razor Pages 通过将相关页面及其逻辑保存在其自己的命名空间和目录中来简化 ASP.NET Core 页面组织。

备注

ASP.NET Core 还支持使用模型视图控制器 (MVC) 模式来生成 web 应用。 如果希望在模型、视图和控制器之间实现清晰的分隔，可以使用 MVC。 Razor Pages 和 MVC 可以共存在同一应用中。 MVC 超出了本模块的范畴。

Razor Pages 在工作效率方面的优势是，它可将应用中的视图的更改集中在一起。

练习 - 自定义项目

让我们花一些时间来熟悉 ContosoPizza 文件夹中的现有代码。 该项目是使用 dotnet new webapp 命令创建的 ASP.NET Core Web 应用。 下面描述了你的团队成员所做的更改。

• 已将 Models 文件夹添加到项目中。
  • 该模型文件夹包含表示披萨的 Pizza 类。
• 已将 Data 文件夹添加到项目中。
  • 该数据文件夹包含表示数据库上下文的 PizzaContext 类。 它继承自 Entity Framework Core 中的 DbContext 类。 Entity Framework Core 是一种对象关系映射器 (ORMObject Relational Mapping：是一种程序技术，用于实现面向对象编程语言里不同类型系统的数据之间的转换。从效果上说，它其实是创建了一个可在编程语言里使用的–“虚拟对象数据库”。)，可便于更轻松地使用数据库。
• 已将 Services 文件夹添加到项目中。
  • 该服务文件夹包含一个 PizzaService 类，该类公开用于列出和添加披萨的方法。
  • PizzaService 类使用 PizzaContext 类在数据库中读取和写入披萨。
  • 该类在 Program.cs 中针对依赖项注入进行了注册（第 10 行）。

Entity Framework Core 也生成了一些内容：

• 已生成 Migrations 文件夹。
  • 该迁移文件夹包含用于创建数据库架构的代码。
• 已生成 SQLite 数据库文件 ContosoPizza.db。
  • 如果安装了 SQLite 扩展（或者使用的是 GitHub Codespaces），则可以通过右键单击该文件并选择“打开数据库”来查看数据库。 数据库架构显示在“资源管理器”窗格的“SQLite 资源管理器”选项卡中。

查看 Razor Pages 项目结构

项目中的所有其他内容与创建项目时的内容保持一致。 下表描述了由 dotnet new webapp 命令生成的项目结构。

名称	说明
Pages/	包含 Razor Pages 和支持文件。 每个 Razor 页面都有一个 .cshtml 文件和一个 .cshtml.csPageModel 类文件。
wwwroot/	包含静态资产文件，例如 HTML、JavaScript 和 CSS。
ContosoPizza.csproj	包含项目配置元数据，例如依赖项。
Program.cs	充当应用的入口点并配置应用行为，例如路由。

其他值得注意的观察内容：

• Razor 页面文件及其配对的 PageModel 类文件

  Razor 页面存储在 Pages 目录中。 如上所述，每个 Razor 页面都有一个 .cshtml 文件和一个 .cshtml.csPageModel 类文件。 PageModel 类允许分离 Razor 页面的逻辑和表示形式，定义针对请求的页面处理程序，并封装范围限定为其 Razor 页面的数据属性和逻辑。

• Pages 目录结构和路由请求

  Razor Pages 使用 Pages 目录结构作为路由请求的约定。 下表显示了 URL 如何映射到文件名：

  URL	映射到 Razor 页面
  www.domain.com	Pages/Index.cshtml
  www.domain.com/Index	Pages/Index.cshtml
  www.domain.com/Privacy	Pages/Privacy.cshtml
  www.domain.com/Error	Pages/Error.cshtml

  Pages 目录中的子文件夹用于组织 Razor 页面。 例如，如果有 Pages/Products 目录，则 URL 将反映该结构：

  URL	映射到 Razor 页面
  www.domain.com/Products	Pages/Products/Index.cshtml
  www.domain.com/Products/Index	Pages/Products/Index.cshtml
  www.domain.com/Products/Create	Pages/Products/Create.cshtml

• 布局和其他共享文件

  有多个文件可跨多个页面共享。 这些文件确定常见的布局元素和页面导入。 下表描述了每个文件的用途。

  文件	说明
  _ViewImports.cshtml	导入跨多个页面使用的命名空间和类。
  _ViewStart.cshtml	指定所有 Razor 页面的默认布局。
  Pages/Shared/_Layout.cshtml	这是 _ViewStart.cshtml 文件指定的布局。 在多个页面中实现公共布局元素。
  Pages/Shared/_ValidationScriptsPartial.cshtml	为所有页面提供验证功能。

首次运行项目

让我们运行该项目，这样我们可以看到它的运行情况。

1. 右键单击“资源管理器”中的 ContosoPizza 文件夹，然后选择“在集成终端中打开”。 随即会在项目文件夹的上下文中打开一个终端窗口。
2. 在终端窗口中，输入以下命令：

dotnet watch

此命令：

• 生成项目。
• 启动应用。
• 监视文件更改，并在检测到更改时重启应用。

3. IDE 会提示你在浏览器中打开应用。 选择“在浏览器中打开”。

4. 将呈现的主页与 IDE 中的 Pages/Index.cshtml 进行比较：

   • 观察文件中 HTML、Razor 语法和 C# 代码的组合。

     • Razor 语法由 @ 字符表示。
     • C# 代码包含在 @{ } 块中。 记下文件顶部的指令：
     • @page 指令用于指定此文件是 Razor 页面。
     • @model 指令用于指定页面的模型类型（在此示例中为 IndexModel，这是在 Pages/Index.cshtml.cs 中定义的）。

   • 查看 C# 代码块。

     • 此代码将 ViewData 字典中 Title 项的值设置为“主页”。
     • ViewData 字典用于在 Razor 页面和 IndexModel 类之间传递数据。
     • 在运行时，Title 值用于设置页面的