Asp. NET mobile Development's SelectionList control

Asp.net|select| control As mentioned earlier, the SelectionList control applies to data items that render a shorter list. Although it does not have a paging display for long lists, its presentation is rich and diverse. As long as the device browser supports it, the SelectionList control can exist in many forms, such as a drop-down list, a single button, a multiple-selection button, and a check box.

There is only one visible item in the list of SelectionList controls, and other data items can only be associated with visible data items in the form of hidden values. To specify hidden values in the server control syntax, you can use the Value property in the <Item> element and specify a data item with the Value property. If you use dynamic binding to build a list, you can use the DataValueField property to specify a field in the data source as a hidden value.

　　 Grammar

The syntax for the SelectionList list control is as shown in the following list:

<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, declare data items statically-->
<item text= "Text" value= "Value" selected= "{true| False} "/>

</mobile:SelectionList>
As for the list data items to display we can read from the data source, in which case we need to use attributes such as DataMember, DataSource, DataTextField, and DataValueField. Of course, you can also use the <item> label to statically define the data items and hidden values to display. Note that in the syntax of the SelectionList list control mentioned above, the SelectedIndex attribute is not included because we cannot use it in server control syntax, and only code can use the SelectedIndex property to get the index value of the current option. If you want a data item to be in the selected state in the server control syntax, you can set the selected property to True in the <Item> label that corresponds to the data item.

　　 Properties and Events

The following table describes some common properties and events that are listed in the SelectionList list control. The Type column describes the type of the corresponding property so that you can set and read the properties in code, and you can refer to the instructions in the syntax section for the values that are available for these properties.

Properties/Events	Type	Describe
DataMember	String	This property is used only when the SelectionList list control is bound to a System.Data.DataTable or System.Data.DataSet object. This property specifies the true data source that specifies that the DataTable in the dataset is the list control.
DataSource	Object	This property is used only when the SelectionList list control defines data items in a way that is data-bound. The DataSource property is used to specify a DataSet object, or a collection object as the data source for a list control.
DataTextField	String	When a SelectionList list control is bound to a dataset or collection object, the DataTextField property is used to specify that a field in the data source is displayed in the list.
DataValueField	String	When a SelectionList list control is bound to a dataset or collection object, the DataValueField property is used to specify a field in the data source to associate the hidden value with the data item that is displayed in the list.
Items	system.web. UI. Mobilecontrols.mobil elistitemcollection	We can use this property to access the MobileListItemCollection object, which is the System.Web.UI.MobileControls.MobileLi Stitem object that stores all the data items in the entire list. You can manipulate individual MobileListItem objects in this collection in code.
Rows	Integer	When the SelectType property value of a list control is a ListBox or MultiSelectListBox, the Rows property is used to set the number of data item rows that can be rendered in the HTML browser and in the cHTML browser. Because WML browsers do not support multiline display, all settings for this property are not valid.
SelectedIndex	Integer	Returns or sets the current data item to be selected. If the SelectionList list control is currently in multiple-selection mode, that is, if you select multiple items in a list, the SelectedIndex property returns the index of the first selected item of data.
Selection	MobileListItem	Returns the selected data item (a MobileListItem object) that returns NULL if no data item is selected in the list.
SelectType	System.Web.UI. MobileControls. ListSelectType enumeration value: dropdown| Listbox| radio| Multiselectlistbox| CheckBox	This enumeration is used to reflect the display style of the SelectionList list control on the device browser. CheckBox and MultiSelectListBox allow multiple selections, and other enumeration values allow only a single selection. The default value for this property is dropdown.
ItemDataBind (Event)	Event handler function	When a SelectionList list control defines a data item as data-bound, this event is triggered when each item of data is added to the list.
SelectedIndexChanged (Event)	Event handler function	If the SelectionList control is in single mode, the event handler is invoked when the user makes the option change. This event fires only when a command control produces a postback from the client to the server, meaning that the event is not automatically triggered by the SelectionList control and must be aided by the command control.

SelectedIndex and Selection properties can be set in code only if a data item is selected. You can read the SelectedIndex attribute value in your code to determine the index value of the currently selected data item in the list. Selection is similar, except that it returns the MobileListItem object that corresponds to the currently selected data item, not the index value.

When the user makes the appropriate selection in a selection list, the form form on the client browser encodes the selected data item or items and adds the encoded information to the data to be sent back to the server. This allows the asp.net to update some properties of selection, such as SelectedIndex, using the data that is sent back to the server at run time. But selection does not automatically post data back to the server because the user chooses the data item, but instead uses a command control to generate a postback operation, where you need to place the selection list control and command control in the same form control.

　　Type of selection list control

Selection list controls allow users to make only a single choice, which, of course, requires you to set the SelectType property of the selection list control to Dropdown, ListBox, or radio. If you set the SelectType property of the selection list control to MultiSelectListBox or checkbox, the user will be able to select multiple options in the list at the same time. In code, you can use the SelectType method in the SelectionList class to set or get the type that the list control will use. If the selection list control uses multiple selection modes, the IsMultiSelect property returns a true value.

Note that in WML 1.2 or previous WML versions, you cannot support graphical user interface elements such as single boxes, Drop-down lists, and so on. On these only WML devices, the selection list control is rendered with a WML element, and the element also supports the way of the individual and multiple items. In a WML browser, you can use a soft key (softkey) to navigate to a data item to choose from, or you can use a number key to select a data item, it is obvious that the use of numeric keys is more convenient and intuitive. Therefore, if you want to use numeric keys to select items in a list, you must make sure that the number of items in the list should be less than or equal to 9. The following illustration shows the different types of selection list controls that are displayed on different browsers:

　　　　　　　　　　　　
　　 building a static list

In a static list, data items are rendered by using the Text property to specify a string, rather than dynamically reading from a field in the data source. To specify a data item for a static list, you must use the <Item> property, as shown in the following example code:

<item text= "Text" value= "Value" selected= "{true| False} "/>

The Text property is used to specify the data item information that is displayed in the list, and value is the associated hidden value. If you want a data item to be selected by default, you can set the selected property to True.

Note that each selection list control is associated with a MobileListItemCollection object. When you statically define a data item using server control syntax, you actually add the MobileListItem object corresponding to each data item to the MobileListItemCollection object. You can use the Items property in your code to access the MobileListItemCollection collection. You can also use the add, clear, and remove methods in the MobileListItemCollection class to add, purge, or delete data items. The specific use of these methods you can refer to the corresponding MSND help document, here is no longer detailed.

　　 identify the data items that are selected in the selection list control (single mode)

In the selection list control's radio mode, you can use the Selection.name property to get the display text for the selected item, and you can use the Selection.value property to get the corresponding hidden value of the selected data item. The following two list of programs is a sample code that displays the hidden value of the selected data item:

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"%>

<body>
<mobile:form id= "Form1" runat= "Server"
<mobile:label id= "Label1" runat= "Server" Please select the hand brand you want to buy </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"
> Submit selection </mobile:Command>
</mobile:Form>
<mobile:form id= "Form2" runat= "Server"
<mobile:label runat= "Server" id= "Label2" > > The phone number you chose is: </mobile:Label>
<mobile:label runat= "Server" id= "LABEL3"/>
</mobile:Form>
</body>
Program code Description: In this program, we created two forms on this page, Form1 placed a SelectionList list control, the default type is Drop-down list, so you can only select one. Of course, you can also explicitly set the SelectType property to "DropDown". As you can see in the code, we use the <Item> element to statically define individual data items, where the Text property sets the character information to be explicit for the list control, and the Value property is the hidden value associated with the displayed character information (in this case, the manufacturer and model of the handset). Since you select a data item, the SelectionList list control does not automatically post the changed information back to the server, so a command control is placed on the FORM1 to produce a postback. This means that when the user chooses an item in the list, the Submit button can be sent back to the server side for processing, and we set the command control OnClick event handler function to Handlesingleselection in this example. The specific contents of the event handler you can view the corresponding code behind the file. The Form2 function is to show that the data item is selected by the user, and when you click the Submit button, the Form2 form will display the information as the active form.

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;
}
}
Program code Description: Handlesingleselection is the handler function for the command control's onclick event. Once the user clicks on the command button, the Form2 becomes the active form. and displays the character information and hidden values of the selected data item on the LABEL3 control.

If you do not set the following code in the mobile Web.config file, there will be an error in the Openwave browser:

<sessionstate mode= "InProc" cookieless= "true" timeout= "" "> </sessionState>
For this reason, you might want to replace the following mobile Web.config configuration code with the mobile Web.config configuration code that is automatically generated by Visual Studio:

Web.config

<?xml version= "1.0"? > >
!--Note: In addition to manually editing this file, you can also use the WEB administration tool to

Configure settings for the application. You can use the Web site-> asp.net configuration option in Visual Studio.

A complete list of settings and comments in Machine.config.comments, which is typically located in \windows\microsoft.net\framework\v2.0.xxxxx\config
-->
<configuration>
<appSettings/>
<connectionStrings/>
<system.web>
!--
Set compilation debug= "True" to insert debug symbols into the compiled page.
However, because this can affect performance, this value is set to true only during the development process.
-->
<compilation debug= "true"/>
!--
The <authentication> section allows you to configure the asp.net used by the
Secure authentication mode to identify the incoming user.
-->
<authentication mode= "Windows"/>
!--
If an unhandled error occurs during the execution of the request, the <customErrors> section
You can configure the appropriate processing steps. Specifically, developers can use this section to
Configure the HTML error page to be displayed in place of the error stack trace.
-->
<customerrors mode= "RemoteOnly" defaultredirect= "genericerrorpage.htm"
!--
<error statuscode= "403" redirect= "noaccess.htm"
<error statuscode= "404" redirect= "filenotfound.htm"
-->
</customErrors>
!--
Fully qualified URL of client redirection
Some mobile devices require that the URL for client redirection be fully qualified.
-->
!--
Specifying a data dictionary type without cookies
This causes the contents of the dictionary to appear in the local request URL query string.
This is required for Forms authentication on devices that do not have cookies.
-->
<mobilecontrols cookielessdatadictionarytype= "System.Web.Mobile.CookielessData"/>

<sessionstate mode= "InProc" cookieless= "true" timeout= "" "> </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>
The following is a screenshot of the pocket IE and Openwave browsers when they run the program:

　　 Identify the selected data item (multiple mode) in the selection list control

In the multiple-selection mode of a selection list control, you must detect each item in the list to determine which items are in the selected state. As mentioned previously, we can use the selection list control's Items property to access the MobileListItemCollection object. In the collection, those MobileListItem objects that are in the selected state whose selected property value will be true. The following list of programs is used to indicate that the data items in the list are in the selected state:

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"%>

<body>
<mobile:form id= "Form1" runat= "Server"
<mobile:label id= "Label1" runat= "Server" Please select the hand brand you want to buy </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" > Submit select </mobile:Command>
</mobile:Form>
<mobile:form id= "Form2" runat= "Server"
<mobile:label id= "Label2" runat= "server" > > The phone number you chose is: </mobile:Label>
<mobile:textview id= "TextView1" runat= "Server" >textview </mobile:TextView>
</mobile:Form>
</body>
Program code Description: Because we want to implement multiple selections in this list control, set the SelectType of the selection list control to MultiSelectListBox. Then add a TextView control to the Form2 control so that the character information and hidden value information for all the selected data items can be displayed.

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;
}
}
The corresponding screenshot below:

　　 binding Data Source

The following example creates a simple ArrayList collection as the data source for a selection list control. In the code back file, we created a mobile class to access each data item. In the Page_Load event handler, we add the created mobile object to a ArrayList collection. The selection list control is then bound to the ArrayList collection. Finally, the entire list is iterated by a foreach statement, and the information in each data item is displayed as a string on the page.

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"%>

<body>
<mobile:form id= "Form1" runat= "Server"
<mobile:label id= "Label1" runat= "Server" Please select the hand brand you want to buy </mobile:Label>
<mobile:selectionlist id= "SelectionList1" runat= "selecttype=" MultiSelectListBox "datatextfield=" Manufacturer "Datavaluefield=" "Model" >
</mobile:SelectionList>
<mobile:command id= "Command1" runat= "Server" > Submit select </mobile:Command>

</mobile:Form>
<mobile:form id= "Form2" runat= "Server"
<mobile:label id= "Label2" runat= "server" > > The phone number you chose is: </mobile:Label>
<mobile:textview id= "TextView1" runat= "Server" >textview </mobile:TextView>
</mobile:Form>
</body>

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>
Summary description of 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 {this.model;}}
}