2010年10月20日 星期三

ASP.NET 4 Dynamic Data / Scaffolding Web Application Sample

最近梅姬(Megi Typhoon 2010/10/16)颱風號稱是破表的18級風,而且有人說根本就是批著颱風外衣的超級龍捲風,NASA下面這張圖清楚看到粗壯的颱風眼。這跟我們這個主題也有點小關係,我們也期望ASP.NET Dynamic Data 也是一個威力強大新的且快速的動態呈現資料的方式。

From:http://www.nasa.gov

ASP.NET Dynamic Data可自動且輕鬆的建立由資料驅動的Web應用程式,配合啟用Scaffolding機制,可不必一直再重覆開發維護資料的網頁,有關Dynamic Data架構簡單的說明可區分為三層:

1.展示層:如使用Edit/Add等等Template來呈現資料給使用者。
2.資料層:如建立自訂的資料結構,或是設定ASP.NET的資料來源控制項。
3.資料對應層:如使用Entity Framework / LINQ to SQL 對應到資料庫的各種資料Table。


以下以實際Northwind資料庫為範例,使用Dynamic Data專案範本中預設的網頁Template,透過三個步驟,可建立簡單而完整的Dynamic Data Web Application。

1.建立Dynamic Data專案。
2.建立資料對應層的實體模型設定(使用Entity Framework)。
3.在Global.aspx中註冊Entity Framework資料內容。


建立Dynamic Data專案


首先我們使用VS Web Developer 2010 Express,選擇New Project直接建立Dynamic Data Entities Web Application,我們有兩個專案範本可選擇來直接建立Dynamic Data 的應用程式:


1.ASP.NET Dynamic Data Entities Web Application
2.ASP.NET Dynamic Data Linq to SQL Application


因為我們這裡的資料對應層使用ASP.NET Entity Framework,所以這裡選擇第1種專案範本,建立一個ASP.NET Dynamic Data Entities Web Application當做範例。




基本上兩種專案範本使用與建立沒有太多的差別。小小差異處為建立後,可以查看專案中的reference元件,兩種不同的專案,系統預設包含的元件會不一樣,ASP.NET Dynamic Data Linq to SQL Application的專案會多了Linq to SQL會使用的元件,如System.Data.Entity、System.Data.Linq、System.Drawing與System.Runtime.Serialization等。當然,如果開發者要在ASP.NET Dynamic Data Entities Web Application專案建立後,再去拉Linq to SQL的設定來使用,也是可以,但要記得確認專案檔中是否已經設定参考到這些元件。不過這樣就乾脆使用第2種專案範本來建立專案檔就好了。


建立資料對應層的實體模型設定(使用Entity Framework)


接下來我們在專案檔中建立Models目錄,在該目錄下新建一個名為Northwind.edmx的Entity Framework設定檔案,名稱為NorthwindEntities,當然也可建立在別的目錄,我這邊是比照MVC的方式來處理,這樣程式擺放位置比較有經過歸類,不會散得到處都是。(如何建立Entity Framework可参考本文最後相關文章連結)




在Global.aspx中註冊Entity Framework資料內容


打開Global.aspx檔案,尋找一下RegisterRoutes()這個method,並且加上下列程式:


   1:  using WebAppDynamicData.Models;
   2:   
   3:  public static void RegisterRoutes(RouteCollection routes)
   4:  {
   5:      DefaultModel.RegisterContext(typeof(NorthwindEntities),
   6:          new ContextConfiguration() { ScaffoldAllTables = true });
   7:                  :
   8:                  :
   9:  }


其中NorthwindEntities就是我們在上面設定的Entity Framework資料模型名稱,這樣可讓系統知道要註冊NorthwindEntities這個實體模型設定供動態呈現資料時使用,也是啟動Scaffolding機制(何謂Scaffolding)。


Woo.....資料與CRUD功能可以動態與自動地呈現了


編譯上述專案檔後,我們好像還沒寫到程式,APS.NET就已經將平常維護與查詢資料各種機制都自動建立完成了,如下這是default.aspx的畫面,其中的customers,products...等等,就是我們之前在NorthwindEntities這個實體模型自資料庫中所設定要呈現的Table資料。



接著我們點進products來看看,如下圖可看到CRUD(增加/查詢/修改/刪除)機制都已經預設建立好了。



基本的查詢下拉選項也可使用,如下圖:




更酷的是,系統也會自動顯示 資料庫中的foreign key對應可讓我們在product列表資料中,直接就可知道哪些訂單中有訂購這項產品,這項產品供應商是哪家公司,如下兩圖:


點選Order_details欄位資料後,可看到哪些訂單中有訂購這項產品。




點選Suppliers欄位資料後,可看到供應商是哪家公司,及這家公司的基本資料。




CRUD AUTOMATICA


我們也可以使用這些自動建立好的CRUD機制,下面是我們點選每筆資料最前面的Edit Link後,可讓我們直接修改每筆資料的欄位,並且可自動驗證使用者輸入的資料型態是否正確,如下兩圖:




我們點選表格下方的insert new item Link後,可讓我們增加一筆資料,並且可自動驗證使用者輸入的資料型態是否正確,如下兩圖:




我們點選每筆資料最前面的Delete Link後,會先再次詢問是否刪除此筆資料,按下確定後,則可刪除這筆資料,如下兩圖:



我們點選每筆資料最前面的Detail Link後,我們可單獨查看這筆資料明細,如下兩圖:



Dynamic Data可達到Scaffolding機制,就是設定好資料對應結構後(Entity Framework/LINQ to SQL),就可動態產生資料頁面供查詢與維護,不必再實際為每一個種維護需求建立實體的網頁程式。


相關聯結:

ASP.NET Dynamic Data 概觀
建立使用 Scaffolding 的新 Dynamic Data 網站
ASP.NET 動態資料 Scaffolding 和頁面範本概觀

如何建立Entity Framework可参考下列:

Entity Framework Concept
MVC Entity Framework
微軟Entity Framework教學影片

沒有留言:

張貼留言