asp.net 2.0 Mobile Development list control

Asp.net| Control

　　Overview

In many cases, we use the list control to make it easier for the user to select some options. For example, when registering a new user on a website, you usually ask if your gender is "male" or "female", then we use a single button for the user to make the appropriate choice. And when you fill out your home address, you typically use a drop-down list of provincial names to allow users to choose directly, which reduces the amount of user input. These individual buttons and Drop-down lists are all in the form of a list control in the ASP.net mobile program. We can use list controls to render lists of various forms (single, multiple, Drop-down lists) for the user to select and use. However, in the ASP.net 2.0 Mobile Development toolkit, there are only three list controls, respectively SelectionList, list, and ObjectList controls. Although there are not many types of list controls in ASP.net 2.0, we can use the three list controls of SelectionList, list, and ObjectList to implement almost all of the functions of single, multiple, and so on. In this series, we will explore some of the basic features and usage of these three controls, and explain the similarities and differences between the three controls.

Figure 1 is the relationship of the SelectionList, list, and ObjectList three controls over the inheritance of the class:

Figure 1

SelectionList is the simplest of the three list controls above, but it can be rendered in a variety of different types, so it has great flexibility to use the applied list type for different requirements. Also because the SelectionList control does not support paging, the control appears to be powerless in cases where multiple list items are included. It is also important to note that SelectionList is the only one of these three list controls that supports multiple selections. The control can also be rendered in the form of a drop-down list or as a single and multiple-selection box, which, of course, must be accepted by browsers on the mobile device. In some WML browsers, only special rendering forms are supported, such as single and multiple-selection buttons, and the Drop-down list is not supported for rendering. Figure 2 illustrates the difference between rendering a drop-down list on different browsers.

Figure 2 on the Pocketie browser shown in the previous illustration, the list control is rendered in the form of a drop-down list. In a Openwave WML browser, the rendering form of a drop-down list type is not supported, in which case the individual list items in the list are displayed for the user to select accordingly.

The list control supports paging functionality, which means it supports lists with more list items. It can only be rendered as a bulleted or numbered list (as long as the browser supports it). In addition, other list forms that are supported by SelectionList (such as a drop-down list) cannot be implemented in the list. The list control in Figure 3 is rendered as a numbered list and supports paging functionality.

Figure 3 The list control appears as a numbered list on the page, and it supports paging functionality.

The most complex of these three list controls is the ObjectList control. The SelectionList and list controls allow you to statically declare list items using server control syntax, but ObjectList controls cannot add list items in this way, and you must bind the Objectlis list control to the corresponding data source. Then add the list items to the list by code. The ObjectList control allows multiple fields to be displayed in one list item at a time, which is not available to the other two controls, and allows only one field for each list item to be displayed. In addition, each list item in the ObjectList control can be associated with more than one command, and features that are not available to the other two controls.

Figure 4 in the ObjectList control, you can display multiple fields in each list item. It also shows the field of team name, loss, win and points.

Figure 5 Each list item can be associated with multiple commands, and the links below the page are the commands associated with the list item, and you can select different commands to produce different actions

The following table summarizes the main features of the three controls listed above:

Ability	SelectionList	List	ObjectList
Whether you can render on an HTML browser by a Drop-down list, list box, single, or multiple-selection button	√
Whether to support multiple selections	√
Render as a bulleted or numbered list		√
Whether the paging feature can be enabled when the list contains more list items	√	√
Whether list items can be statically generated through server syntax declarations	√	√
Whether you can bind to the data source	√	√	√
Whether multiple fields can be displayed at the same time in a list item			√
Whether a corresponding event is triggered when a list item is selected	√ (note)	√	√
Whether each list item can customize the associated command			√
Whether to support templates		√	√
Note : The SelectionList List control cannot automatically generate a postback (postback) operation on its own after selecting a list item. You must place a command control on the form control that contains the SelectionList list control, and then the command control will send back information about the change in list options to the server. This allows the asp.net to make the appropriate processing from this information and return the processed information to the mobile page.

　　 build lists in different ways

As we begin to explore the specific usage of each list control, let's first take a look at the common characteristics of these three controls. The SelectionList and list controls allow developers to define statically defined list items, which means that we can use the <Item> tag in server control syntax to define the text and value information for each list item, and the dynamic implementation is through code, Creates a System.Web.UI.MobileControls.MobileListItem object that corresponds to each list item in the list and adds those objects to the list control's Items collection. Because each list item is preset, all of us also call this list a static list.

Another way is to bind a list control to a data source, because the text and value information required by all list items in the list control is read from the data source, so these list items are dynamically generated from that information. Note that the three list controls above all support the way data is bound to generate lists dynamically.

　　 implementation of static lists

As mentioned earlier, we can implement the list in a static way. In fact, this implementation is the use of the <Item> tag in server control syntax to set the text and value information required for each list item. Let's take a piece of code to show how to implement a list statically. Listing 1 is a declaration of a SelectionList control, and we want to select a list item from that list control. Here we will be the phone's brand and model as the text of the list items and value information, you can use the Text property in each <Item> tag automatically textual information, use the Value property to specify the values information.

Program Listing 1:

<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>
In the chapter on "SelectionList list controls", we will use the specific example in the code in Listing 1, which is just a brief introduction to the method of implementing a static list. In fact, we can also implement a static list in a visual way, of course, depending on the support of the Visual Studio 2005 development environment. In Visual Studio 2005, a very useful property builder is provided so that you can easily define a static list. The Property Builder dialog box pops up as soon as you select the smart tag for the list control and then select the Property Builder link. We can visually generate the code in Listing 1 from this dialog box, as shown in Figure 6.

Figure 6 We can use the Create New Item button in this dialog box to produce a new list item. Then you create a list item by filling in the text and value information for the list item in the item text and value text boxes for this list item. If you want to adjust the order between the individual list items, click the up and down arrow buttons to make the appropriate adjustments. In the General tab of the Property Builder dialog box, users can select the rendering of list controls on the page. For example, the SelectionList list control supports several forms such as Drop-down lists, list boxes, individual buttons, check buttons, and multiple-selection list boxes, and developers can choose the right type based on the actual needs, as shown in Figure 7.

Asp. NET runtime resolves individual list items in server control syntax in the way described below. When you use a static way to build a list, ASP. NET actually creates a System.Mobile.UI.MobileControls.MobileListItem object for each list item in the list, and uses the <Item> The text information and value information specified by the text and the Value property in the label initializes the corresponding MobileListItem object. The initialized MobileListItem object is then added to a System.Mobile.UI.MobileControls.MobileListItemCollection collection object. We can access this MobileListItemCollection collection object in code by using the SelectionList or list class's Items property. In fact, listing 1 and Listing 2 have the same functionality, both ways to generate a static list, but listing 1 hides the underlying implementation of the static list and is easier to manipulate.

Program Listing 2

protected void Page_Load (object sender, EventArgs e)
{
if (! IsPostBack)
{
SELECTIONLIST1.ITEMS.ADD (New MobileListItem ("Dopoda", "P800"));
SELECTIONLIST1.ITEMS.ADD (New MobileListItem ("Motorola", "A1200"));
SELECTIONLIST1.ITEMS.ADD (New MobileListItem ("Nokia", "N70"));
SELECTIONLIST1.ITEMS.ADD (New MobileListItem ("Samsung", "E638"));
}
}

　　 bind a list control to a data collection

As mentioned earlier, in addition to defining a list in a static way, we can bind the SelectionList, list, and ObjectList three list controls to a specific data source. These list controls support two types of data sources: System.Collections.IEnumerable and System.ComponentModel.IListSource. Net Many of the collection classes in the framework implement the IEnumerator interface, which supports simple enumeration functionality. The specific instances of these classes have array, ArrayList, Hashtable, and ListDictionary in the System.Collections namespace, as well as some collection objects associated with the control ( For example, the mobilelistitemcollection used in the previous code). If you want to see all the collection classes that implement the IEnumerator interface, refer to the MSDN Help documentation yourself.

You can also bind a list control to a IListSource data collection. The two classes in the System.Data namespace implement the IListSource interface, which is the DataSet and DataTable that we use frequently in ado.net. We know that these two classes are associated because the dataset is equivalent to a collection of multiple DataTable groups. The DataSet class is a major component in the Ado.net architecture, and the dataset is also equivalent to a cache of data retrieved in the database in memory. When the data source of a list control is a DataSet object, because a dataset may contain multiple DataTable objects, So we must also use the Selectionlist.datamember property to specify exactly which DataTable object to populate the list items with. Note that when you use a IEnumerator data source, it is not necessary to specify the DataMember attribute. The specific application of the dataset in the ASP.net mobile program is described in other chapters.

When you need to dynamically implement a list in a data-bound manner, you should specify an associated data source for the DataSource property of the list control. If the data source is a DataSet object, then you will also need to use the DataMember property to specify exactly where to populate the list items with that DataTable. For the SelectionList and list controls, you can use the DataTextField and DataValueField two properties to specify two fields in the data source, and the list control automatically takes the contents of the two fields as textual and value information for each list item. The ObjectList list control uses the LabelField property to specify a field in the data source that applies the content in the field to each list item, and you can view the other field contents of each list item in the ObjectList Details view page.

We can implement this data-binding property setting in the form of code or server control syntax. For example, you want to use the manufacturer field as the textual information for each list item in a SelectionList list control, and the Model field as the value information for each list item. Then the method is set up as shown in Listing 3 of the program:

Program Listing 3

<mobile:selectionlist id= "SelectionList1" runat= "selecttype=" MultiSelectListBox "datatextfield=" Manufacturer "Datavaluefield=" "Model" >
</mobile:SelectionList>
To get the contents of the corresponding field in the data source, we also need to define a class so that each list item can read the corresponding text and value information.

Program Listing 4

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;}}
}
Then, in the Page_Load event handler, create all the data items and add them to a ArrayList object. The last is to set the DataSource property of the list control, where we specify DataSource as the ArrayList object. Complete the steps above and then call the DataBind method, which binds the list control to the data source.

Program Listing 4

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 ();
}
}
The complete example of using the preceding code will be applied to each list control when it is specifically explored.

　　 Tips: The DataBind method is critical for data binding, and many developers often forget to call this method so that list controls do not display any list items. There are two ways to use the DataBind method, one of which is to use the DataBind method separately on each list control that you want to bind data to, as shown in Listing 4 of the program. You can also use the Mobilepage.databind method (use this in Listing 4 of the program). DataBind () instead of Selectionlist1.databind (), here's the This represents MobilePage). This allows you to use only one this when there are multiple data-bound list controls on the page. The DataBind () method enables the binding of all list controls and data sources without calling the DataBind method once for each list control that implements data binding.