在 VS2013 Preview 中使用 Scaffolding 快速建立 CRUD 網頁

在 VS2013 Preview 中, 我們可以透過它的 Scaffolding (支架) 功能在 MVC 專案中快速建立一整套的 CRUD 網頁, 不用寫一行程式碼。甚至, 它已經內建了 Bootstrap 框架, 這使得我們甚至不需要具備美工能力, 也能設計出比以前漂亮得多的網頁。

那麼, 應該怎麼做呢? 以下我很簡單地列出操作步驟。

首先, 當然, 你必須先把資料庫設計好, 然後在專案中加入 Entity Framework (在 VS2013 版本中使用的是 EF 6) 實體資料模型。不建議你把 EF 6 建立在單獨的專案中; 我發現如果這麼做的話, 在 VS2013 Preview 似乎會有怪怪的問題; 所以, 我建議你把 EF 實體資料模型建立在 Model 資料夾下面即可。

接著事情就非常簡單了!

你可以和我一樣, 先建立一個 One ASP.NET Web 專案 (即 ASP.NET Web 應用程式專案, 但勾選了 MVC 樣板); 把 EF 按照上面的做法建立好 (然後必須進行建置的動作) 之後, 在 Controllers 資料夾下面按滑鼠右鍵, 選擇「加入」、「支架」(Scaffold), 然後選擇「MVC 5 Controller with read/write actions and views, using Entity Framework」(這個項目說明在我的 VS2013 Preview 版本中看起來是英文, 但是在朋友的電腦中卻是中文) 這個樣板。

接著, 給它一個名字 (例如 "CategoryController"。這個名字後半部的 Controller 字樣不要改變)。然後選擇 Model Class (例如本例中的 "tblCategory (Johnny.Data)"), 以及 Data Context Class (例如 "dbIssueTrackingEntities (Johnny.Data)")。如果你在這個階段發生錯誤, 那麼我建議你在選擇 Data Context Class 時建立一個新的; 但是你只需要建立這麼一次, 之後就可以重複使用。

你可以在這個畫面中選擇主版頁面。VS2013 Preview 已經提供了一個預設的主版頁面 (~/Views/Shared/_Layout.cshtml), 你可以套用這個主版頁面, 它已經套上了 Bootstrap 框架。

完成之後, 你會發現程式除了幫你在 ~/Controllers 以下建立一個 CategoryController.cs 檔案之外, 會另外在 ~/Views 之下建立一個 Category 資料夾, 然後加入五個 View 檔案:

1. Create.cshtml
2. Delete.cshtml
3. Details.cshtml
4. Edit.cshtml
5. Index.cshtml

顧名思義, 我想我就不需要一一解釋這五個檔案是做什麼用的了吧!

現在, 我建議你檢查你選的資料表 (例如我這裡選的 tblCategory 資料表) 裡面有沒有資料。如果沒有, 等下執行時會看不出效果。我建議你不妨輸入幾個測試用的資料。

執行專案後, 請在網址列中把網址改成類似 http://localhost:3051/Category, 這時你就應該看到資料表中的資料列表了!

不過, 如果你試圖去按右側 Edit 或者 Delete 按鈕的話, 你會看到一串長長的 "The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32'… " 這種例外錯誤。

坦白說, 我並不明白為什麼會有這樣的錯誤發生, 但是解決的方式很簡單。那就是開啟本例中被自動建立的 ~/Views/Category/Index.cshtml 這個檔案, 捲動到最下面, 找到以下這三行指令:

@Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
@Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
@Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })

把行中的註解拿掉, 並把它改成如下:

@Html.ActionLink("Edit", "Edit", new { id=item.CategoryId }) |
@Html.ActionLink("Details", "Details", new { id=item.CategoryId}) |
@Html.ActionLink("Delete", "Delete", new { id=item.CategoryId })

在這裡, CategoryId 指的是你的資料表的主鍵名稱。

同樣的, Detail.cshtml 也要改一下。

另外還有一個地方要改。那就是在 Edit.cshtml 檔案裡, 我們要把主鍵欄位和其它不應該被改的欄位改成 readonly, 以免使用者不小心把它改掉而引發錯誤。以此處的主鍵 IssueId 這個欄位為例, 我們可以在程式中找到這一行:

@Html.EditorFor(model => model.IssueId)

請把它修改如下:

@Html.TextBoxFor(model => model.IssueId, new { @readonly = "readonly" } )

其它不該被修改的欄位都應比照處理。

這麼做之後, 你就可以順便地操作這個資料表的 CRUD 動作了。

你說, Scaffold 這個功能是不是相當的方便呢?

 

歡迎加入 .NET 2Share on Google+