作為Web開發者，我們經常面對的任務就是將數據通過表格展現給用戶。最簡單的情景是比如僅將顧客的訂單顯示出來。然而，更多的數據表格將提供比如排序，分頁等更多的豐富的功能。

　　在ASP.NET的web表單中，GridView控件提供了一種快速簡便的方法顯示網格中的記錄集，并提供像排序、分頁、編輯及刪除的功能，所有的這些只需寫少量的代碼就可以實現。在頁面加載時，GridView自動HTML中的table標記，讓你不需要寫任何標簽,以及不用去考慮如何顯示和將數據綁定到GridView控件。在ASP.NET MVC應用中，由于是使用了MVC模式，這對于那些剛接觸ASP.NET MVC的新手來說有點挑戰，特別是那些已經熟悉了傳統的ASP.NET開發的人來說。

　　這是一個講解如何在ASP.NET MVC應用中使用數據控件的系列文章。在該系列文章中，我們首先學習到如何創建ASP.NET MVC應用程序及如何訪問數據庫。接著是如何在一個簡單的表格控件中展示數據記錄。最后將會探究如何實現更豐富功能的數據功能，比如排序，分頁，過濾以及客戶端的腳本功能加強。我們同時也會探究一些目前比較流行的表格控件，比如MvcContrib項目和基于Javascript的表格項目jqGrid。本文將首先指導如何創建一個ASP.NET MVC程序以及如何將數據庫中的數據呈現到表格中去。

　　步驟1 創建ASP.NET MVC項目

　　ASP.NET MVC是微軟根據著名的MVC設計模式而專門為ASP.NET開發而實現的一個框架。從本質上說，它允許開發者在網頁中使用更強大的控件，并使得程序開發者和頁面開發者能更專注于自身領域的開發,使的程序更容易測試，更容易實現SEO。ASP.NET MVC框架最早是在Visual Studio 2008和ASP.NET 3.5 sp1時提出來的。在.NET 4中，ASP.NET MVC已經是作為其中的一個重要組成部分了，如果使用Visual Studio 2010的話，就不需要另外下再ASP.NET MVC框架了。

　　下面我們開始建立一個新的ASP.NET MVC應用。首先啟動Visual Studio 2010,選擇文件—新項目。選擇C#語言，并且選擇建立一個ASP.NET MVC2 空Web應用程序，將項目命名為GridDemosMVC，之后按確定完成，如下圖：

▲

　　 一個新的空的ASP.NET MVC2 應用的目錄結構如下：

　　Content -這個目錄存放的是靜態的頁面內容，比如CSS文件，圖片等。

　　 Controllers -這個目錄存放的是應用的控制器及相關文件。在MVC模式中，控制層負責處理用戶的請求并選擇模型和產生返回的視圖。控制器是以類的形式實現的，其中的方法被稱為actions,當以約定的URL形式訪問控制器時，這些actions方法就會被調用。

　　 Models - 這個目錄存放的是實體模型文件。

　　 Scripts -這個目錄存放的是包括jQuery和微軟的ASP.NET Ajax庫的相關Javascript文件。

　　 Views - 這個目錄包含了視圖層的文件。視圖通常包括HTML、Javascript文件和服務端產生的文件。不象傳統的ASP.NET Web應用中服務端代碼和頁面文件是混在一起的(或者代碼是單獨以code-behind的方式存放),在ASP.NET MVC中，視圖層的文件不應該包含業務邏輯代碼。

　　 Global.asax –這個文件其實是ASP.NET MVC中一個重要的核心文件。 ASP.NET MVC中廣泛使用了ASP.NET的的URL路由選擇功能(有關介紹參考: http://www.4guysfromrolla.com/articles/012710-1.aspx一文)。ASP.NET MVC 框架中設定了一個默認的URL路由規則如下: {controller}/{action}/{id},當用戶比如以www.yoursite.com/Categories/View/Beverages,訪問時，ASP.NET會默認執行名為CategoriesContriller這個控制器的其中的view這個方法，并且將Beverages作為id傳進去。

　　步驟2 增加Northwind數據庫支持和創建Linq-TO-SQL類

　　在我們開始設計控制器和頁面視圖前，我們先設置好數據庫，本文將以Northwind數據庫作為示例，其中的數據庫文件在本文的附件中可以下載。在項目中，建立一個App_Data文件夾，將附件中的northwnd.mdf和northwnd.ldf放進去。

　　現在可以開始從數據庫中讀取數據了，本文中采用的是Linq-to-SQL的方法。它是一種微軟設計的ORM對象關系映射工具。之所以選擇它，是因為它可能是最快最簡便的ORM工具了。實際上，Linq-to-SQL在我們的項目工程中增加了相關的文件，指定我們要訪問的數據庫或表，接著它創建一個叫DataContext的類，這個類用來更新及從數據庫中獲取數據。Linq-to-sql允許我們使用簡潔的可讀性強的代碼去操作數據庫，這使得我們可以暫時不用去浪費時間在編寫底層的SQL代碼的編寫上。我們推薦閱讀Scott Guthire編寫的關于Linq-SQL的教程<( http://scottonwriting.net/sowblog/archive/2010/07/27/links-to-scott-guthrie-s-using-linq-to-sql-tutorials.aspx)。

　　首先，我們鼠標右擊Models文件夾，選擇新增文件，從對話框中，選擇Linq to SQl的類模版，并將其命名為Northwind.dbml,就會創建一個新文件，打開后，可以在Linq-to-SQL設計器中看到。具體步驟見如下圖：

　　接下來，轉到服務資源管理器中，展開northwnd.mdf這個文件，拖拉其表分類下的Categories和Products兩個表到設計器中去，并且保存，要做的工作就是這么多，這時系統已經自動為我們構建了數據訪問層了。

　　步驟3 為項目增加必要的文件

　　此外，我們要將文中附件解壓縮后，將其中的一些文件復制到項目工程中，因為這些是我們項目中要用到的一些資源文件。首先將附件中的工程的rContent目錄下的所有內容復制到當前項目的Content目錄下，并把附件工程中的Views/Shared目錄復制到當前項目中的相同目錄中去。注意的是并不需要復制其他文件到當前項目中去，因為其他文件是在今后的教程中有用到的。

　　步驟4 增加ProductsController控制器

　　對于本文，所有的數據展示都是通過一個簡單的控制器ProductsController去實現，其中所有的用戶請求都會被派發到Products控制器中的Index.action去處理，即比如用戶通過URL http://www.yoursite.com/Products/Index，或者www.yoursite.com/Products(因為Index是默認訪問的action名,可以省略)，同樣象排序或者分頁的功能，訪問的形式是www.yoursite.com/Products/Sortable和www.yoursite.com/Products/Paged.

　　創建控制器時，在Controllers文件夾中右擊，在彈出的菜單中選擇新增—控制器ji 即可，將控制器命名為ProductsController，這樣將創建一個ProductsController的類和一個Index的方法。

　　當用戶訪問www.yoursite.com/Products/Index時，我們希望顯示產品的名稱，分類、數量、單價和折扣。因此我們需要使用NorthwindDataContext這個輔助類，它是由Linq-to-SQL工具自動產生的一個類，輔助我們對數據庫的存取。因為我們要在控制器的所有action方法中都要用到這個輔助類，因此可以增加一個叫DataContext的屬性去返回這個類的實例。此外，這個屬性將對NorthwindDataContext實例進行一些屬性的設置，以實現在加載產品的時候同步加載產品所屬的目錄(注意：Linq-to-SQL默認是使用延遲加載的，所謂的延遲加載，就是比如我們在顯示每個產品的時候，并不希望ORM框架同步加載產品所屬的分類，因為同步加載的話當數據量大的時候是會很耗費資源的)。代碼實現如下：

　　控制器實際的工作是兩件事：接受用戶的請求，訪問數據庫并將返回的數據決定用什么視圖去返回給用戶。我們這里僅是簡單去對實體模型Product進行ORM操作，因此只需要如下代碼就可以訪問數據庫的Product表了：

　　但如何將結果返回給視圖呢?控制器有兩種方法返回結果給視圖：通過弱類型的ViewData集合或使用強類型的視圖。我們這里使用的是后一種方法：

　　看到了么?這里我們直接將model作為參數傳遞給View層了。

　　步驟 5 創建視圖

　　我們將鼠標移到Index 這個方法上，然后右擊鼠標，在彈出的菜單中選擇“增加視圖”,這就會顯示如下圖的菜單，我們保持視圖的名為Index不變，但選擇”創建強類型視圖”的復選框，并且在下拉框中選擇Web.Models.Product作為返回填充的模型類。然后點“選擇master模版頁”的復選框，選/Views/Shared/Site.Master作為我們的模版頁。

　　完成后，會在Views目錄下多了一個名為Products的子目錄和一個Index.aspx 的文件。打開Index.aspx文件的代碼，觀察@Page的部分，由于我們是要在頁面中獲得產品記錄的一個集合再呈現出來，因此需要這里修改一下，修改為：

　　接下來的工作就簡單了，我們就設計HTML的表格頭，如下所示：

　　接下來就是遍歷獲得的數據集合了，可以使用foreach去實現。其中注意學習String.Format的用法，它在這里格式化了單價，而對于如果產品沒折扣的話則，折扣列不顯示任何東西，而如果是有折扣的話則顯示一張小圖片。最后，我們通過www.yoursite.com/Products 或者www.yoursite.com/Products/Index就可以看到我們簡單的從數據庫表中展示的數據記錄了。

　　在接下來的幾講中，將會教大家如何對表格功能進行優化，比如增加排序，分頁，篩選等功能，請密切期待。