公司一直在做WebForm軟件,所以經(jīng)常要?jiǎng)?chuàng)建新頁面來完成某些功能,如數(shù)據(jù)的增刪改查等.對(duì)于單據(jù)頁面,大家一定不陌生.

　　可能最常見的場景就是一個(gè)列表頁面+一個(gè)單據(jù)頁面,列表頁面使用網(wǎng)格控件展示批量數(shù)據(jù),單據(jù)頁面用來展示單條數(shù)據(jù),并同時(shí)可新增和編輯.

　　對(duì)于單據(jù)頁面,可能最常見的實(shí)現(xiàn)方法就是使用微軟的控件,拖來拖去.但隨之而來的問題,就是需求不斷變化,可能需要維護(hù)的字段不斷增加和刪改,這樣就要頻繁的修改這個(gè)頁面,增加或刪除某些控件,取值和賦值代碼也要一并修改.

　　要說麻煩,其實(shí)也簡單,就是控件拖來拖去的事情,要說簡單,也挺繁瑣,字段只要發(fā)生變化,就要修改一次.

　　我使用過PowerBuilder開發(fā)工具,里面的數(shù)據(jù)窗口功能確實(shí)很強(qiáng)大,它不必關(guān)注加載哪個(gè)具體數(shù)據(jù)窗口,因?yàn)樗峁┮徽兹绾稳≈?賦值及UI交互的方法.那我們可不可以移植到WebForm里呢?后來發(fā)現(xiàn)Panel控件與PowerBuilder中的數(shù)據(jù)窗口功能很接近,但它只是一個(gè)容器,不提供任何方法.好,我們對(duì)此控件進(jìn)行打造.

　　首先要可以加載控件,使用Panel.Controls屬性,動(dòng)態(tài)加載控件即可,這里我們先看一控件是如何存儲(chǔ)的?我設(shè)計(jì)了一個(gè)表,如圖-1所示

圖-1

　　部分字段說明:

　　編碼類型和名稱 下拉菜單,CheckBoxList,RadioButtonList等控件數(shù)據(jù)源使用.

　　數(shù)據(jù)列名稱 下拉菜單DataValueField屬性值

　　顯示列名稱 下拉菜單DataTextField屬性值

　　樣式布局 針對(duì)RadioButtonList/CheckBoxList控件使用,設(shè)置布局,水平和欄目個(gè)數(shù)

　　下面看一個(gè)示例,如圖-2所示

圖-2

　　我們?cè)倏匆幌赂鶕?jù)這些控件數(shù)據(jù)生成的效果圖,如圖-3所示.嘿嘿,界面丑了點(diǎn)!這里我們可以使用一個(gè)HtmlTable來布局控件,代碼在附件的文件中直接下載就可以了.

圖-3

　　 其次,控件還要觸發(fā)事件,前臺(tái)事件我們通過Control.Addtibutes.Add方式增加即可,后臺(tái)事件可以通過委托實(shí)現(xiàn).這里要講一下前臺(tái)事件的注冊(cè),我是在封裝Panel控件時(shí),增加一個(gè)客戶端事件的屬性,如圖-4所示. 這里要再說明下,屬性上方的這些自定義屬性,每個(gè)屬性都有它的含義,有興趣的朋友可以查閱相關(guān)資料,以后我們自己就可以把控件封裝成微軟的那種控件,豈不是很方便哈?

圖-4

　　其中WebPanelClientEvents類成員如圖-5所示

圖-5

如何調(diào)用呢?如圖-6所示

圖-6

　　然后在創(chuàng)建控件時(shí),根據(jù)控件編輯類型加載不同的客戶端事件即可,代碼片斷如圖-7所示

圖-7

　　 OK,到目前為止,將控件如何動(dòng)態(tài)加載到前臺(tái)的功能已經(jīng)實(shí)現(xiàn),接下來,我們?cè)倏纯催€有什么功能可以實(shí)現(xiàn).控件展示出來了,自然要對(duì)控件取值和賦值.

　　其實(shí)我們?cè)诩虞d數(shù)據(jù)過程中,可以將TextBox,DropDownList或RadioButtonList這樣編輯類型的控件記錄下來,然后在后臺(tái)注冊(cè)一個(gè)HiddenField控件,將控件列表存在里面,供前臺(tái)獲取Panel內(nèi)控件值時(shí)使用.我的實(shí)現(xiàn)方式如圖-8所示

圖-8

　　將控件名稱和編輯類型保存在Dictionary<string,string>數(shù)據(jù)類型,然后轉(zhuǎn)成json格式字符串,保存在HiddenField控件里,前臺(tái)調(diào)用時(shí),可直接將json格式字符串轉(zhuǎn)為Object對(duì)象使用,收集完控件值以后,可以將控件值轉(zhuǎn)為json格式字符串交由后臺(tái)處理即可

　　賦值操作相對(duì)簡單些,可以在動(dòng)態(tài)創(chuàng)建控件時(shí),直接賦值,也可以在前臺(tái)根據(jù)控件列表賦值均可.圖-9是下拉菜單觸發(fā)onchange事件的例子,就是所有的下拉菜單控件的change客戶端事件均調(diào)用此方法,通過參數(shù)as_dropdownlistid區(qū)分是哪個(gè)控件觸發(fā)

圖-9

　　至此,一個(gè)仿DataWindow控件的WebPanel控件誕生了,最基本的數(shù)據(jù)展現(xiàn),取值賦值都沒問題的,某些功能,大家還可以自行擴(kuò)展.