練習 - 新增披薩表單

10 分鐘

在本單元中，您將新增一個表單來建立新的披薩，以完成披薩列表頁面。您也會新增頁面處理常式，來處理表單提交和刪除披薩。

新增建立新披薩的表單

讓我們從將屬性新增至 PizzaListModel 類別開始，以代表用戶的輸入。您也會新增適當的頁面處理常式。

開啟 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 警告。
現在新增 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 頁面處理程式，這會以更新的披薩列表重新轉譯頁面。
儲存檔案。如果您使用 GitHub Codespaces，檔案會自動儲存。
返回執行 dotnet watch 中的終端機，然後按 Ctrl+R 重載應用程式。

現在有一個頁面處理程式來處理表單提交，讓我們將表單加入到Razor頁面。

開啟 Pages\PizzaList.cshtml ，並以下列程式代碼取代  ：

<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 要求傳送至伺服器。

在頁面底部，新增下列程序代碼：
```
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}
```
這會將客戶端驗證文本插入頁面。客戶端驗證腳本用來在表單提交至伺服器之前驗證使用者的輸入。
儲存檔案。在瀏覽器中，[披薩列表]頁面會刷新並顯示新的表單。如果您使用 GitHub Codespaces，檔案會自動儲存，但您必須手動重新整理瀏覽器索引標籤。
輸入新的披薩，然後選取 [ 建立] 按鈕。頁面應該重新整理並顯示清單中的新披薩。

新增頁面處理程式以刪除披薩

要新增至 [披薩清單] 頁面的最後一個部分：用來刪除披薩的頁面處理常式。刪除披薩的按鈕已經在頁面上，但它們尚未執行任何動作。

回到 Pages\PizzaList.cshtml.cs，將下列方法新增至 PizzaListModel 類別：
```
public IActionResult OnPostDelete(int id)
{
    _service.DeletePizza(id);

    return RedirectToAction("Get");
}
```
在上述程式碼中：
- 當使用者點擊披薩的 OnPostDelete 按鈕時，會呼叫方法。
  - 頁面知道使用這個方法，因為 asp-page-handlerPages\PizzaList.cshtml 中 [刪除] 按鈕上的屬性會設定為 Delete。
- 參數 id 用來識別要刪除的披薩。
  - 參數 id 係結至 id URL 中的路由值。這是使用 asp-route-idPages\PizzaList.cshtml 中 [刪除] 按鈕上的屬性來完成。
- 在DeletePizza物件上呼叫_service方法來刪除披薩。
- 方法 RedirectToAction 可用來將使用者重新導向至 Get 頁面處理程式，這會以更新的披薩列表重新轉譯頁面。
儲存檔案。如果您使用 GitHub Codespaces，檔案會自動儲存。
測試披薩的 [刪除] 按鈕。頁面應該重新整理，而且應該從清單中移除選取的披薩。

祝賀！您已成功建立顯示披薩列表的 Razor 頁面、允許使用者新增披薩，也允許使用者刪除披薩。

意見反應

此頁面對您有幫助嗎？

練習 - 新增披薩表單

檢定您的知識

意見反應