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

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

自定义登陆页面

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

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

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

前面的代码：

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

按如下所示修改 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>元素自动导入。
保存文件。 包含应用的浏览器选项卡会自动刷新以显示更改。 如果使用的是 GitHub Codespaces，则文件会自动保存，但需要手动刷新浏览器选项卡。

练习 - 添加新的 Razor 页面

创建“披萨列表”页面

若要创建新的 Razor 页面，需使用 .NET CLI。

由于终端被 dotnet watch 命令阻止，因此请通过右键单击“资源管理器”中的 ContosoPizza 文件夹以打开另一个终端，然后选择“在集成终端中打开”。

在终端窗口中，输入以下命令：
dotnet new page --name PizzaList --namespace ContosoPizza.Pages --output Pages
上述命令：

• 将在ContosoPizza.Pages命名空间中创建以下文件：

  • PizzaList.cshtml - Razor 页面

  • PizzaList.cshtml.cs - 随附的 PageModel 类

• 将两个文件存储在项目的 Pages 子目录中。

3. 在 Pages/PizzaList.cshtml 中，在 @{ } 代码块中添加以下代码：

​ ViewData["Title"] = "Pizza List 🍕";

4. 在文件末尾添加以下代码：

<h1>Pizza List 🍕</h1>

<!-- New Pizza form will go here -->

<!-- List of pizzas will go here -->

这会向页面添加一个标题，以及两个 HTML 注释占位符，用于稍后将添加的功能。

5. 保存文件。 如果使用的是 GitHub Codespaces，则文件会自动保存。

6. 返回到正在运行 dotnet watch 的终端，然后按 Ctrl+R 重新加载应用并检测新文件。

将“披萨列表”页面添加到导航菜单

这是测试页面的好时机，但你还无法进行测试，因为该页面未链接到导航菜单。 你现在需要执行该操作。

1. 打开 Pages/Shared/_Layout.cshtml。

2. 在包含 navbar-nav 类的 <ul> 元素中（从第 21 行开始），请注意包含指向“主页”和“隐私”页面的链接的 <li> 元素。 将以下代码添加到列表末尾处包含“隐私”链接的 <li> 元素的后面：

   <li class="nav-item">
       <a class="nav-link text-dark" asp-area="" asp-page="/PizzaList">Pizza List 🍕</a>
   </li>
   

   这会向导航菜单添加一个指向 PizzaList 页面的链接。

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

4. 在导航菜单中选择“披萨列表 🍕”链接。 随即会显示“披萨列表”页面。

向依赖项注入容器注册 PizzaService 类

“披萨列表”页依赖于 PizzaService 对象来检索披萨列表。 你将使用依赖项注入向页面提供 PizzaService 对象。 为完成此操作，必须向容器注册 PizzaService 类。

1. 打开 Program.cs。

2. 在将服务添加到容器的部分中，添加以下代码：

   builder.Services.AddScoped<PizzaService>();
   

   

   此代码向依赖项注入容器注册 PizzaService 类。 AddScoped 方法指示应为每个 HTTP 请求创建新的 PizzaService 对象。 现在可以将 PizzaService 注入到任何 Razor 页面。

3. 保存文件。 如果使用的是 GitHub Codespaces，则文件会自动保存。

显示披萨列表

让我们来修改“披萨列表”页面的 PageModel 类，以从 PizzaService 对象检索披萨列表并将其存储在属性中。

1. 打开 Pages/PizzaList.cshtml.cs。

2. 将下列 using 语句添加到文件顶部：

   using ContosoPizza.Models;
   using ContosoPizza.Services;
   

   这些语句可导入你将在页面中使用的 Pizza 和 PizzaService 类型。

3. 在 ContosoPizza.Pages 命名空间块中，将整个 PizzaListModel 类替换为以下代码：

   public class PizzaListModel : PageModel
   {
       private readonly PizzaService _service;
       public IList<Pizza> PizzaList { get;set; } = default!;
   
       public PizzaListModel(PizzaService service)
       {
           _service = service;
       }
   
       public void OnGet()
       {
           PizzaList = _service.GetPizzas();
       }
   }
   

   在上述代码中：

   • 已创建名为_service 的专用只读PizzaService。 此变量将保存对PizzaService对象的引用。
     • readonly 关键字指示在构造函数中设置 _service 变量的值之后无法对其进行更改。
   • 定义PizzaList属性以保存披萨列表。
     • IList<Pizza> 类型指示 PizzaList 属性将保存 Pizza 对象列表。
     • PizzaList 被初始化为 default!，以向编译器表明它稍后将被初始化，因此不需要进行 null 安全性检查。
   • 构造函数接受PizzaService对象。
     • 对象 PizzaService 通过依赖项注入提供。
   • 定义 OnGet 方法以从 PizzaService 对象中检索披萨列表并将其存储在 PizzaList 属性中。

   提示

   如果需要了解 null 安全方面的帮助，请参阅 C# 中的 null 安全。

4. 保存文件。 如果使用的是 GitHub Codespaces，则文件会自动保存。

5. 返回到正在运行 dotnet watch 的终端，然后按 Ctrl+R 以重新加载具有已注册服务和 PizzaListModel 的新构造函数的应用。

现在，可在页面上访问披萨列表，接下来需要使用该列表在页面上显示披萨。

1. 打开 Pages/PizzaList.cshtml。
2. 使用下面的代码替换 <!-- List of pizzas will go here --> 注释：

<table class="table mt-5">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Price</th>
            <th scope="col">Size</th>
            <th scope="col">Gluten Free</th>
            <th scope="col">Delete</th>
        </tr>
    </thead>
    <tbody>
    @foreach (var pizza in Model.PizzaList)
    {
        <tr>
            <td>@pizza.Name</td>
            <td>@($"{pizza.Price:C}")</td>
            <td>@pizza.Size</td>
            <td>@(pizza.IsGlutenFree ? "✔️" : string.Empty)</td>
            <td>
                <form method="post" asp-page-handler="Delete" asp-route-id="@pizza.Id">
                    <button class="btn btn-danger">Delete</button>
                </form>
            </td>
        </tr>
    }
    </tbody>
</table>

在上述代码中：

• 已创建 <table> 元素来显示披萨列表。
• 已创建 <thead> 元素来保存表格标题。
• <tbody>中的@foreach语句循环访问披萨列表。
  • Model 属性引用在代码隐藏文件中创建的 PizzaListModel 对象。
  • PizzaList 属性引用在代码隐藏文件中定义的 PizzaList 属性。
• @foreach语句的每个迭代都会创建一个<tr>元素来保存披萨数据：
  • Razor 语法用于显示 <td> 元素中的披萨数据。 此语法用于显示存储在 pizza 变量中的 Pizza 对象的属性。
  • Price 是使用 C# 字符串内插进行格式设置的。
  • 三元表达式用于显示 IsGlutenFree 属性的值（“✔️”或空白单元格）。
  • 已创建表单来删除披萨。
    • asp-page-handler 属性指示应将表单提交到代码隐藏文件中的 Delete 处理程序。 你将在后面的单元中创建该处理程序。
    • asp-route-id 属性指示应将 Pizza 对象的 Id 属性传递给 Delete 处理程序。

3. 保存文件。 在浏览器中，“披萨列表”页面会刷新以显示披萨列表。 如果使用的是 GitHub Codespaces，则文件会自动保存，但需要手动刷新浏览器选项卡。

做得很好！ 你已创建一个显示披萨列表的 Razor 页面。 在下一单元中，你将了解标记帮助程序和页面处理程序。

了解标记帮助器和页面处理程序

在上一单元中，你创建了一个显示披萨列表的 Razor 页面。你使用了 @ 符号在 HTML 和 C# 之间切换上下文。在此单元中，你将了解标记帮助程序。标记帮助程序是一种特殊的可以包含 C# 代码的 HTML 元素。你还将了解页面处理程序。页面处理程序是处理浏览器请求的方法。你将在下一单元中使用页面处理程序来添加和删除披萨。

标记帮助程序

标记帮助程序用于解决 HTML 和 C# 之间上下文切换效率低下问题。 ASP.NET Core 内置的多数标记帮助程序都可扩展标准 HTML 元素。 标记帮助程序为 HTML 元素提供了额外的服务器端特性，使元素更加可靠。

对于此项目，你应该知道四个标记帮助程序：Partial、Label、Input 和 Validation Summary Message。

分部标记帮助程序

<partial name="_ValidationScriptsPartial" />

这会将 _ValidationScriptsPartial.cshtml 文件的内容注入页面。 _ValidationScriptsPartial.cshtml 文件包含用于验证表单输入的 JavaScript，因此需要将其包含在包含表单的每个页面上。

标签标记帮助程序

<label asp-for="Foo.Id" class="control-label"></label>

这扩展了标准 HTML <label> 元素。 与许多标记帮助程序一样，它使用 asp-for 特性。 特性接受来自 PageModel 的属性。 在本例中，PageModel 的 Foo.Id 属性的名称（具体来说，字符串 "Id"）将呈现为 HTML <label> 元素的内容。

输入标记帮助程序

<input asp-for="Foo.Id" class="form-control" />

与前面的示例类似，这会扩展标准 HTML <input> 元素。 它还使用 asp-for 特性来指定 PageModel 属性。 在本例中，Foo.Id 属性的值将作为 HTML <input> 元素的 value 特性呈现。

验证摘要标记帮助程序

<div asp-validation-summary="All"></div>

验证摘要标记帮助程序显示模型上单个属性的验证消息。
备注：
验证规则和属性显示名称等内容在 PageModel 类中定义。 我们将在下一单元中指出在代码中的什么位置查找它们。

页面处理程序

PageModel 类定义 HTTP 请求的页面处理程序和用于呈现页面的数据。 在上一练习中，PizzaListModel 类通过将 PizzaList 属性的值设置为 _service.GetPizzas() 的值处理了 HTTP GET 请求。
常见的处理程序包括用于页面初始化的 OnGet 和用于表单提交的 OnPost。 为了处理 HTTP POST，页面处理程序可能会验证用户提交的数据，如果无效，则再次显示输入表单页，或者将有效数据发送到服务或数据库进行保留。

在下一单元中，你将添加一个表单，以使用多个标记帮助程序创建新披萨。 你还将添加页面处理程序来处理表单提交和删除披萨。

练习 - 添加新的披萨表单

在本单元中，你将完成“披萨列表”页面，方式是添加一个表单来创建新披萨。 你还将添加页面处理程序来处理表单提交和删除披萨。

添加表单以创建新披萨

首先，向 PizzaListModel 类添加属性以表示用户输入。 还需添加相应的页面处理程序。

1. 打开 Pages\PizzaList.cshtml.cs，并将以下属性添加到 PizzaListModel 类：

[BindProperty]
public Pizza NewPizza { get; set; } = default!;

在上述代码中：

• 将名为 NewPizza 的属性添加到 PizzaListModel 类。
  • NewPizza 是一个 Pizza 对象。
• BindProperty 特性应用到 NewPizza 属性。
  • BindProperty 特性用于将 NewPizza 属性绑定到 Razor 页面。 发出 HTTP POST 请求时，将使用用户输入填充 NewPizza 属性。
• 将 NewPizza 属性初始化为 default!。
  • default! 关键字用于将 NewPizza 属性初始化为 null。这可以防止编译器生成有关 NewPizza 属性未初始化的警告。

2. 现在，为 HTTP POST 添加页面处理程序。在同一文件中，将以下方法添加到 PizzaListModel 类：

public IActionResult OnPost()
{
    if (!ModelState.IsValid || NewPizza == null)
    {
        return Page();
    }

    _service.AddPizza(NewPizza);

    return RedirectToAction("Get");
}

在上述代码中：

• ModelState.IsValid 属性用于确定用户输入是否有效。
  • 验证规则是根据 Models\Pizza.cs 中 Pizza 类上的属性（例如 Required 和 Range）推断出来的。
  • 如果用户输入无效，则调用 Page 方法来重新呈现页面。
• NewPizza 属性用于向 _service 对象添加新的披萨。
• RedirectToAction 方法用于将用户重定向到 Get 页面处理程序，该处理程序将重新呈现包含更新的披萨列表的页面。

3. 保存文件。如果使用的是 GitHub Codespaces，则文件会自动保存。

4. 返回到正在运行 dotnet watch 的终端，然后按 Ctrl+R 重新加载应用。
   

5. 打开 Pages\PizzaList.cshtml 并将 <!-- New Pizza form will go here --> 替换为以下代码：

<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
    <label asp-for="NewPizza.Name" class="control-label"></label>
    <input asp-for="NewPizza.Name" class="form-control" />
    <span asp-validation-for="NewPizza.Name" class="text-danger"></span>
</div>
<div class="form-group">
    <label asp-for="NewPizza.Size" class="control-label"></label>
    <select asp-for="NewPizza.Size" class="form-control" id="PizzaSize">
        <option value="">-- Select Size --</option>
        <option value="Small">Small</option>
        <option value="Medium">Medium</option>
        <option value="Large">Large</option>
    </select>
    <span asp-validation-for="NewPizza.Size" class="text-danger"></span>
</div>
<div class="form-group form-check">
    <label class="form-check-label">
        <input class="form-check-input" asp-for="NewPizza.IsGlutenFree" /> @Html.DisplayNameFor(model => model.NewPizza.IsGlutenFree)
    </label>
</div>
<div class="form-group">
    <label asp-for="NewPizza.Price" class="control-label"></label>
    <input asp-for="NewPizza.Price" class="form-control" />
    <span asp-validation-for="NewPizza.Price" class="text-danger"></span>
</div>
<div class="form-group">
    <input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>

在上述代码中：

• asp-validation-summary 属性用于显示整个模型的验证错误。
• 每个表单字段（<input> 和 <select> 元素）和 <label> 都使用 asp-for 特性绑定到 NewPizza 属性。
• asp-validation-for 属性用于显示每个表单字段的验证错误。
• @Html.DisplayNameFor 方法用于显示 IsGlutenFree 属性的显示名称。 这是一种 Razor 帮助程序方法，用于显示属性的显示名称。 以这种方式添加标签可确保用户单击标签时复选框处于选中状态。
• 提交按钮会添加到表单中，以便将表单数据发布到服务器。在运行时，当用户单击提交按钮时，浏览器以 HTTP POST 请求的形式向服务器发送表单。
  在页面底部添加以下代码：

@section Scripts {
<partial name="_ValidationScriptsPartial" />
}

这会将客户端验证脚本注入页面。客户端验证脚本用于在将表单提交到服务器之前验证用户输入。
3. 保存文件。在浏览器中，“披萨列表”页面会刷新以显示新表单。如果使用的是 GitHub Codespaces，则文件会自动保存，但需要手动刷新浏览器选项卡。
4. 输入新披萨，然后选择“创建”按钮。页面应刷新并在列表中显示新披萨。

添加用于删除披萨的页面处理程序

要添加到“披萨列表”页面的最后一项内容是：用于删除披萨的页面处理程序。 用于删除披萨的按钮已显示在页面上，但它们尚未执行任何操作。

1. 返回到 Pages\PizzaList. Cshtml. Cs，将以下方法添加到 PizzaListModel 类：

public IActionResult OnPostDelete(int id)
{
    _service.DeletePizza(id);

    return RedirectToAction("Get");
}

1. 在上述代码中：

   • 当用户单击针对某个披萨的“删除”按钮时，会调用 OnPostDelete 方法。
     • 页面知道使用此方法，因为 Pages\PizzaList.cshtml 中“删除”按钮上的 asp-page-handler 属性已设置为 Delete。
   • id 参数用于标识要删除的披萨。
     • id 参数绑定到 URL 中的 id 路由值。 此操作是通过 Pages\PizzaList.cshtml 中“删除”按钮上的 asp-route-id 属性完成的。
   • 对 _service 对象调用 DeletePizza 方法以删除披萨。
   • RedirectToAction 方法用于将用户重定向到 Get 页面处理程序，该处理程序将重新呈现包含更新的披萨列表的页面。

2. 保存文件。 如果使用的是 GitHub Codespaces，则文件会自动保存。

3. 测试针对披萨的“删除”按钮。 页面应刷新，并且所选披萨应从列表中移除。

恭喜！ 你已成功创建一个 Razor 页面，该页面显示披萨列表，并允许用户添加新披萨和删除披萨。

总结

在本模块中，你已了解 Razor Pages 的基础知识。你已了解如何创建 Razor 页面、添加模型和添加页面处理程序。你还了解了如何使用标记帮助程序将 HTML 元素绑定到模型属性并生成 URL。此外，你还了解了如何使用依赖项注入将服务注入到 Razor 页面。

后续步骤

深入了解文档。本模块中引入了以下 ASP.NET Core 功能和概念：

• Razor Pages
• Razor 语法参考
• 标记帮助程序
• 分部视图
• 布局
• 路由
• 依赖关系注入
• 使用类型化客户端模式发出 HTTP 请求