練習 - 新增披薩表單
- 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 ,並以下列程式代碼取代
<!-- 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 要求傳送至伺服器。
- 屬性
在頁面底部,新增下列程序代碼:
@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係結至idURL 中的路由值。 這是使用asp-route-idPages\PizzaList.cshtml 中 [刪除] 按鈕上的 屬性來完成。
- 參數
- 在
DeletePizza物件上呼叫_service方法來刪除披薩。 - 方法
RedirectToAction可用來將使用者重新導向至Get頁面處理程式,這會以更新的披薩列表重新轉譯頁面。
- 當使用者點擊披薩的
儲存檔案。 如果您使用 GitHub Codespaces,檔案會自動儲存。
測試披薩的 [刪除] 按鈕。 頁面應該重新整理,而且應該從清單中移除選取的披薩。
祝賀! 您已成功建立顯示披薩列表的 Razor 頁面、允許使用者新增披薩,也允許使用者刪除披薩。