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