練習 - 新增披薩表單

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 屬性可用來判斷使用者的輸入是否有效。
  - 驗證規則是從 Models\Pizza.cs 中 Pizza 類別上的屬性 (例如 Required 和 Range) 推斷而來。
  - 如果使用者的輸入無效，則會呼叫 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 屬性是用來顯示整個模型的驗證錯誤。
使用 asp-for 屬性，將每個表單欄位 (<input> 和 <select> 元素) 與每個 <label> 繫結至相應的 NewPizza 屬性。
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 方法。
  - 頁面知道使用這個方法，因為 Pages\PizzaList.cshtml 中 [刪除] 按鈕上的 asp-page-handler 屬性設定為 Delete。
- id 參數是用來識別要刪除的披薩。
  - id 參數繫結至 URL 中的 id 路由值。這是使用 Pages\PizzaList.cshtml 中 [刪除] 按鈕上的 asp-route-id 屬性來完成。
- DeletePizza 方法會在 _service 物件上呼叫，以刪除披薩。
- RedirectToAction 方法是用來將使用者重新導向至 Get 頁面處理常式，這會使用更新的披薩清單重新轉譯頁面。
儲存檔案。如果您使用 GitHub Codespaces，檔案會自動儲存。
測試披薩的 [刪除] 按鈕。頁面應該會重新整理，而且應該會從清單中移除選取的披薩。

恭喜！您已成功建立可顯示披薩清單的 Razor 頁面、允許使用者新增披薩，而且也允許使用者刪除披薩。

練習 - 新增披薩表單

新增表單以建立新的披薩

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

檢定您的知識

意見反應