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

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

　　三、 目的

　　下面，我想向你展示如何把剛才描述的這些例子中所用的單個控制項放到一個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屬性

屬性名稱	類別
UpButtonCaption	Appearance
DownButtonCaption	Appearance
ShowReorderButtons	Appearance
ShowHeading	Appearance
HeadingCaption	Appearance
ReorderButtonPostBack	Behavior
SideButtonWidth	Layout
SideButtonHeight	Layout
SideButtonVerticalAlign	Layout
ReorderButtonSide	Layout
UpButtonStyle	Styles
DownButtonStyle	Styles
ListBoxStyle	Styles
HeadingStyles	Styles

　　現在，既然該控制項已經看上去如你希望的樣式(見圖1)，那麼你可以讓該按鈕多負責一些工作而不是僅引發一個回寄。最終的產品中包含事件處理代碼；這部分代碼位於介面IPostBackEventHandler的實現中，這樣以來事件能夠被有選擇地向伺服器激發，而另一方面開發人員也可以在此處加入更多的代碼。但是記住，你要使用這些按鈕來重排序ListBox中的項，並且希望在不執行回寄的情況下實現這一功能。現在，我們開始分析最有趣的部分。

圖1.EnhancedListBox控制項讓使用者重排序一個列表中的項。