练习 - 添加新的披萨表单

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

添加表单以创建新披萨

首先，将属性添加到 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 属性用于确定用户的输入是否有效。
     • 验证规则是从 Required 类的属性Range（如Pizza和）推断出来的。
     • 如果用户的输入无效， Page 则调用该方法以重新呈现页面。
   • 该 NewPizza 属性用于向对象添加新披萨 _service 。
   • 该方法 RedirectToAction 用于将用户重定向到 Get 页面处理程序，这将使用更新的披萨列表重新呈现页面。

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

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

现在有一个页面处理程序来处理表单提交，接下来让我们将表单添加到 Razor 页面。

1. 打开 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>字段都使用NewPizza特性绑定到相应的asp-for属性。
   • 该 asp-validation-for 属性用于显示每个窗体字段的任何验证错误。
   • 该@Html.DisplayNameFor 方法用于显示IsGlutenFree 属性的显示名称。 这是一种 Razor 帮助程序方法，用于显示属性的显示名称。 这样执行标签可确保当用户单击标签时选中该复选框。
   • 标记的 Create 提交按钮将添加到窗体，以便将表单数据发布到服务器。 在运行时，当用户选择此 “创建 ”按钮时，浏览器会将表单作为 HTTP POST 请求发送到服务器。

2. 在页面底部，添加以下代码：

   @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");
   }
   

   在前面的代码中：

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

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

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

祝贺！ 你已成功创建了一个显示披萨列表的 Razor 页面，允许用户添加新的披萨，还允许用户删除披萨。