ASP.NET移動開發之SelectionList控制項

asp.net|select|控制項 　　正如前面提及的那樣，SelectionList控制項適用於呈現較短列表的資料項目。儘管它不具備對長列表的分頁顯示功能，但是它的呈現形式是豐富多樣的。只要裝置瀏覽器支援，SelectionList控制項可以以下拉式清單、單項按鈕、多選按鈕和複選框等眾多形式存在。

　　SelectionList控制項的列表中只有一個可視的資料項目，其它的資料項目只能以隱藏值的形式與可視的資料項目進行關聯。要在伺服器控制項文法中指定隱藏值，可以在＜Item＞元素中使用Value屬性，並且將Value屬性指定某資料項目即可。如果使用動態綁定的形式來構建列表的話，那麼你可以使用DataValueField屬性指定資料來源中的某個欄位作為隱藏值。

　　 文法

　　SelectionList清單控制項的文法如下面的清單所示：

＜mobile:SelectionList
runat="server"
id="id"
Alignment="{NotSet|Left|Center|Right}"
BackColor="backgroundColor"
BreakAfter="{True|False}"
Font-Bold="{NotSet|False|True}"
Font-Italic="{NotSet|False|True}"
Font-Name="fontName"
Font-Size="{NotSet|Normal|Small|Large}"
ForeColor="foregroundColor"
StyleReference="StyleReference"
Wrapping="{NotSet|Wrap|NoWrap}"

DataMember="dataMember"
DataSource="dataSource"
DataTextField="DataTextField"
DataValueField="DataValueField"
SelectType="{DropDown|ListBox|Radio|MultiSelectListBox|CheckBox}"
Title="String"
OnItemDataBind="itemDataBindHandler"
OnSelectedIndexChanged="selectedIndexChangedHandler"＞

＜!-- 可選，以靜態方式聲明資料項目--＞
＜Item Text="Text" Value="Value" Selected="{True|False}"/＞

＜/mobile:SelectionList＞
　　至於要顯示的列表資料項目我們可以從資料來源中進行讀取，這種情況下我們需要使用DataMember、 DataSource、DataTextField和DataValueField等屬性。當然你也可以使用＜item＞標籤靜態地定義要顯示的資料項目和隱藏值。注意，在上述SelectionList清單控制項的文法中，並沒有包含SelectedIndex這個屬性，這是因為我們不可以在伺服器控制項文法中使用它，只有通過代碼才可以使用SelectedIndex屬性來擷取當前選項的索引值。如果在伺服器控制項文法中要使某資料項目處於被選中的狀態，你可以在與該資料項目對應的＜Item＞ 標籤中設定Selected屬性為True。

　　 屬性和事件

　　下表描述列舉了SelectionList清單控制項中的一些常用的屬性和事件，其中"類型"列描述了對應屬性的類型，這樣你就可以在代碼中對這些屬性進行設定和讀取，至於這些屬性可用的值你可以參考"文法"小節中的說明。

屬性/事件	類型	描述
DataMember	String	只有當SelectionList清單控制項與一個System.Data.DataTable或System.Data.DataSet對象綁定時才使用此屬性。該屬性指定用來指定DataSet中那個DataTable是清單控制項的真正資料來源。
DataSource	Object	只有當SelectionList清單控制項採用資料繫結的方式定義資料項目時才使用這個屬性。DataSource屬性用來指定一個DataSet對象，或是一個集合對象作為清單控制項的資料來源。
DataTextField	String	當SelectionList清單控制項綁定到DataSet或集合對象時，DataTextField屬性用來指定資料來源中的某個欄位在列表中進行顯示。
DataValueField	String	當SelectionList清單控制項綁定到DataSet或集合對象時，DataValueField 屬性用來指定資料來源中的某個欄位，用來提供隱藏值與列表顯示的資料項目進行關聯。
Items	System.Web. UI.MobileControls.Mobil eListItemCollection	我們可以使用這個屬性訪問MobileListItemCollection對象，而這個對象又是儲存整個列表中的所有資料項目對應的System.Web.UI.MobileControls.MobileLi stItem對象。你可以在代碼中對這個集合中的各個MobileListItem對象進行操作。
Rows	Integer	當清單控制項的SelectType屬性值為ListBox 或MultiSelectListBox時，Rows屬性用來設定可以在HTML瀏覽器和CHTML瀏覽器中可呈現出的資料項目行數。由於WML瀏覽器不支援多行顯示，所有設定該屬性是無效的。
SelectedIndex	Integer	返回或設定當前那個資料項目被選中。如果SelectionList清單控制項在當前為多選的模式時，也就是說如果你在一個列表中選擇可多個資料項目，那麼SelectedIndex屬性返回的是第一個被選中的資料項目的索引。
Selection	MobileListItem	返回被選中的資料項目(一個MobileListItem對象)，如果在列表中沒有選擇任何資料項目的話，將返回null。
SelectType	System.Web.UI. MobileControls. ListSelectType的枚舉值: DropDown| ListBox|Radio| MultiSelectListBox|CheckBox	該枚舉用來反映SelectionList清單控制項在裝置瀏覽器上的顯示樣式。CheckBox 和MultiSelectListBox允許多項選擇，其它的枚舉值只允許單項選擇。該屬性的預設值為DropDown.
ItemDataBind (event)	事件處理函數	當SelectionList清單控制項以資料繫結的形式定義資料項目時，在每個資料項目被添加到列表中時觸發這個事件。
SelectedIndexChanged (event)	事件處理函數	如果SelectionList控制項處於單項模式時，當使用者使選項方式改變時將調用這個事件處理函數。該事件只有在一個Command控制項產生一個從用戶端到伺服器端的回傳時才觸發，也就是說該事件是無法由SelectionList控制項自動觸發的，必須藉助於Command控制項。

　　SelectedIndex和Selection這兩個屬性只有當某個資料項目被選擇後才可以在代碼中進行設定。你可以在代碼中讀取SelectedIndex的屬性值，以確定當前選中的資料項目在列表中對應的索引值。Selection也是類似的，只不過它返回的是與當前選中的資料項目對應的MobileListItem對象，而不是索引值。

　　當使用者在一個Selection列表中做出相應的選擇後，用戶端瀏覽器上的Form表單將那些被選擇的一個或多個資料項目進行相應的編碼，並將這些編碼資訊添加到要回傳到伺服器的資料中，這樣ASP.NET運行時就可以利用這些被回傳到伺服器的資料來更新Selection的一些屬性，例如SelectedIndex。但是Selection並不會因為使用者選擇好了資料項目後就自動地將資料資訊回傳到伺服器上，而是要藉助一個Command控制項產生回傳操作，為此你需要將這個Selection清單控制項和Command控制項放置在同一個Form控制項中。

　　Selection清單控制項的類型

　　Selection清單控制項允許使用者只能做出單項的選擇，當然這需要你將Selection清單控制項的SelectType屬性設定為DropDown、ListBox或Radio。如果你將Selection清單控制項的SelectType屬性設定為MultiSelectListBox 或CheckBox的話，使用者將可以同時挑選清單中的多個選項。在代碼中，你可以使用SelectionList類中的SelectType方法來設定或擷取清單控制項所要使用的類型。如果Selection清單控制項採用的是多項選擇模式的話，那麼IsMultiSelect屬性將返回一個true值。

　　注意，在WML 1.2或者以前的WML版本中，是無法支援單項框、下拉式清單等圖形化使用者介面元素的。在這些只上述的WML裝置上，Selection清單控制項是以一個WML＜select＞元素進行呈現的，＜select＞元素也支援單項和多項的方式。在WML瀏覽器上，你可以使用軟鍵(softkey)定位到一個資料項目上進行選擇，也可以使用一個數字鍵選擇一個資料項目，很顯然，使用數字鍵的方式更便捷也更直觀。因此，如果你想採用數字鍵來挑選清單中的資料項目的話，那麼你必須確保該列表的項數應該小於或等於9個。下圖是Selection清單控制項的不同類型在不同瀏覽器上的顯示效果：

　　　　　　　　　　　　
　　 構建一個靜態列表

　　在靜態列表中，資料項目是使用Text屬性指定一個字串來進行呈現的，而不是動態地讀取自資料來源中的某個欄位內容。要指定一個靜態列表的資料項目，你必須使用＜Item＞屬性，具體的範例程式碼如下：

＜Item Text="Text" Value="Value" Selected="{True|False}" /＞

　　Text屬性用來指定在列表中顯示的資料項目資訊，而Value就是相關聯的隱藏值。如果你希望某資料項目在預設情況下就處於被選中的狀態的話，那麼你可以將Selected屬性設定為True。

　　注意，每個Selection清單控制項都與一個MobileListItemCollection對象關聯。當你使用伺服器控制項文法靜態地定義資料項目，實際上是將與每個資料項目對應的MobileListItem對象添加到MobileListItemCollection對象中。你可以在代碼中使用Items屬性來訪問MobileListItemCollection集合。你還可以使用MobileListItemCollection類中的Add、Clear和Remove等方法來添加、清除或刪除資料項目。這些方法的具體用法你可以參考相應的MSND協助文檔，這裡就不再詳細介紹了。

　　 識別Selection清單控制項中被選中的資料項目(單項模式)

　　在Selection清單控制項的單選模式下，你可以使用Selection.Name屬性來擷取被選中資料項目的顯示文本，還可以使用Selection.Value屬性擷取被選中資料項目的對應的隱藏值。下面的兩個程式清單就是一個顯示被選中資料項目對應隱藏值的範例程式碼：

　　Default.aspx：

＜%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %＞
＜%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %＞

＜html xmlns="http://www.w3.org/1999/xhtml" ＞
＜body＞
＜mobile:Form id="Form1" runat="server"＞
＜mobile:Label ID="Label1" Runat="server"＞請選擇想要購買的手器品牌＜/mobile:Label＞
　＜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＞
　　＜mobile:Command runat="server" id="Command1"
＞提交選擇＜/mobile:Command＞
＜/mobile:Form＞
＜mobile:Form ID="Form2" Runat="server"＞
＜mobile:Label runat="server" id="Label2"＞你選擇的手機型號為:＜/mobile:Label＞
＜mobile:Label runat="server" id="Label3"/＞
＜/mobile:Form＞
＜/body＞
＜/html＞
　　程式碼說明：在這個程式中，我們在該頁面上建立了兩個表單，Form1上放置了一個SelectionList清單控制項，預設的類型為下拉式清單，所以你只可以選擇一項。當然，你還可以顯式地設定SelectType屬性為"DropDown"。在代碼中可以看到，我們使用＜Item＞元素靜態地定義各個資料項目，其中用Text屬性設定清單控制項要顯式的字元資訊，而Value屬性就是與顯示的字元資訊相關聯的隱藏值(本例中為手機的製造商和機型)。由於你選擇一個資料項目後，SelectionList清單控制項無法自動將改變後的資訊AutoPostBack到伺服器上，所以還在Form1上再放置了一個Command控制項，用來產生一個回傳。也就是說當使用者選擇好了列表中的某項後，在點擊提交按鈕就可以將相應的資訊回傳到伺服器端進行處理了，我們在本例中設定了該Command控制項OnClick事件的處理函數為HandleSingleSelection,該事件處理函數的具體內容你可以查看對應的代碼後置檔案。Form2的功能就是顯示那個資料項目被使用者選中，當你點擊提交按鈕後，Form2表單將作為活動表單，顯示資訊。

　　Default.aspx.cs

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.Mobile;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.MobileControls;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.MobileControls.MobilePage
{
protected void HandleSingleSelection(object sender, EventArgs e)
{
this.ActiveForm = Form2;
String selectedMobile = SelectionList1.Selection.Value;
Label3.Text = SelectionList1.Selection + selectedMobile;
}
}
　　程式碼說明：HandleSingleSelection就是Command控制項的OnClick事件的處理函數。一旦使用者點擊了該Command按鈕，將使Form2成為活動表單。並在Label3控制項上將選中的資料項目的字元資訊和隱藏值顯示出來。

　　如果你不在移動Web.Config檔案中設定如下的代碼，則在Openwave瀏覽器中會出錯：

＜sessionState mode="InProc" cookieless="true" timeout="20"＞＜/sessionState＞
　　為此你最好將如下的移動Web.Config配置代碼替代Visual Studio自動產生的移動Web.Config配置代碼:

　　Web.Config

＜?xml version="1.0"?＞
＜!-- 注意: 除了手動編輯此檔案以外，您還可以使用 Web 管理工具來

　　配置應用程式的設定。可以使用 Visual Studio 中的"網站"-＞"ASP.NET 配置"選項。

　　設定和注釋的完整列表在machine.config.comments 中，該檔案通常位於 \Windows\Microsoft.NET\Framework\v2.0.xxxxx\Config 中
--＞
＜configuration＞
＜appSettings/＞
＜connectionStrings/＞
＜system.web＞
＜!--
設定 compilation debug="true" 將偵錯符號插入已編譯的頁面中。
但由於這會影響效能，因此只在開發過程中將此值設定為 true。
--＞
＜compilation debug="true"/＞
＜!--
通過 ＜authentication＞ 節可以配置 ASP.NET 使用的
安全身分識別驗證模式，以標識傳入的使用者。
--＞
＜authentication mode="Windows"/＞
＜!--
如果在執行請求的過程中出現未處理的錯誤，則通過 ＜customErrors＞ 節
可以配置相應的處理步驟。具體說來，開發人員通過該節可以
配置要顯示的 html 錯誤頁以代替錯誤堆疊追蹤。
--＞
＜customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm"＞
＜!--
＜error statusCode="403" redirect="NoAccess.htm" /＞
＜error statusCode="404" redirect="FileNotFound.htm" /＞
--＞
＜/customErrors＞
＜!--
完全限定用戶端重新導向的 URL
有些行動裝置要求對用戶端重新導向的 URL 進行完全限定。
--＞
＜httpRuntime useFullyQualifiedRedirectUrl="true"/＞
＜!--
指定無 Cookie 的資料字典類型
這將使字典內容出現在本地請求 url 查詢字串中。
這是在無 Cookie 的裝置上進行 Forms 身分識別驗證所必需的。
--＞
＜mobileControls cookielessDataDictionaryType="System.Web.Mobile.CookielessData"/＞

＜sessionState mode="InProc" cookieless="true" timeout="20"＞＜/sessionState＞

＜deviceFilters＞
＜filter name="isJPhone" compare="Type" argument="J-Phone"/＞
＜filter name="isHTML32" compare="PreferredRenderingType" argument="html32"/＞
＜filter name="isWML11" compare="PreferredRenderingType" argument="wml11"/＞
＜filter name="isCHTML10" compare="PreferredRenderingType" argument="chtml10"/＞
＜filter name="isGoAmerica" compare="Browser" argument="Go.Web"/＞
＜filter name="isMME" compare="Browser" argument="Microsoft Mobile Explorer"/＞
＜filter name="isMyPalm" compare="Browser" argument="MyPalm"/＞
＜filter name="isPocketIE" compare="Browser" argument="Pocket IE"/＞
＜filter name="isUP3x" compare="Type" argument="Phone.com 3.x Browser"/＞
＜filter name="isUP4x" compare="Type" argument="Phone.com 4.x Browser"/＞
＜filter name="isEricssonR380" compare="Type" argument="Ericsson R380"/＞
＜filter name="isNokia7110" compare="Type" argument="Nokia 7110"/＞
＜filter name="prefersGIF" compare="PreferredImageMIME" argument="image/gif"/＞
＜filter name="prefersWBMP" compare="PreferredImageMIME" argument="image/vnd.wap.wbmp"/＞
＜filter name="supportsColor" compare="IsColor" argument="true"/＞
＜filter name="supportsCookies" compare="Cookies" argument="true"/＞
＜filter name="supportsJavaScript" compare="Javascript" argument="true"/＞
＜filter name="supportsVoiceCalls" compare="CanInitiateVoiceCall" argument="true"/＞
＜/deviceFilters＞
＜/system.web＞
＜/configuration＞
　　下面的是Pocket IE和Openwave瀏覽器在運行該程式時的截圖：

　　識別Selection清單控制項中被選中的資料項目(多項模式)

　　在Selection清單控制項的多選模式下，你必須檢測列表中的每個資料項目，以便確定那些資料項目處於選中的狀態。前文提及過，我們可以使用Selection清單控制項的Items屬性來訪問MobileListItemCollection對象。在該集合中，那些處於選中狀態的MobileListItem對象，其Selected屬性的屬性值將為true。下面的程式清單就是用來指出列表中那些資料項目處於選中的狀態：

　　Default.aspx:

＜%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %＞
＜%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %＞

＜html xmlns="http://www.w3.org/1999/xhtml" ＞
＜body＞
＜mobile:Form id="Form1" runat="server"＞
＜mobile:Label ID="Label1" Runat="server"＞請選擇想要購買的手器品牌＜/mobile:Label＞
＜mobile:SelectionList ID="SelectionList1" Runat="server" SelectType="MultiSelectListBox"＞
＜Item Text="Dopoda" Value="P800" /＞
＜Item Text="Motorola" Value="A1200" /＞
＜Item Text="Nokia" Value="N70" /＞
＜Item Text="Samsung" Value="E638" /＞
＜/mobile:SelectionList＞
＜mobile:Command ID="Command1" Runat="server" ＞提交選擇＜/mobile:Command＞
＜/mobile:Form＞
＜mobile:Form ID="Form2" Runat="server"＞
＜mobile:Label ID="Label2" Runat="server"＞你選擇的手機型號為:＜/mobile:Label＞
＜mobile:TextView ID="TextView1" Runat="server"＞TextView＜/mobile:TextView＞
＜/mobile:Form＞
＜/body＞
＜/html＞
　　程式碼說明：由於我們要在這個清單控制項中實現多選，為此將Selection清單控制項的SelectType設定為MultiSelectListBox。而後在Form2控制項中添加一個TextView控制項，使得所有被選中的資料項目的字元資訊和隱藏值資訊都可以顯示出來。

Default.aspx.cs:
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.Mobile;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.MobileControls;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.MobileControls.MobilePage
{
protected void HandleMultiTeamSelection(object sender, EventArgs e)
{
this.ActiveForm = Form2;
// Get the list items collection.
MobileListItemCollection colItems = SelectionList1.Items;
String strDisplaytext = "";
foreach (MobileListItem item in colItems)
{
if (item.Selected)
{
strDisplaytext += (item.Text + item.Value + "＜BR＞");
}
}
TextView1.Text = strDisplaytext;
}
}
　　下面的對應的截圖：

　　綁定資料來源

　　下面這個樣本將建立一個簡單的ArrayList集合，作為Selection清單控制項的資料來源。在代碼後置檔案中，我們建立了一個Mobile類，用來存取每個資料項目。在Page_Load事件處理函數中，我們將建立好的Mobile對象添加到一個ArrayList集合中。而後，將Selection清單控制項與該ArrayList集合綁定。最後通過一個foreach 語句迭代整個列表，並將各個資料項目中的資訊以一個字串的形式顯示在頁面上。

　　Default.aspx

＜%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %＞
＜%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %＞

＜html xmlns="http://www.w3.org/1999/xhtml" ＞
＜body＞
＜mobile:Form id="Form1" runat="server"＞
＜mobile:Label ID="Label1" Runat="server"＞請選擇想要購買的手器品牌＜/mobile:Label＞
＜mobile:SelectionList ID="SelectionList1" Runat="server" SelectType="MultiSelectListBox" DataTextField="Manufacturer" DataValueField="Model"＞
＜/mobile:SelectionList＞
＜mobile:Command ID="Command1" Runat="server" ＞提交選擇＜/mobile:Command＞

＜/mobile:Form＞
＜mobile:Form ID="Form2" Runat="server"＞
＜mobile:Label ID="Label2" Runat="server"＞你選擇的手機型號為:＜/mobile:Label＞
＜mobile:TextView ID="TextView1" Runat="server"＞TextView＜/mobile:TextView＞
＜/mobile:Form＞
＜/body＞
＜/html＞

Default.aspx.cs:
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.Mobile;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.MobileControls;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.MobileControls.MobilePage
{
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();
}
}
protected void HandleMultiSelection(object sender, EventArgs e)
{
this.ActiveForm = Form2;

// Get the list items collection.
MobileListItemCollection colItems = SelectionList1.Items;
String strDisplaytext = "";
foreach (MobileListItem item in colItems)
{
if (item.Selected)
{
strDisplaytext += (item.Text + item.Value +
"＜br/＞");
}
}
TextView1.Text = strDisplaytext;
}
}

　　Mobile.cs:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

/// ＜summary＞
/// TeamStats 的摘要說明
/// ＜/summary＞
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; } }
}