ASP.NET MVC 使用 jQuery EasyUI DataGrid 基礎篇

ASP.NET MVC 不像 ASP.NET WebForm 有提供現成的 Server Controls 可以使用，例如在 ASP.NET WebForm 最常拿來使用的就是 GridView，ASP.NET MVC 沒有 Server Controls 可以使用的這一點在很多 ASP.NET WebForm 開發人員被視為一種阻礙，但我會覺得這並不是一種阻礙反而是一種解放，Server Controls 是 ASP.NET WebForm 的一大重點，會用 Server Controls 是學習 ASP.NET WebForm 的基礎，學好怎麼使用 Server Controls 對於開發 ASP.NET WebForm Application 來說是有很大的幫助，但是 Server Controls 也是限制開發的一個阻礙。

現在這麼多網頁開發技術裡，大部分並不像 ASP.NET WebForm 是有所謂的 Server Controls  來支援開發，因為大部分的開發都是使用 HTML 與前端技術來組成網頁裡所呈現的內容，因為使用相同的前端技術，只是後端資料處理的方式有所不同而已，所以前端網頁所呈現內容的組成方式就可以在不同的網頁開發技術裡使用，所以不管是 JSP, PHP, Ruby on Rails 都可以使用相同的技術來建立網頁呈現內容，而 ASP.NET MVC 也一樣可以使用而不會受到 Server Controls 的限制。

這篇文章介紹如何在 ASP.NET MVC 裡使用 jQuery EasyUI DataGrid，其容易設定、清楚的說明文件還有很多不同使用情境的範例說明，適合用於將資料以表格呈現的情境。

 

---

聲明：本文章如果出現在「mrkt 的程式學習筆記」之外的網站，都屬於盜文行為。

 

jQuery EasyUI

首頁 http://www.jeasyui.com/index.php

Demo http://www.jeasyui.com/demo/main/index.php

Tutorial http://www.jeasyui.com/tutorial/index.php

Documentation http://www.jeasyui.com/documentation/index.php

jQuery EasyUI – DataGrid

DataGrid 的一些基礎使用與設定方式就不在這邊一一解釋，可以參閱 Documentation 裡的說明，以下將會示範在 ASP.NET MVC 裡的基礎使用情況。

 

Step.1

將 jQuery EasyUI 下載並加入到 ASP.NET MVC 網站專案裡，到「jQuery EasyUI - Download」裡下載最新版的檔案，目前最新版本為「1.3.4」

在 VS2012 開啟一個 ASP.NET MVC 網站專案，加入 LocalDB 並且建立 Northwind Database 內容，

接著在 ~/Content 目錄裡建立「easyui」子目錄，然後將下載的 jQuery EasyUI 壓縮檔內容加入到 ~/Content/easyui 目錄下，

 

Step.2

建立 CategoryController 與 Index View Page

修改 ~/Views/Shared/_Layout.cshtml 內容，加入「styles」section，

註：Project Template 是使用「ASP..NET MVC 4 Bootstrap Layout Template (VS2012)」，可參閱下文章的說明「使用 ASP.NET MVC 4 Bootstrap Layout Template (VS2012)」. 

接著在 ~/Views/Category/Index.cshtml 加入以下的內容，

增加 styles section，並且加入 easyui.css 的檔案引用，增加 scripts section，加入 jquery.easyui.min.js 的檔案引用，檢視頁面裡加入 table，其 id 為 DataGrid，稍後的步驟裡將會對這個 table 進行操作。

 

Step.3

後端產生前端 jQuery EasyUI DataGrid 所需要的 JSON 資料，JSON 資料的格式如下：

total, 為全部資料數。

rows, 顯示的資料內容，分別欄位名稱與欄位資料。

後端的程式內容如下：

這邊使用了 JSON.NET 來組成 JSON 資料裡 rows 的內容，這個 GetGridJSON 方法所產出的 JSON 內容如下：

 

Step.4

建立好後端產出 DataGrid 所要使用的 JSON 資料後，接著就是在前端 Javascript 程式裡加入 DataGrid 的設定，

title: DataGrid 上方顯示的標題內容。

url：DataGrid 顯示資料的來源位置。

width, height：DataGrid 顯示的寬度與高度。

rownumbers：DataGrid 是否顯示行號，如果不加入此設定則預設為 false，預設為不顯示行號。

columns：DataGrid 顯示的欄位內容，field 是對應資料來源的 JSON 裡 rows 內的資料欄位名稱，而 title 是設定 DataGrid 欄位所顯示的文字，如果 columns 裡沒有指定欄位寬度的話，將依據顯示資料來決定欄位寬度，但這會影響前端的執行效能。

詳細的 DataGrid 與 Columns 設定內容可以參考 Documentation 的說明。

 

執行結果：

 

---

簡單示範 ASP.NET MVC 使用 jQuery EasyUI DataGrid 顯示資料的操作，當然 jQuery EasyUI DataGrid 的功能不止上面所顯示的內容而已，接下來將會在後續的文章裡繼續介紹。

之前有人問我之前所發佈的「ASP.NET MVC 4 + jQuery EasyUI Tree and TreeGrid」所使用的 jQuery EasyUI TreeGrid 怎麼沒有在「ASP.net MVC 4 網站開發美學」這本書裡做介紹？

首先我不是作者，所以我無法對於「ASP.net MVC 4 網站開發美學」怎麼不介紹 TreeGrid 的這一點去做任何解釋，再來就是 ASP.NET MVC 並沒有限定或是特別支援哪一種前端 UI 的開發技術，開發人員可以選擇使用 jQuery UI 或 Ext.JS 或 Telerik Kendo UI 等技術來建立前端網頁所呈現的內容，就如同我前面所說的，ASP.NET MVC 沒有 Server Controls 的限制，所以可以自由選擇前端開發技術，只要開發人員可以充分掌握 HTML 與 Javascript 等前端開發技術，如此就不用限制於某一種前端框架裡，所以看到 PHP JSP RoR 等所開發的網站其前端網頁所使用的技術也可以拿到 ASP.NET MVC 來使用。

 

聲明：本文章如果出現在「mrkt 的程式學習筆記」之外的網站，都屬於盜文行為。

 

以上