上一篇提到,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.


Comments

Be the first to post a comment

Post a comment


25 - 12 =