ASP.NET 2.0移動開發之清單控制項

asp.net|控制項

　　概述

　　在很多情況下，我們都會使用到清單控制項來方便使用者選擇一些選項。例如在某網站上註冊新使用者時，通常會詢問你的性別是"男"還是"女"，這時我們用單項按鈕以供使用者做出相應的選擇。還有當你填寫自己的家庭地址時，通常會使用到一個包含各省省名的下拉式清單來供使用者直接選擇，這樣可以減少使用者的輸入量。上述的這些單項按鈕和下拉式清單都在ASP.NET移動程式中都是以清單控制項的形式存在的。我們可以使用清單控制項來呈現各種形式(單項、多選、下拉式清單)的列表，以供使用者選擇和使用。但是在ASP.NET 2.0移動開發套件中，只有三個清單控制項，分別為SelectionList 、List和ObjectList 控制項。雖然沒有ASP.NET 2.0中那麼多類型的清單控制項，但是我們卻可以使用SelectionList 、List和ObjectList這三個清單控制項實現單項、多選等幾乎所有的功能。在本系列文章中將探討這三個控制項的一些準系統和使用方法，並說明這三個控制項相似之處及異同點。

　　圖1是SelectionList 、List和ObjectList三個控制項在類的繼承上的關係：

圖1

　　上面的三個清單控制項中，SelectionList是最簡單的，但是它可以以各種不同的類型進行呈現，因此具有很大的靈活度，以供不同的需求使用應用的清單類型。同時因為SelectionList控制項不支援分頁功能，所以在包含多個清單項目的情況下，該控制項就顯得力不從心了。還有一點要需要重點說明的是，SelectionList是這三個清單控制項中唯一支援多選的。而且該控制項還可以以下拉式清單的形式進行呈現，也可以以單項和多選框的方式進行呈現，當然這種轉譯格式必須要被行動裝置上的瀏覽器所接受。在一些WML瀏覽器上，只支援一些特殊的呈現形式，例如單項和多選按鈕，並不支援下拉式清單這種呈現形式。圖2示範了下拉式清單在不同瀏覽器上呈現時所存在的差別。

圖2 在上圖所示的PocketIE瀏覽器上，清單控制項是以下拉式清單的形式呈現的。而在Openwave的WML瀏覽器上，下拉式清單類型的呈現形式是不支援的，為此在該瀏覽器中，是將列表中的各個清單項目顯示出來，供使用者進行相應的選擇。

　　List清單控制項支援分頁功能，這就意味著它支援清單項目較多的列表。它只可以以項目符號清單或編號清單的形式進行呈現(只要瀏覽器支援即可)。除了之外，其它的被SelectionList支援的列表形式(例如下拉式清單)，在List中均無法實現。圖3中List清單控制項就是以編號清單的形式呈現的，並且支援分頁功能。

圖3 List清單控制項以編號清單的形式呈現在頁面上，而且支援分頁功能。

　　在上述三個清單控制項中最複雜的當屬ObjectList 控制項了。SelectionList和List控制項允許你使用伺服器控制項文法靜態地聲明清單項目，但是ObjectList控制項是無法採用這種方式來添加清單項目的，你必須在ObjectLis清單控制項與相應的資料來源綁定後，再通過代碼將清單項目添加到列表中。ObjectList 控制項允許一個清單項目中同時顯示多個欄位，這是其它兩個控制項所不具備的，它們只允許每個清單項目只顯示一個欄位的資訊。除此之外，ObjectList 控制項中的每個清單項目還可以和多個命令相關聯，其它兩個控制項所不具備的功能。

圖4 ObjectList 控制項中，可以在每個清單項目中顯示多個欄位。這裡同時顯示了球隊名稱、輸、贏和積分等欄位。

圖5 每個清單項目可以和多個命令進行關聯，頁面下方的各個連結就是與清單項目關聯的命令，你可以選擇不同的命令，產生不同的操作

　　下表概括了上述三個控制項的主要功能：

能力	SelectionList	List	ObjectList
是否可以以下拉式清單、列表框、 單項或多選按鈕等類型在HTML瀏覽器上進行呈現	√
是否支援多選	√
以項目符號清單或編號清單的形式進行呈現		√
當列表包含較多的清單項目時，是否可以啟用分頁功能	√	√
是否可以通過伺服器文法聲明靜態地產生清單項目	√	√
是否可以與資料來源綁定	√	√	√
在一個清單項目中是否可以同時顯示多個欄位			√
在選擇一個清單項目後是否會觸發相應的事件	√(注釋)	√	√
每個清單項目是否可以自訂相關聯的命令			√
是否支援模板		√	√
注釋：SelectionList清單控制項在選擇一個清單項目後，其自身是無法自動產生一個回傳(postback)操作的。你必須在包含該SelectionList清單控制項的Form控制項上放置一個Command控制項，再由該Command控制項將因列表選項發生改變的資訊回傳到伺服器上，這樣ASP.NET運行時就可以根據這些資訊做出相應的處理，並將處理後的資訊返回到移動頁面上。

　　採用不同的方式構建列表

　　在開始探究每個清單控制項的具體用法時，我們首先來瞭解一下上述三個控制項的共同特性。SelectionList和List控制項允許開發人員定義靜態地定義各個清單項目，也就是我們可以在伺服器控制項文法中使用＜Item＞標籤，來定義每個清單項目對應的文本資訊和值資訊，而動態實現方式就是通過代碼，建立和列表中的每個清單項目對應的System.Web.UI.MobileControls.MobileListItem 對象，並將這些對象添加到清單控制項的Items集合中。由於每個清單項目都是預先設定好的，所有我們也稱這種列表為靜態列表。

　　還有一種方式就是將清單控制項與一個資料來源進行綁定，由於該清單控制項中的所有清單項目所需的文本資訊和值資訊都讀取自資料來源，因此這些清單項目都是根據這些資訊動態產生。注意，上述的三個清單控制項都支援資料繫結的方式動態地產生列表。

　　靜態列表的實現

　　前文提過，我們可以通過靜態方式實現列表。其實這種實現就是在伺服器控制項文法中使用＜Item＞標籤來設定每個清單項目所需的文本資訊和值資訊。下面我們來通過一段代碼來說明如何靜態地實現一個列表。程式清單1是一個SelectionList控制項的聲明，我們希望通過該清單控制項來選擇一個清單項目。在這裡我們將手機的品牌和型號分別作為清單項目的文本資訊和值資訊，你可以在每個＜Item＞標籤中使用Text屬性自動文本資訊，使用Value屬性指定值資訊。

　　程式清單1：

＜mobile:SelectionList id="SelectionList1" runat="server"＞
　＜Item Text="Dopoda" Value="P800" /＞
　＜Item Text="Motorola" Value="A1200" /＞
　＜Item Text="Nokia" Value="N70" /＞
　＜Item Text="Samsung" Value="E638" /＞
＜/mobile:SelectionList＞
　　我們將在"SelectionList清單控制項詳解"這一章中通過具體的執行個體來應用程式資訊清單1中的代碼，在這隻是簡要地介紹下實現靜態列表的方法。其實我們還可以以一種可視化的方式來實現靜態列表，當然這要依靠Visual Studio 2005開發環境的支援。在Visual Studio 2005中，提供了一個非常有用的屬性產生器，使得你可以很方便地定義一個靜態列表。只要你挑選清單控制項的智能標籤，而後再選擇"屬性產生器"連結，就會彈出"屬性產生器"對話方塊。我們可以通過該對話方塊以可視化的方式產生程式清單1中的代碼，如圖6所示。

　　圖6 我們可以在該對話方塊中通過"建立新項"按鈕來產生一個新的清單項目，而後在這個清單項目對應的"項文本"和"值"文字框處填寫好清單項目的文本資訊和值資訊，就建立好了一個清單項目。如果你要調整各個清單項目之間的次序，可以點擊上下箭頭按鈕來做出相應的調整。 在"屬性產生器"對話方塊的"常規"選項卡中，使用者可以挑選清單控制項在頁面上的呈現形式。例如SelectionList清單控制項支援下拉式清單、列表框、單項按鈕、複選按鈕和多重選擇清單方塊等幾種形式，開發人員可以根據實際的需要選擇合適的類型，如圖7所示。

　　ASP.NET運行時是通過下面所描述的方式來解析伺服器控制項文法中的各個清單項目的。在你使用靜態方式構建一個列表時，ASP.NET實際上是針對這個列表中的每個清單項目，都建立一個System.Mobile.UI.MobileControls.MobileListItem對象，並使用＜Item＞ 標籤中的Text和Value屬性指定的文本資訊和值資訊對相應的MobileListItem對象進行初始化，而後再將初始化後的MobileListItem對象添加到一個System.Mobile.UI.MobileControls.MobileListItemCollection集合對象中。我們可以在代碼中通過SelectionList或List類的Items屬性來訪問這個MobileListItemCollection集合對象。事實上，程式清單1和程式清單2的功能是相同的，兩種方式都可以產生靜態列表，只不過程式清單1隱藏了靜態列表的底層的實現，更容易操作罷了。

　　程式清單2

protected void Page_Load(object sender, EventArgs e)
{
　if (!IsPostBack)
　{
　　SelectionList1.Items.Add(new MobileListItem("Dopoda", "P800"));
　　SelectionList1.Items.Add(new MobileListItem("Motorola", "A1200"));
　　SelectionList1.Items.Add(new MobileListItem("Nokia", "N70"));
　　SelectionList1.Items.Add(new MobileListItem("Samsung", "E638"));
　}
}

　　將清單控制項與資料集合進行綁定

　　前文提過，除了使用靜態方式定義列表外，我們還可以將SelectionList 、List和ObjectList三個清單控制項與特定的資料來源進行綁定。這些清單控制項支援兩種類型的資料來源: System.Collections.IEnumerable和System.ComponentModel.IListSource。.Net Framework中的許多集合類都是實現了IEnumerator介面，為此這些類都支援簡單的枚舉功能。至於這些類的具體執行個體有位於System.Collections命名空間的Array、ArrayList、Hashtable和ListDictionary，還要一些和控制項相關聯的集合對象(例如前面的代碼中使用到的MobileListItemCollection)。如果你要查看所有實現了IEnumerator介面的集合類的話，請自行參考MSDN協助文檔。

　　你還可以將清單控制項與IListSource資料集合進行綁定。System.Data命名空間中的兩個類實現了IListSource這種介面，這兩個類就是我們在ADO.NET中經常使用的DataSet和DataTable。我們知道這兩個類是相關聯的，因為DataSet相當於一個由多個DataTable組成的集合。DataSet類是ADO.NET構架中的一個主要組件，並且DataSet還相當於在資料庫中所檢索到的資料在記憶體中的一個緩衝。當清單控制項的資料來源為一個DataSet對象時，因為一個DataSet可能包含多個DataTable對象，所以我們還必須使用SelectionList.DataMember屬性確切地指定使用那個DataTable對象來填充清單項目。注意，當你使用一個IEnumerator資料來源時，是沒有必要指定DataMember屬性的。至於DataSet在ASP.NET移動程式中的具體應用，將在其它章節中進行介紹。

　　當你需要以資料繫結的方式動態地實現一個列表的話，那麼應該將該清單控制項的DataSource屬性指定一個相關聯的資料來源。如果資料來源是一個DataSet對象的話，那麼還需要使用DataMember屬性確切地指定用那個DataTable填充清單項目。對於SelectionList和List控制項來說，你可以使用DataTextField和DataValueField兩個屬性分別指定資料來源中的兩個欄位，清單控制項會自動將這兩個欄位的內容作為各個清單項目的文本資訊和值資訊。而ObjectList清單控制項是使用LabelField屬性來指定資料來源中的一個欄位，使得該欄位中的內容應用到各個清單項目中進行呈現，至於每個清單項目的其它欄位內容，你可以在ObjectList的詳細資料檢視頁上進行查看。

　　我們可以以代碼的方式或伺服器控制項文法的方式實現上述資料繫結屬性的設定。例如，你希望在一個SelectionList清單控制項中使用Manufacturer欄位作為各清單項目的文本資訊，且Model欄位作為各清單項目的值資訊。那麼其設定的方法如程式清單3所示：

　　程式清單3

＜mobile:SelectionList ID="SelectionList1" Runat="server" SelectType="MultiSelectListBox" DataTextField="Manufacturer" DataValueField="Model"＞
＜/mobile:SelectionList＞
　　為了擷取資料來源中對應欄位的內容，我們還需要定義一個類，使得每個清單項目都可以讀取相應的文本資訊和值資訊。

　　程式清單4

public class MobileTelephone
{
　private String manufacturer, model;
　public MobileTelephone(String manufacturer, String model)
　{
　　this.manufacturer = manufacturer;
　　this.model = model;
　}

　public String Manufacturer { get { return this.manufacturer; } }
　public String Model { get { return this.model; } }
}
　　然後，在Page_Load事件處理函數中，建立所有的資料項目並將其添加到一個ArrayList對象中。最後就是設定清單控制項的DataSource屬性了，在這裡我們將DataSource指定為這個ArrayList對象。完成上述的步驟再調用DataBind方法，這樣就將清單控制項和資料來源進行綁定了。

　　程式清單4

protected void Page_Load(object sender, EventArgs e)
{
　if (!IsPostBack)
　{
　　ArrayList array = new ArrayList();
　　array.Add(new MobileTelephone("Dopoda", "P800"));
　　array.Add(new MobileTelephone("Motorola", "A1200"));
　　array.Add(new MobileTelephone("Nokia", "N70"));
　　array.Add(new MobileTelephone("Samsung", "E638"));
　　SelectionList1.DataSource = array;
　　SelectionList1.DataBind();
　}
}
　　使用上述代碼的完整樣本將在具體探討每個清單控制項時會應用到。

　　提示：DataBind方法對於資料繫結來說是至關重要的，很多開發人員經常忘記調用這個方法，以致清單控制項不顯示任何清單項目。我們可以使用兩種方法來使用DataBind方法，一種就是在每個要進行資料繫結的清單控制項上單獨使用DataBind方法，如程式清單4所示。你還可以採用一種一勞永逸的方法，那就是使用MobilePage.DataBind方法(在程式清單4中，使用this.DataBind()替代 SelectionList1.DataBind()，這裡的this代表的就是MobilePage)。這樣在頁面上存在多個資料繫結的清單控制項時，僅需使用一個this.DataBind()方法就可以實現所有清單控制項和資料來源的綁定，而無需為每個實現了資料繫結的清單控制項都調用一次DataBind方法。