C#+ASP.NET 2.0定製複合組件之基礎篇

摘要：在本系列文章中，我們首先討論使用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中的項。