第5章EEP2015WEB進階設計第5章EEP2015WEB進階設計\5-5WebGridTextBox的用法

5-5WebGridTextBox的用法

 

 

WebGridTextBoxWebCheckBox的用法接近,都是為了讓User可以在WebGridView中不必一筆一筆去切換到編輯模式就可以直接更改欄位內容,也就是可以在瀏覽狀態下直接修改資料,並一次性存回Server端。兩者不同的是,WebGridTextBox是以TextBox的方式來呈現,WebCheckBox則只能用在Bit型態與CheckBox呈現方式的欄位元元件。我們就以W010來說明WebGridTextBox的應用實例,如下:

 

Step1打開W010,在WebGridView右上角的快捷鈕,執行「Edit Columns」,為了將Remark欄位改用WebGridTextBox,因此我們將「Remark」欄位轉為TemplateField。如下圖:

 

5-5-1 欄位轉為TemplateField

Step2在此TemplateField欄位中,將ItemTemplate上的元件換成WebGridTextBox元件(從ToolsBox中拖入WebGridTextBox元件)。在EditTemplate則可以不必更換。

5-5-2 換成WebGridTextBox元件

 

Step3因為剛剛貼入的WebGridTextBox並沒有綁定到任何欄位上的,我們對此WebGridTextBox作資料綁定的動作,我們將其綁定到「Remark」欄位上。

 


5-5-3 綁定Remark欄位

 

Step4WebGridTextBox的『DataField』指向【Remark】欄位,並將『MultiEditPostBack』設為【True】,代表要多筆編輯批次存回Server

5-5-4 設置WebGridTextBox屬性

 

Step5設定WebGridView的『AutoPostBackWebGridTextBox』為【True】,讓WebGridView知道其內有WebGridTextBox元件,並能在User編輯每一個WebGridViewCallBackServer上,而不會去更新目前的網頁,如圖設定:

 

5-5-5 開啟AutoPostBackWebGridTextBox屬性

 

WebCheckBox一樣,可以透過在WebNavigator上貼一個按鈕透過wgvMaster.PostBackMultiTextBoxes();WebDataSource.ApplyUpdate()來存檔。在此我們借用上一例的AllApply按鈕

 

Step6W010進行右鍵「Build Page」功能,並以InfoLogin右鍵的「View in Browser」來執行結果。如下,你可以編輯WebGridView的第一筆和第二筆的「Remark」欄位後,最後按下【AllApply】來批次存檔。

 

5-5-6 批次存檔

 

¨   WebGridTextBox的原理

當對此元件輸入資料後,會讓Client的網頁產生CallBack動作回Server上,系統會記錄在一個此此網頁同名的xml檔,存放已經被User更改的任何WebGridTextBox資料異動內容,當WebDataSource存檔後,Server才會以此xml內容去進行Apply工作,最後再將此XML檔案清空


 

Top of Page