2013年10月6日 星期日

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

image

jQuery EasyUI – DataGrid

image

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

 

Step.1

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

image

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

image

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

image

 

Step.2

建立 CategoryController 與 Index View Page

image

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

image

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

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

image

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

 

Step.3

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

image

total, 為全部資料數。

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

後端的程式內容如下:

image

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

image

 

Step.4

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

image

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

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

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

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

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

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

 

執行結果:

image

 


簡單示範 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 的程式學習筆記」之外的網站,都屬於盜文行為。

 

以上

5 則留言:

  1. Kevin大您好,我在實作這一篇大作時,無論是用 IE 或 chrome,回傳的畫面都是 JSON Code,而非 EasyUI 元件秀資料,
    不知此篇是否有 Source Code 可以取得讓小弟自行觀看學習,感謝!

    回覆刪除
    回覆
    1. 原始碼不知道跑到哪裡去了,程式就是文章裡所有圖片裡所出現的內容,
      請檢查一下你輸出 JSON 的 Content-Type
      另外就是請檢查 jQuery EasyUI 是否正確載入 JS 與 CSS
      已經一段時間沒用 jQuery EasyUI 了,所以我也不知道目前版本是否有無更改
      如果有問題的話,也可以直接跟 jQuery EasyUI 反映.

      刪除
  2. Kevin老師你好,STEP3 後端產生前端 jQuery EasyUI DataGrid 所需要的 JSON 資料,如何生成,用和工具。

    回覆刪除
    回覆
    1. 這是用 Json.Net 喔,官網連結在下面喔
      http://www.newtonsoft.com/json

      刪除
    2. 我後來發現到你應該問的是瀏覽裡面顯示 JSON 資料的工具
      JSON 資料是用 Json.Net 所產生,怎麼生成與用的話,你就看 Json.Net 的官網文件,網路上有很多文章介紹,
      不過你還是要先瞭解什麼是 Json 文件
      另外工具的話,每個瀏覽器的套件都不盡相同,IE 的話應該是沒有所謂的套件,
      這篇文章所用的是 Firefox 瀏覽器
      檢視每次 Request 內容所用的套件是 Firebug
      http://getfirebug.com/
      檢視 Json 資料的套件有很多, 我用的應該是 JSONView
      http://jsonview.com/
      JSONView 也有 Chrome 的 extensions

      刪除

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。