ASP.NET移动开发之SelectionList控件

翻译|其它|编辑:郝浩|2007-09-05 10:57:22.000|阅读 958 次

概述:

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

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 DataSourceDataTextFieldDataValueField等属性。当然你也可以使用<item>标签静态地定义要显示的数据项和隐藏值。注意,在上述SelectionList列表控件的语法中,并没有包含SelectedIndex这个属性,这是因为我们不可以在服务器控件语法中使用它,只有通过代码才可以使用SelectedIndex属性来获取当前选项的索引值。如果在服务器控件语法中要使某数据项处于被选中的状态,你可以在与该数据项对应的<Item 标签中设置Selected属性为True

  属性和事件

  下表描述列举了SelectionList列表控件中的一些常用的属性和事件,其中"类型"列描述了对应属性的类型,这样你就可以在代码中对这些属性进行设置和读取,至于这些属性可用的值你可以参考"语法"小节中的说明。

属性/事件 类型 描述 
DataMember String 
只有当SelectionList列表控件与一个System.Data.DataTableSystem.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控件。 


  SelectedIndexSelection这两个属性只有当某个数据项被选择后才可以在代码中进行设置。你可以在代码中读取SelectedIndex的属性值,以确定当前选中的数据项在列表中对应的索引值。Selection也是类似的,只不过它返回的是与当前选中的数据项对应的MobileListItem对象,而不是索引值。

  当用户在一个Selection列表中做出相应的选择后,客户端浏览器上的Form窗体将那些被选择的一个或多个数据项进行相应的编码,并将这些编码信息添加到要回发到服务器的数据中,这样ASP.NET运行时就可以利用这些被回发到服务器的数据来更新Selection的一些属性,例如SelectedIndex。但是Selection并不会因为用户选择好了数据项后就自动地将数据信息回发到服务器上,而是要借助一个Command控件产生回发操作,为此你需要将这个Selection列表控件和Command控件放置在同一个Form控件中。

  Selection列表控件的类型

  Selection列表控件允许用户只能做出单项的选择,当然这需要你将Selection列表控件的SelectType属性设置为DropDownListBoxRadio。如果你将Selection列表控件的SelectType属性设置为MultiSelectListBox CheckBox的话,用户将可以同时选择列表中的多个选项。在代码中,你可以使用SelectionList类中的SelectType方法来设置或获取列表控件所要使用的类型。如果Selection列表控件采用的是多项选择模式的话,那么IsMultiSelect属性将返回一个true值。

  注意,在WML 1.2或者以前的WML版本中,是无法支持单项框、下拉列表等图形用户界面元素的。在这些只上述的WML设备上,Selection列表控件是以一个WMLselect>元素进行呈现的,<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类中的AddClearRemove等方法来添加、清除或删除数据项。这些方法的具体用法你可以参考相应的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   中,该文件通常位于  \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 I  E  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; } }


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自:中国.net俱乐部

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP