下面,讓我進行簡單的分析。首先,我保存了當前的列表中選定項的索引值與當前項。然後,我在當前位置刪除該項;之後,在一個較低位置(上一個索引值減1)重新插入該項。這裡的邏輯非常簡單,那麼為什麼我還要說明這個問題呢?
借助於這種常規的ASP.Net編程方法,Web表單上面的重排序按鈕將會引發一個實現ListBox中重排序的服務器端事件。這是由一個到服務器的回寄觸發的;因此,這個回寄可能是一次“繁重的”往返,具體要信賴於表單上的具體內容及因特網速度。
然而,因為這一代碼實現的是一個標准ASP.NET回寄過程,所以由ASP.Net使用它的VIEwState機制來負責狀態處理。當再次生成頁面時,列表框內容按要求的順序正確生成。
當然,你也可以使用與此相同的常規方式在ListMover控件中重新創建這個功能。篇幅所限,我在此省略,只好留待讀者您來實現。這個Web表單上包含一對ListBox,還有一些指示從左向右或從右向左移動的按鈕。這些按鈕的服務器端事件將從一個ListBox中提取選擇的項,然後把它添加到另一個列表中;反之亦然。如在剛才的例子中所展示的,VIEwState在此能夠完好工作以保持這兩個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屬性的內容,而是由你依賴的這個屬性負責狀態存儲。現在,你可能會為難了。但是別擔心—我有一個解決方案。現在,讓我們開始使用必要的客戶端腳本代碼來開發該控件來實現每一個子控件所需要的功能。然後,我將向你展示如何使它與服務器代碼保持重新同步。
五、 EnhancedListBox控件
在這個控件中,你要把兩部分內容添加到現有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中的生成內容,而這是不可取的。因此,我想借助於一些小技巧來實現。
六、 代碼注入
我的方案是,以一個標准生成控件方式來繪制這個控件,其中包括table標簽以及該標簽與我添加的按鈕的生成方式等。當我編寫生成顯示部分時,也就是在我想注入繼承的原始的ListBox的地方,我調用了base.Render方法。這將把微軟為ListBox控件編寫的所有代碼注入到我試圖繪制的Html部分(見源碼中的列表1)。下列表格1中列出的屬性決定了這部分代碼的外觀與行為。在本文中,我沒有列出相應的屬性代碼,但是你可以在下載源代碼中找到。注意,在代碼中,你要生成的按鈕將導致一個回寄(基於屬性ReorderButtonPostback的值);而對接口IPostBackEventHandler的實現將捕獲這個回寄。
表格1:EnhancedListBox屬性
圖1.EnhancedListBox控件讓用戶重排序一個列表中的項。