詳解ASP.NET ListBox控件
下面，我想向你展示如何把剛才描述的這些例子中所用的單個控件放到一個Web表單上。你可能猜出，我將向你展示如何把這兩個例子中的功能封裝到它們自己的一個Web控件中。借助于與在常規方法示例中描述的相同的服務器端事件模型，我們可以把所有的行為封裝到每一個控件中來實現必要的功能。既然每一個控件都能夠控制它自己的狀態，那么包含它們的Web表單不必要做任何額外的工作。
到目前為止，一切順利。你可能問：“問題在哪里？”很好，假定頁面開發者在含有大量內容的頁面上使用這兩個控件，而且每當發生一次重排序或移動，都需要到服務器端的重回寄時，這顯然不是一個高效的Web站點要實現的。這正是使用一些JavaScript的原因。
在本例中，你要使用JavaScript代碼來存取EnhancedListBox控件中ListBox的內容以便在客戶端進行重排序。
在ListMover控件中，JavaScript代碼將把項從一個列表移動到另一個列表。其最終結果是一樣的，但是不需要進行服務器來回傳送，因為不需要觸發任何回寄。這樣以來，你就可以解決即時響應和不需要回饋的問題。
ASP.net在服務器端生成內容與在客戶端生成內容之間有明顯的界定。事實上，大部分情況下，這兩部分沒有關系；因此，問題出現了。其實，一個Web控件只是一個服務器端組件，它負責把HTML生成到瀏覽器端。的確，標準ASP.NET ListBox控件正是以HTML形式生成一個ListBox（作為一個< select>標簽）。
在< select>標簽中的< option>子標簽可以使用ListBox控件中的Item屬性的內容來創建。Item屬性在服務器端被填充，而其內容有助于在生成期間構建適當的HTML。這非常類似于生成一個< input>標簽的文本框Web控件，而它的Text屬性映射到< input>標簽的Value屬性。每當觸發一個到服務器的頁面回寄時，ListBox控件的Item屬性都被保存到ViewState中，并且在重新生成頁面前從ViewState中進行重建。
在EnhancedListBox中進行重排序或在服務器端的ListMover中移動項都非常直接，并且允許支持正常的內置的ViewState機制而不需要我們作任何干擾。但是，當你使用客戶端JavaScript添加這一能力來實現它們的功能時，它將破壞ViewState。這些控件并不再轉回到服務器端，所以Item集合屬性永遠不會被保存以便在重新生成時被重載。代之的是，直接在HTML級別上存取生成的< select>標簽中的< option>項。你可以借助JavaScript代碼移動或重排序控件項；但是，當在頁面上再次發生回寄時，你猜發生了什么？在移動（或重排序）開始前，控件的列表項就恢復它們的狀態。
我說過，如果功能發生在回寄期間的服務器端，那么，ViewState被保存并且被良好重載，從而使Item集合正確填充。但是，既然你的最終目標是在客戶端實現這個功能，那么你就不再需要重新調整Item屬性的內容，而是由你依賴的這個屬性負責狀態存儲。現在，你可能會為難了。但是別擔心—我有一個解決方案。現在，讓我們開始使用必要的客戶端腳本代碼來開發該控件來實現每一個子控件所需要的功能。然后，我將向你展示如何使它與服務器代碼保持重新同步。
在這個控件中，你要把兩部分內容添加到現有ASP.NET ListBox控件。首先，添加一個頭部—把一個標簽放到一個ListBox的上方。然后，把兩個按鈕添加到ListBox—分別用于向下和向上重排序。
注意 為了簡單起見，我在后面所有的代碼描述中省略所有的屬性部分。
現在，創建一個繼承自ListBox控件的新類，如下所示：
- using System.Web.UI;
- using System.Web.UI.WebControls;
- public class EnhancedListBox : ListBox
- {}
如果你編譯這部分代碼并且把該控件添加到你的工具箱中，那么你將有一個完整功能的ASP.NET ListBox控件副本。我把這個控件作為一個繼承控件開發，是因為我想使它具有一個ASP.NET ListBox控件的“占位符”的作用。以后，我再添加其它的屬性以實現頭部的可見性并支持重排序按鈕的打開或關閉。當這些屬性全部關閉時，這些控件將在外觀與行為上與一個常規ListBox控件一樣。然而，你不能使用一個重載的CreateChildControls把控件添加到其上，因為這個函數是用來構建一個控件層次樹的。這個ASP.NET ListBox控件被編寫為一個生成控件而且直接把它的所有HTML內容繪制到生成引擎；這樣以來，你需要在此處“注入”你的內容。你將使用生成控件方法來構建一個標簽和兩個按鈕，并且通過重載Render方法來生成它們。然而，一旦你重載這個方法，你就完全取消了所有的在原始ListBox中的生成內容，而這是不可取的。因此，我想借助于一些小技巧來實現。
【編輯推薦】
