摘要:在本系列文章中,我們首先討論使用ASP.NET 2.0構建一個標准 ListBox控件的增強版本(EnhancedListBox)。這個控件能夠對它的項進行重排 序,並且能夠實現客戶端與服務器端的同步功能。然後,我們把這樣的兩個控件 組合起來創建一個復合控件(ListMover)。
一、引言
構建提供豐富的客戶端接口的復雜Web控件經常需要把一些客戶端JavaScript 代碼與控件的服務器端代碼集成到一起。然而,在一些情況下,為了達到某種巧 妙的效果而把問題搞得過於復雜經常會破壞控件的內部服務器代碼與生成的客戶 端HTML代碼之間的數據同步,而當進行頁面回寄時這將成為一個問題。在本文中 ,我將首先構建兩個“很酷”的Web控件(都極容易導致這一問題),然後向你 展示如何來修改這一“脆弱性”。
本文中,我們將使用C#+ASP.NET 2.0來定制這些控件,並在後面向你簡短介 紹如何使之工作在ASP.NET 1.1(或1.0)環境中。
當前,HTML仍然保持為Web應用程序生成階段的主要語言。遺憾的是,它所使 用的協議是無狀態的,所以必須由Web開發者自己來處理這種無狀態特點。通過 使用一些架構特征,例如回寄機制和ViewState變量,ASP.NET有助於處理這個問 題。然而,為了實現某些功能,還需要再作努力,從而借助於回寄事件把Web頁 面不斷向服務器發出請求的各種技術結合起來。
具體地說,我將分析如何使用JavaScript和DHTML存取在客戶端生成的元素。 其實,把客戶端和服務器功能融合到一起要求使用大量的技巧才能達到最佳用戶 體驗效果,而微軟在其ASP.NET校驗控件中就實現了這一點。為了提供一種豐富 的客戶端校驗效果,該控件中使用了大量的JavaScript。
作者注:本文假定你對定制Web控件開發有一個基本了解。因此,我將不再重 復Web控件開發的基礎內容,例如屬性工作原理與風格的添加方式。
二、一種常規實現方法
下面,我想向你展示如何構建一組很酷的控件,它們具有你在商業控件中才 能看到的優秀功能。稍後,我將繼續展示定制Web控件帶給Web編程的完全封裝優 點。既然你已經了解如何開發定制Web控件,那麼你應該知道的一個概念是封裝 一個控件所有的功能和行為(就象你在一個標准業務對象中所實現的那樣)。在 學習構建具有復雜行為的控件時,這種封裝將極有用處。
在第一個控件中,我將向你展示如何構建一個稱為EnhancedListBox的控件。 這個控件將擴展ASP.NET的ListBox控件—添加一個頭部和一些重排序按鈕。注意 ,這是一個直接繼承自常規ListBox的控件。
之後,我還將向你展示如何構建一個復合控件—ListMover,它將包含兩個上 面提到的EnhancedListBox控件。這個ListMover控件還包含一些允許你從一個列 表到另一個列表中移動項的按鈕。
其實,用常規方法(非面向Web控件的)來實現這種ASP.NET功能也並不困難。 首先,你要把一個常規ListBox控件拖動到你的Web表單上並且使用一些數據填充 它。
然後,再添加一個標簽用作標題,還有一組按鈕用作重排序按鈕。捕獲這些 按鈕的服務器端事件是ASP.NET中的標准操作;因此,你只需要使用一種方法來 取得當前選定的項並且根據用戶點擊的按鈕從而把它放到該列表中的更高或更低 的位置即可。例如,你可能編寫如下的代碼實現移動列表中的一項。
i_Index = ListBox1.SelectedIndex;
o_Item = ListBox1.SelectedItem;
ListBox1.Items.RemoveAt(this.SelectedIndex);
i_Index--;
if(i_Index < 0) i_Index = 0;
ListBox1.Items.Insert(i_Index, o_Item);
下面,讓我進行簡單的分析。首先,我保存了當前的列表中選定項的索引值 與當前項。然後,我在當前位置刪除該項;之後,在一個較低位置(上一個索引 值減1)重新插入該項。這裡的邏輯非常簡單,那麼為什麼我還要說明這個問題 呢?
借助於這種常規的ASP.NET編程方法,Web表單上面的重排序按鈕將會引發一 個實現ListBox中重排序的服務器端事件。這是由一個到服務器的回寄觸發的; 因此,這個回寄可能是一次“繁重的”往返,具體要信賴於表單上的具體內容及 因特網速度。
然而,因為這一代碼實現的是一個標准ASP.NET回寄過程,所以由ASP.NET使 用它的ViewState機制來負責狀態處理。當再次生成頁面時,列表框內容按要求 的順序正確生成。
當然,你也可以使用與此相同的常規方式在ListMover控件中重新創建這個功 能。篇幅所限,我在此省略,只好留待讀者您來實現。這個Web表單上包含一對 ListBox,還有一些指示從左向右或從右向左移動的按鈕。這些按鈕的服務器端 事件將從一個ListBox中提取選擇的項,然後把它添加到另一個列表中;反之亦 然。如在剛才的例子中所展示的,ViewState在此能夠完好工作以保持這兩個 ListBox中的項。