[添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid
[1] [添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid
[2] [添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid
[3] [添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid
[4] [添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid
[5] [添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid
[6] [添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid
[7] [添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid
[8] [添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid
[2] [添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid
[3] [添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid
[4] [添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid
[5] [添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid
[6] [添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid
[7] [添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid
[8] [添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid
前面幾篇文章分別介紹了用ExtJs+WCF+LINQ實現分頁,排序,跨域查詢等基本功能,本文便對上面的Grid進行進一步擴展。新擴展的Grid將包括以下功能:
- 分頁功能
- 遠程排序功能
- 添加新紀錄功能
- 批量刪除功能
- 批量更新功能
并且,如題目中介紹一致,這個全功能Grid結合了下面幾種技術:
- WCF,而且采用Web Model方式。
- ExtJs
- LINQ
這三種都是比較新的技術,尤其是完全采用Rest方式使得ExtJS與WCF進行比較復雜的交互,這個環節實現原理非常簡單,就是采用JSON格式在前后臺交互數據,但涉及到的細節還是比較多的。LINQ雖然很火,被人說得神乎其神,使用起來也是有諸多要注意的環節。ExtJS中有關UI的細節也存在不少,總結一下,本文中主要解決了如下幾條難題:
涉及到ExtJs的包括如下幾點:
- 在ExtJs的Grid中格式化時間顯示問題
- 在ExtJs中添加自定義控件列問題
- 設定ExtJs中列主鍵的問題
- 將Ext.data.Record數組格式化成JSON字符串問題
- 用Ext.util.JSON.encode序列化javascirpt對象中有中文時候的亂碼問題
- 在ExtJs中提交的時候顯示進度條的問題
- 在對Grid進行多次編輯后,如何取得編輯和數據項的問題
涉及到WCF的包括如下幾點:
- 如何返回能用于ExtJs中Grid分頁顯示的數據契約對象集合。
- 如何返回原始數據格式的數據(原始數據格式極大的提高了WCF的靈活度,為上傳下載,跨域等問題提供了保證)
- 如何獲取通過POST方式傳遞的復雜數據。
- 如何將客戶端傳遞過來的JSON字符串序列化為數據契約的對象
涉及到LINQ的包括如下幾點
- 如何實現數據的分頁查詢
- 如何動態的對數據字段進行排序
- 如何添加數據
- 如何批量刪除數據
- 如何批量更新數據,批量更新數據遇到并發沖突的時候,如何解決。
上面這些問題,在本文所實現的實例項目中均有所體現。而且實現本文這個項目實例,還需要注意如下幾點:
- 因為本文沒有涉及到級聯關系,為了添加,修改,刪除等操作成功進行,需要將示例數據庫AdventureWorks中數據表Product中的全部關系刪除
-
因為在ExtJs與WCF交互中, DataContractJsonSerializer不支持DateTime的序列化,查閱了一下MSDN,不是DataContractJsonSerializer不支持序列化DateTime,它能夠與Asp.Net Ajax之間對DateTime數據進行交互,但經過試驗對ExtJs卻不行,看了一下,好像應該是缺少轉義字符的原因。試圖反格式化Ext.util.JSON.encode后產生的JSON字符串會產生如下的異常:
所以本文實例中將數據契約Product中的DateTime類型均轉換為了String類型
- 經過第二步的處理之后,利用LINQ對數據進行更新卻說什么也不能成功了,總是有數據并發的問題,解決辦法是設置Product中的這幾個字段的UpdateCheck=UpdateCheck.Never
全站熱搜