ASP.NET移动开发之SelectionList控件

80酷酷网    80kuku.com

　　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列表控件中的一些常用的属性和事件，其中"类型"列描述了对应属性的类型，这样你就可以在代码中对这些属性进行设置和读取，至于这些属性可用的值你可以参考"语法"小节中的说明。

属性/事件类型描述
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"
＞提交选择＜/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 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; } }
}

移动开发之控件移动开发之控件移动开发之控件
移动开发之控件移动开发之控件

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间

上一篇在ASP.NET 2.0中使用样式、主题和皮肤

下一篇URL重写可删节日期模式---正则表达式之强力应用

相关文章

点击：