练习 - 自定义项目

  • 12 分钟

你的团队已分配关于披萨库存管理应用的工作。 你的团队成员已经为你创建了 ASP.NET Core Web 应用，并且他们已经构建了将披萨数据读取和写入到数据库的服务。 向你分配的工作是处理“披萨列表”页面，该页面将显示披萨列表，并且你可以在该页面中向数据库添加新披萨。 我们将从浏览项目开始，以了解其组织方式。

注意

本模块使用 .NET CLI（命令行接口）和 Visual Studio Code 进行本地开发。 完成本模块后，你可以使用 Visual Studio (Windows) 应用概念，或使用 Visual Studio Code（Windows、Linux 和 macOS）进行持续开发。

获取项目文件

如果要使用 GitHub Codespaces，只需在浏览器中打开存储库，选择“代码”，然后在 main 分支上创建新的 codespace。

如果不使用 GitHub Codespaces，请获取项目文件并按照以下步骤在 Visual Studio Code 中打开它们：

  1. 打开命令 shell 并使用命令行从 GitHub 克隆项目：

    git clone https://github.com/MicrosoftDocs/mslearn-create-razor-pages-aspnet-core

  2. 导航到 mslearn-create-razor-pages-aspnet-core 目录，并在 Visual Studio Code 中打开项目：

    cd mslearn-create-razor-pages-aspnet-core
code .

提示

如果已安装兼容的容器运行时，可以使用开发容器扩展，借助预安装的工具在容器中打开存储库。

了解团队成员的工作

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

提示

不要花太多时间查看这些更改。 你的团队成员已创建数据库和用于在数据库中读取和写入披萨的服务，但他们未进行任何 UI 更改。 你将在下一个单元中生成一个可使用其服务的 UI。

  • 已将 Models 文件夹添加到项目中。
    • 该模型文件夹包含表示披萨的 Pizza 类。
  • 已将 Data 文件夹添加到项目中。
    • 该数据文件夹包含表示数据库上下文的 PizzaContext 类。 它继承自 Entity Framework Core 中的 DbContext 类。 Entity Framework Core 是一种对象关系映射器 (ORM)，可便于更轻松地使用数据库。
  • 已将 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 的默认布局。
    Pages/Shared/_Layout.cshtml 这是 _ViewStart.cshtml 文件指定的布局。 在多个页面中实现公共布局元素。
    Pages/Shared/_ValidationScriptsPartial.cshtml 为所有页面提供验证功能。

首次运行项目

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

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

  2. 在终端窗口中，输入以下命令：

    dotnet watch

    此命令：

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

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

    提示

    还可以通过在终端窗口中查找 URL 来打开应用。 按住 Ctrl 并单击 URL 以在浏览器中将其打开。

  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 值用于设置页面的 <title> 元素。

使应用在终端窗口中保持运行。 我们将在即将介绍的单元中使用它。 还需保留包含运行中的 Contoso Pizza 应用的浏览器选项卡。 你将对应用进行更改，然后浏览器将自动刷新以显示更改。

自定义登陆页面

让我们对登陆页面进行少量更改，使其与披萨应用具有更强的相关性。

  1. 在 Pages/Index.cshtml 中，将 C# 代码块中的代码替换为以下代码：

    ViewData["Title"] = "The Home for Pizza Lovers";
TimeSpan timeInBusiness = DateTime.Now - new DateTime(2018, 8, 14);

    前面的代码：

    • 将 ViewData 字典中 Title 项的值设置为“披萨爱好者的天堂”。
    • 计算自业务开业以来已过去的时间。

  2. 按如下所示修改 HTML：

    • 将 <h1> 元素替换为以下代码：

      <h1 class="display-4">Welcome to Contoso Pizza</h1>

    • 将 <p> 元素替换为以下代码：

      <p class="lead">The best pizza in town for @Convert.ToInt32(timeInBusiness.TotalDays) days!</p>

    前面的代码：

    • 将标题更改为“欢迎光临 Contoso Pizza”。
    • 显示自业务开业以来已过去的天数。
      • @ 字符用于从 HTML 切换到 Razor 语法。
      • Convert.ToInt32 方法用于将 timeInBusiness 变量的 TotalDays 属性转换为整数。
      • Convert 类是 System 命名空间的一部分，该命名空间由 ContosoPizza.csproj 文件中的 <ImplicitUsings> 元素自动导入。

  3. 保存文件。 包含应用的浏览器选项卡会自动刷新以显示更改。 如果使用的是 GitHub Codespaces，则文件会自动保存，但需要手动刷新浏览器选项卡。

重要

每次保存文件时，请密切关注包含 dotnet watch 的终端窗口。 有时，代码可能包含它所谓的“原始编辑”。 这意味着，如果不重启应用程序，则无法重新编译更改的代码。 如果系统提示重启应用，请按 y（是）或 a（始终）。 你始终可以通过在终端窗口中按 Ctrl+C 两次来停止应用程序，然后可以通过再次运行 dotnet watch 来重启它。

你已对 Razor 页面进行了第一次更改！ 在下一单元中，你将向应用添加新页面以显示披萨列表。