2010年3月10日

[ASPNET] 動態更新 Gridview 上的資料

前陣子坎尼在 MSDN 論譠上看到有人問
「如何每10秒刷新一次資料?」
今天就抽個空寫了個範例來介紹一下如何動態刷新頁面上的資料

I. 流程說明

此次的流程很簡單:
Gridview 顯示資料 –> 使用者修改資料 –> Gridview 刷新資料
當然,是以 AJAX 做為 Client-side 及 Server-side 的溝通橋梁

為了呈現方便,坎尼用了 iframe 分別讀入資料修改頁及呈現頁
dgd01資料部分在此次範例中是以 xml 檔來存取資料
資料欄位含有:ID(唯一值)、Name 及 Age
dgd02
明顯地,這是人蛇集團的童工目錄

II. 程式說明

Gridview 的呈現和資料的修改坎尼就不贅述

最主要的是下列這段 Javascript
可針對每個 Table Row 進行取 ID 的動作,並透過 AJAX 到後端取資料
dgd03取得資料的部份 Code
dgd04 
以下為實際執行畫面
Kenny 謊報年齡所以偷偷的進系統修改
dgd05 在人蛇集團還沒發現之前,身份證上的年齡還是假造的
dgd06 被發現了,所以拿到一張新的身份證繼續行騙
dgd07
換頁之後一樣可以做部分更新 (注意 ID 一定要是唯一值)
dgd08
如何,很簡單吧 :P

III. 結論

其實以現在的開發語言而言,很多問題都已經不是無解或難解
重點是如何將習得的技術拼湊起來,成為新的應用 :)

此次的 範例下載
2012/6/7 調整

10 則留言:

Unknown 提到...

var items = $("#GridView1 tr:not(:first)") 的目的是把該 GridView 中所有的 tr,除了 header 以外,存入 items 變數嘛?

最後兩行可以一口氣更新 css 和 text 真是太方便啦,忘記這個機制在 programming language 理論裡面叫什麼了 ... 什麼 chaining 之類的 XD

最後歡迎砍尼歸隊阿 :D

坎尼 提到...

<( ̄口  ̄) 隊長,我歸隊了!

var items = $("#GridView1 tr:not(:first)") 的確是省卻了 header 的 tr 區間,Tim 果真是冰雪聰明

另外把東西通通串在一起在 jQuery 就是叫 chain
所以術語應該是 chainning 才對

Unknown 提到...

不好意思 坎尼大大
能否向您要這篇的範例呢?
剛好在找gridview直接修改xml資料
感覺你用了iframe畫面好讚
範例下載的點掛掉了,能否跟你要一下
jason_chen@harmonation.com.tw
願您能割愛啊~!!小弟感激不盡

坎尼 提到...

hi jan,

文中的範例檔案已更新
可直接點擊連結下載

之前用的網路空間最近被停了
如果還有遇到不能下載的情況,請反應給坎尼 :)

Unknown 提到...

當然嘍!!有這麼好的文章怎能不推一下呢

另外我想問一個小問題,就是我的xml沒有id
我自定了一個欄位來自動產生序號
那我該如何以此序號來當作id來編輯選定的資料列?
(因為xml裡找不到唯一值可以當id)
在DropDownList我一直取不到自動產生的序號

錯誤訊息:
DataBinding:'System.Data.DataRowView' 沒有包含名為ID的屬性

坎尼 提到...

1. 自動產生的序號也在 xml 裡?
2. 或是 Gridview 繫結之後再去產生該流水序號?

第一個情形,請確定欄位名稱,我猜應該不是用 ID 當作欄位名

第二個情形,兩邊要互動,除非產生流水號的時候,會另外再有個 ID 參照的資料來源(xml),可以想像成 Weak Entity 的情況,再去著手解決方法 :)

Unknown 提到...

是第二情形Gridview繫結後我產生流水號
但我只有一個xml檔
如果再建一個xml給id的話...
1.我不知道id我要建多少個才好
2.我不會一個Gridview顯示2個不同的xml欄位
詳細的略圖如下:
http://tw.knowledge.yahoo.com/question/question?qid=1510080704144&mode=w&from=question&recommend=0&.crumb=HNrDRyr/f5U
我在知識+發問了><

Unknown 提到...

hi 坎尼大大,不好意思,能不能跟你要
DynamicGridviewData.dll
這支檔案的原始文件?
小弟太菜了,只能參考您的範例
但是我又不會讀dll的二進位碼
只好向您求助><::我的mail
jason_chen@harmonation.com.tw
如果您願意的話...真的抱歉嘿.一直來留言吵你

Migi 提到...

您好:
可否請您再度提供範例下載,謝謝。

坎尼 提到...

Hi MiGi,
文中範例已經更新

由於之前的範例資料已遺失,新的範例檔是坎尼憑文章中的抓圖+印象寫成的,多多少少會有差異,有問題請再回報 :)

Google Spreadsheet 裡用規則運算式

最近因為工作關係,遇到要用 Google Form 及 Google Sheet 所以研究了 Google Sheet 裡的一些 function 怎麼用 首先,分享一下如何在 Google Sheet 裡用規則運算 :D