top
Loading...
ASP.NET移動開發之SelectionList控件
正如前面提及的那樣,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列表控件中的一些常用的屬性和事件,其中"類型"列描述了對應屬性的類型,這樣你就可以在代碼中對這些屬性進行設置和讀取,至于這些屬性可用的值你可以參考"語法"小節中的說明。

屬性/事件類型描述
DataMemberString只有當SelectionList列表控件與一個System.Data.DataTable或System.Data.DataSet對象綁定時才使用此屬性。該屬性指定用來指定DataSet中那個DataTable是列表控件的真正數據源。
DataSource Object只有當SelectionList列表控件采用數據綁定的方式定義數據項時才使用這個屬性。DataSource屬性用來指定一個DataSet對象,或是一個集合對象作為列表控件的數據源。
DataTextFieldString當SelectionList列表控件綁定到DataSet或集合對象時,DataTextField屬性用來指定數據源中的某個字段在列表中進行顯示。
DataValueFieldString當SelectionList列表控件綁定到DataSet或集合對象時,DataValueField 屬性用來指定數據源中的某個字段,用來提供隱藏值與列表顯示的數據項進行關聯。
ItemsSystem.Web. UI.MobileControls.Mobil eListItemCollection 我們可以使用這個屬性訪問MobileListItemCollection對象,而這個對象又是存儲整個列表中的所有數據項對應的System.Web.UI.MobileControls.MobileLi stItem對象。你可以在代碼中對這個集合中的各個MobileListItem對象進行操作。
RowsInteger當列表控件的SelectType屬性值為ListBox 或MultiSelectListBox時,Rows屬性用來設置可以在HTML瀏覽器和CHTML瀏覽器中可呈現出的數據項行數。由于WML瀏覽器不支持多行顯示,所有設置該屬性是無效的。
SelectedIndexInteger返回或設置當前那個數據項被選中。如果SelectionList列表控件在當前為多選的模式時,也就是說如果你在一個列表中選擇可多個數據項,那么SelectedIndex屬性返回的是第一個被選中的數據項的索引。
SelectionMobileListItem返回被選中的數據項(一個MobileListItem對象),如果在列表中沒有選擇任何數據項的話,將返回null。
SelectTypeSystem.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"
OnClick="HandleSingleSelection">提交選擇</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列表控件無法自動將改變后的信息自動回發到服務器上,所以還在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 中,該文件通常位于 WindowsMicrosoft.NETFrameworkv2.0.xxxxxConfig 中
-->
<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" OnClick="HandleMultiTeamSelection">提交選擇</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" OnClick="HandleMultiSelection">提交選擇</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; } }
}


作者:http://www.zhujiangroad.com
來源:http://www.zhujiangroad.com
北斗有巢氏 有巢氏北斗