ASP.NET Core CRUD 傻瓜範例 (3) - 快速產生清單與新增修改刪除介面

上一篇提到，EF Core 是 ASP.NET Core 官方推薦的資料庫存取做法，因此，使用 EntityFramework 開發系統可以享用更多工具內建支援，像是「自動依據 Entity 物件產生新增修改刪除介面」。

目前為止，我們已備好 DailyRecord.cs、JournalDbContext.cs，前者定義了每筆資料具備的屬性、是否必填、長度限制等，後者則具備在資料庫查詢及新增、移除、更新 DailyRecord 資料的能力。Visual Studio 有個 Scaffolding 機制，依據這兩個類別即可自動生成 Index.cshtml (清單)、Create.cshtml (新增)、Detail.cshtml (顯示)、Edit.cshtml (編輯)、Delete.cshtml (刪除)，而 Create、Detail、Edit、Delete 剛好就對映到 CRUD 的四項作業。而且不只介面，連後端插入、刪除及更新資料庫的程式碼也都一併準備好了，按下 F5 就能直接用它維護資料。聽起挺酷，來看示範。

首先我在 Pages 目錄下建立子資料夾 Records，在 Records 資料夾上按右鍵選 Add / Razor Pages：

新增時有三個選項，由於我們打算一次產生清單 + CRUD 網頁，請選第三項 - 海陸豪華套餐：

選取主菜 Model class: DailyRecord、Data context class: JournalDbContext：

按下「Add」鈕，經過一小段 NuGet 套件安裝及程式產生程序，Pages/Reords 目錄下將出現 Index.cshtml、Create.cshtml... 等五個檔案：

按 F5 啟動網站，連到 httq://localhost:xxxx/Records，清單畫面出現了：

按下清單的「Create New」則會導向 Create.cshtml，可輸入內容建立新資料。基本上各輸入欄位會依 DailyRecord 各屬性的型別設計，例如：Date 被設計成日期時間輸入欄位：

若欄位有必填或長度限制，例如：User 欄位有設 [Required]，若未寫內容要送出，會出現檢核失敗訊息無法送出：

就這樣，我們已可成功新增一筆資料：

檢視介面(Details.cshtml)長這樣：

刪除介面基本上就是檢視介面加顆刪除鈕：

當然，自動產生的制式介面離實際專案規格常存在一大段距離，但它仍極具價值，因為：

1. 產生速度超快、成本極低，對不想花太多開發時間的小應用，已經很夠用了。
2. 用它當成客製化修改的基礎，勝過從頭開始完全徒手打造。
3. 新手可從中學習 Razor Page 設計與 DbContext 使用技巧，是很棒的活體範例。

在下一篇，我將依據模擬規格對介面做簡單的調整，體驗如何客製化修改。

Sample of using ASP.NET Core Razor Page scaffolding to create complete CRUD interfaces.