Building Microsoft ASP.NET Applications for Mobile Devices, Second Edition [Electronic resources] نسخه متنی

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی

Building Microsoft ASP.NET Applications for Mobile Devices, Second Edition [Electronic resources] - نسخه متنی

Andy Wigley; Peter Roxburgh

| نمايش فراداده ، افزودن یک نقد و بررسی
افزودن به کتابخانه شخصی
ارسال به دوستان
جستجو در متن کتاب
بیشتر
تنظیمات قلم

فونت

اندازه قلم

+ - پیش فرض

حالت نمایش

روز نیمروز شب
جستجو در لغت نامه
بیشتر
توضیحات
افزودن یادداشت جدید






The SelectionList Control

As mentioned, this control is appropriate for displaying small lists of items. It doesn't support pagination of long lists, but it offers presentation options that allow you to render as drop-down lists, combo boxes, and radio buttons on devices that support them.

The SelectionList displays a list consisting of a single visible item, but there can also be a hidden value associated with each displayed item. You set the value of this item using the Value attribute of the <Item> element in server control syntax, or if the list is databound by specifying a field in the data source using the DataValueField property.


Syntax


The SelectionList control is used declaratively by means of the server control syntax shown in the following listing. Items that are displayed are either read from a data source, using the DataMember, DataSource, DataTextField, and DataValueField properties, or statically defined using <Item> tags. You can also add static items through code, as described in the section "Specifying a Static List," later in this chapter. The SelectedIndex property of this control is not shown here as it can't be set declaratively and can be set only in code. To select items declaratively, set the Selected attribute of the <Item> tag to True.

<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">
<!-- Optional statically declared list items -->
<Item Text="Text" Value="Value" Selected="{True|False}"/>
</mobile:SelectionList>


Properties and Events


Table 4-1 and Table 4-2 for details of those properties that are inherited from MobileControl.) The Type column describes the type of the property when you're setting or getting the property in code. Refer to the preceding "Syntax" section for valid values when you're setting the property in server control syntax.

The SelectedIndex and Selection properties are set only after the user has made a selection from the list. You read the SelectedIndex property in code to determine the index number (zero-based) of the user's selection in the collection of items. The Selection property is similar but returns the MobileListItem object for the selected item rather than an index.
















































Table 6-2: Significant Properties and Events of the SelectionList Control


Property/Event


Type


Description


DataMember


String


Used only when the control is data bound to a System.Data.DataSet or System.Data.DataTable object. This attribute specifies the name of the table in the DataSet class to which the control should bind. (We'll describe these two classes later in this chapter.)


DataSource


Object


When the control is data bound, DataSource specifies the DataSet object or enumerated collection that is the data source.


DataTextField


String


When the control is data bound to either a DataSet class or an enumerated collection, DataTextField specifies the name of the field in the data source that appears in the list.


DataValueField


String


When the control is data bound to either a DataSet object or an enumerated collection, DataValueField specifies the name of the field in the data source that provides the hidden data value associated with each list item.


Items


System.Web. UI.MobileControls.Mobil eListItemCollection


Gives access to the MobileListItemCollection object, in which all the System.Web.UI.MobileControls.MobileLi stItem objects that represent the list items are stored. You can programmatically manipulate the objects in this collection.


Rows


Integer


When the SelectType property is ListBox or MultiSelectListBox, Rows is used to set the number of visible rows when the control is rendered on HTML and cHTML browsers.


SelectedIndex


Integer


Returns or sets the index of the selected item. If the control is in multiple-selection mode, SelectedIndex returns the index of the first selected item.


Selection


MobileListItem


Returns the selected item (a MobileListItem object) or null if there is no selection.


SelectType


System.Web.UI. MobileControls. ListSelectType enumeration: DropDown| ListBox|Radio| MultiSelectList-Box|CheckBox


This enumeration reflects the presentation style on the browsers that support it. CheckBox and MultiSelectListBox allow you to use the control to make multiple selections from the list. The other values enable only single selections.

The default value is DropDown.


Title


String


Title string that is displayed on WML browsers, although it is not supported by all WML browsers.


ItemDataBind (event)


Event handler method


Set to the name of an event handler method of signature OnItemDataBind(Object sender, ListDataBindEventArgs e). When the control is data bound, this event fires for each item that is added to the List. (See Chapter 10 for an example.)


SelectedIndexChanged (event)


Event handler method


If the SelectionList control executes in one of the single-selection modes, the application calls this event handler method when a user action causes the selected item to change. The event can fire only after a Command control has made a post to the server.






More Info

For more information about the commonly used properties inherited from the MobileControl class, refer to Table 4-1 in Chapter 4.



Using the SelectionList Control


You define the list items to display in the SelectionList control in ASP.NET server control syntax either using the <Item> element or by data binding to a single field of a data collection using the DataSource, DataMember, DataTextField, and DataValueField attributes, as outlined in the section "Building Static or Data-Bound Lists" at the beginning of this chapter.

When a user makes a selection in a SelectionList, the form on the client browser encodes the identity of the selected item or items and adds it to the data to be posted back to the server, where it is used by the ASP.NET runtime to update properties of the SelectionList such as SelectedIndex. However, the SelectionList control doesn't cause an automatic postback to the server when a user makes a selection. You must include a Command control on the same Form as a SelectionList control to post the user's selection to the server.

Specifying the Type of SelectionList


The SelectionList control allows the user to make single selections if you set the SelectType property to DropDown, ListBox, or Radio. You can enable multiple selections by using the MultiSelectListBox or CheckBox values of this attribute. In code, you can use the SelectType method of the SelectionList class to set or get the type of list to use. The IsMultiSelect property returns true if one of the multiple-selection styles is in use.

The names used for the values of the SelectType attribute reflect the way they are rendered on HTML browsers. WML browsers of version 1.2 and earlier don't support these GUI elements. On these devices, a selection list is rendered as a WML <select> element, which allows single-selection or multiple-selection options. On many WML browsers, you can select items either by navigating to an option and pressing a softkey or by pressing a number key to select a list item. (The second option is quicker.) Therefore, you should try to limit a SelectionList control to nine items or less so that all options can easily be displayed and each option can map to a key. Figure 6-3 offers some examples of selection list styles on a variety of browsers.


Figure 6-3: SelectionList control rendering styles on Pocket Internet Explorer as well as single-selection styles (middle) and multiple-selection styles (right) on an Openwave browser


Specifying a Static List


In a static list, list items are defined as string literals rather than read from a dynamic data source. To specify a static list of items, you must use the <Item> element, as shown here:

<Item Text="Text" Value="Value" Selected="{True|False}" />

The Text attribute specifies the item that is displayed to the user, whereas the Value attribute specifies a hidden associated value. Set Selected to True if you want that item to be preselected.

An associated MobileListItemCollection object stores items you've defined for a SelectionList control. When you define items statically, you're inserting MobileListItem objects into this collection. The Items property of the SelectionList control gives you access to this collection. You can use the methods of the MobileListItemCollection class to add to or remove items from the list. Consult the .NET Framework SDK reference documentation for details about Add, Clear, Remove, and other related methods of this class.

Identifying the Selection in a SelectionList Control


With single-selection styles, you can retrieve the display text of the selected item by fetching the Selection.Name property and the associated value using the Selection.Value property. In Listings 6-1 and 6-2, the user selects a single team from the list, and the Command control's HandleTeamSelection event handler uses the value associated with the selected item to set the text of Label4 on the second form. Keep in mind that the SelectionList control always requires an accompanying Command control to generate the event that processes the user's choice.

Listing 6-1: Source for SingleSelectionListExample.aspx






<%@ Page Inherits="MSPress.MobWeb.SelListEx.ExampleWebForm" Language="c#" 
CodeBehind=" SingleSelectionListExample.aspx.cs"%>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<mobile:Form runat="server" id="Form1">
<mobile:Label runat="server" StyleReference="title" id="Label1">
Season 2003 results
</mobile:Label>
<mobile:Label runat="server" id="Label2">Select a team:</mobile:Label>
<mobile:SelectionList SelectType="ListBox"
id="SelectionList1" runat="server">
<item Text="Dunes" Value="Posn:1 Pl:38 Pts:80"/>
<item Text="Phoenix" Value="Posn:2 Pl:38 Pts:70"/>
<item Text="Eagles" Value="Posn:3 Pl:38 Pts:69"/>
<item Text="Zodiac" Value="Posn:4 Pl:38 Pts:68"/>
</mobile:SelectionList>
<mobile:Command runat="server" id="Command1">
Get Stats!
</mobile:Command>
</mobile:Form>
<mobile:Form runat="server" id="Form2">
<mobile:Label runat="server" id="Label3">Team Full Stats:</mobile:Label>
<mobile:Label runat="server" id="Label4"/>
</mobile:Form>











Listing 6-2: Code-behind file SingleSelectionListExample.aspx.cs






using System;
namespace MSPress.MobWeb.SelListEx
{
public class ExampleWebForm : System.Web.UI.MobileControls.MobilePage
{
protected System.Web.UI.MobileControls.Label Label4;
protected System.Web.UI.MobileControls.SelectionList SelectionList1;
protected System.Web.UI.MobileControls.Command Command1;
protected System.Web.UI.MobileControls.Form Form2;
override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}
private void InitializeComponent()
{
this.Command1.Click +=
new System.EventHandler(this.HandleTeamSelection);
}
private void HandleTeamSelection(Object source, EventArgs args)
{
// Display the Stats page
this.ActiveForm = Form2;
String selectedTeamStats = SelectionList1.Selection.Value;
Label4.Text = SelectionList1.Selection + ": " + selectedTeamStats;
}
}
}











Identifying Selections in a Multiple-Selection SelectionList Control


When you use one of the multiple-selection modes, you must test each MobileListItem object in the MobileListItemCollection collection to determine if it is selected. The MobileListItemCollection collection is accessible through the Items property of the SelectionList. Selected MobileListItem objects in the collection will have their Selected property set to True. Listings 6-3 and 6-4, which are variants of Listings 6-1 and 6-2, allow the user to make multiple selections and enable the statistics of each selection to be displayed in a TextView control. Within the HandleMultiTeamSelection event handler, the code retrieves the Items property and then tests each item in the collection to see whether its Selected property is True.

Listing 6-3: Source for MultipleSelectionListExample.aspx






<%@ Page Inherits="MSPress.MobWeb.MultSelListEx.ExampleMobileWebForm"  
Language="c#" CodeBehind="multipleselectionlistexample.aspx.cs"%>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<mobile:Form runat="server" id="Form1">
<mobile:Label runat="server" StyleReference="title">
Season 2003 results
</mobile:Label>
<mobile:Label runat="server">Select 2 or more teams:</mobile:Label>
<mobile:SelectionList SelectType="MultiSelectListBox"
id="SelectionList1" runat="server">
<item Text="Dunes" Value="Posn:1 Pl:38 Pts:80"/>
<item Text="Phoenix" Value="Posn:2 Pl:38 Pts:70"/>
<item Text="Eagles" Value="Posn:3 Pl:38 Pts:69"/>
<item Text="Zodiac" Value="Posn:4 Pl:38 Pts:68"/>
</mobile:SelectionList>
<mobile:Command runat="server" id="Command1">
Compare Stats!
</mobile:Command>
</mobile:Form>
<mobile:Form runat="server" id="Form2">
<mobile:Label runat="server">Teams Full Stats:</mobile:Label>
<mobile:TextView runat="server" id="TextView1"/>
</mobile:Form>











Listing 6-4: Code-behind module MultipleSelectionListExample.aspx.c






using System;
using System.Web.UI.MobileControls;
namespace MSPress.MobWeb.MultSelListEx
{
public class ExampleMobileWebForm :
System.Web.UI.MobileControls.MobilePage
{
protected System.Web.UI.MobileControls.TextView TextView1;
protected System.Web.UI.MobileControls.SelectionList SelectionList1;
protected System.Web.UI.MobileControls.Command Command1;
protected System.Web.UI.MobileControls.Form Form2;
override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}
private void InitializeComponent()
{
this.Command1.Click +=
new System.EventHandler(this.HandleMultiTeamSelection);
}
protected void HandleMultiTeamSelection(Object source,EventArgs args)
{
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;
}
}
}











Figure 6-4 shows multiple selection on a WAP simulator (left) and the result (right).


Figure 6-4: Output from the multiple-selection list example

Binding to a Data Collection


Instead of defining list items statically, you can bind the SelectionList control (and the other list controls) to a data source, as outlined in the topic "Building Static or Data-Bound Lists" at the beginning of this chapter.

Listings 6-5 and 6-6 create a simple ArrayList collection to use as the data source for a SelectionList control. In the code-behind module, we create a simple class named TeamStats, in which we store the details about a single team. In the Page_Load event handler, we create TeamStats objects and load them into an ArrayList collection. The SelectionList control is data bound to that ArrayList. The output from this sample looks identical to that of the MultipleSelectionListExample sample shown earlier.

Listing 6-5: Source for DataboundListExample.aspx






<%@ Page Inherits="MSPress.MobWeb.DBListEx.ExampleWebForm" Language="c#" 
CodeBehind="DataboundListExample.aspx.cs" AutoEventWireup="False" %>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<mobile:Form runat="server" id="Form1">
<mobile:Label id="Label1" runat="server" StyleReference="title">
Season 2003 results
</mobile:Label>
<mobile:Label id="Label2" runat="server">
Select 2 or more teams:
</mobile:Label>
<mobile:SelectionList id="SelectionList1" runat="server"
DataValueField="Stats" DataTextField="TeamName"
SelectType="MultiSelectListBox">
</mobile:SelectionList>
<mobile:Command id="Command1" runat="server">
Compare Stats!
</mobile:Command>
</mobile:Form>
<mobile:Form runat="server" id="Form2">
<mobile:Label id="Label3" runat="server">Teams Full Stats:</mobile:Label>
<mobile:TextView id="TextView1" runat="server"></mobile:TextView>
</mobile:Form>











Listing 6-6: Code-behind file DataboundListExample.aspx.cs






using System;
using System.Collections;
using System.Web.UI.MobileControls;
namespace MSPress.MobWeb.DBListEx
{
public class ExampleWebForm : System.Web.UI.MobileControls.MobilePage
{
protected System.Web.UI.MobileControls.TextView TextView1;
protected System.Web.UI.MobileControls.SelectionList SelectionList1;
protected System.Web.UI.MobileControls.Command Command1;
protected System.Web.UI.MobileControls.Form Form2;
override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
this.Command1.Click +=
new System.EventHandler(this.HandleMultiTeamSelection);
}
private void Page_Load(Object sender, EventArgs e)
{
if (!IsPostBack)
{
ArrayList array = new ArrayList();
array.Add(new TeamStats("Dunes", "Posn:1 Pl:38 Pts:80"));
array.Add(new TeamStats("Phoenix", "Posn:2 Pl:38 Pts:70"));
array.Add(new TeamStats("Eagles", "Posn:3 Pl:38 Pts:69"));
array.Add(new TeamStats("Zodiac", "Posn:4 Pl:38 Pts:68"));
SelectionList1.DataSource = array;
SelectionList1.DataBind();
}
}
private void HandleMultiTeamSelection(
Object source, EventArgs args)
{
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;
}
}
class TeamStats
{
private String teamName, stats;
public TeamStats(String teamName, String stats)
{
this.teamName = teamName;
this.stats = stats;
}
public String TeamName { get { return this.teamName; } }
public String Stats { get { return this.stats; } }
}
}











/ 145