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

Chapter 6: Programming the List Controls

Overview

"Syntax" section, which shows how you program the control using ASP.NET server control syntax. Also for each control is a "Properties and Events" section, which describes the usage of each of the properties and events of the control and gives information that will help you program the control in code. Finally, example applications are presented that demonstrate the different ways you can use these list controls. There are more examples for List controls than for other controls, reflecting their versatility. Figure 6-1 shows the class hierarchy of these three controls.

Figure 6-1: Class hierarchy of the list controls

Of the three list controls, SelectionList is the simplest because it isn't able to paginate a long list across several display pages and therefore is suitable only for small lists. The SelectionList control is the only one of the three controls that accepts multiple selections. This control can be displayed as a drop-down list, as a set of radio buttons, and in other presentation formats for browsers with such support (including HTML browsers). The List control supports pagination, which means it supports long lists. It can render as a bulleted or numbered list (on browsers that support that) but it does not support the decorated forms (drop-down lists, etc.) that the SelectionList supports. However, you can customize the rendering of the List control using Templates, which we'll examine in Chapter 10.

The ObjectList control is the most sophisticated of the three list controls. The SelectionList and List controls allow you to define list items statically using server control syntax, but you can't do this with the ObjectList control; you must add list data programmatically by binding the list to a data source. The ObjectList allows you to display more than one field from the data item, whereas the other list controls only display a single item list. You can also display a customizable menu of options after a user selects a list item. The ObjectList control gives you the flexibility to develop responsive, interactive user interfaces.

The List and ObjectList controls are both templated controls, meaning that they offer great flexibility in how they are rendered on various devices. In Chapter 10, we'll describe this aspect of the two controls' behavior and provide more detail about advanced list programming techniques.

Table 6-1 summarizes the main capabilities of each list control.

Building Static or Data-Bound Lists

Before we examine each of the list controls separately, it's worth examining behavior that's common to all of them. The SelectionList and List controls allow you to define static list items, meaning that you define each item in the list using <Item> tags in server control syntax, or in code by creating System.Web.UI.MobileControls.MobileListItem objects and adding them to the Items collection of the control.

The alternative is to bind the control to a data source, so the values in the list are read from a DataTable or other .NET Framework data collection object, such as an ArrayList. All three list controls support data binding.

Defining Static List Items

You can use the <Item> tag with both the SelectionList control and the List control to define static list items in server control syntax. For example, look at this code:

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

For an example application that uses this technique, see Listing 6-1 later in this chapter.

Visual Studio .NET provides a useful Item Editor you can use to define static list items, as shown in Figure 6-2. Access this editor by clicking the Property Builder link at the bottom of the Properties window. You can then define items in the Items view of the Properties dialog box.

Figure 6-2: Using the SelectionList Properties dialog box to build a static list

When the ASP.NET runtime parses this server control syntax, it constructs System.Mobile.UI.MobileControls.MobileListItem objects, initializing the properties of the object using the Text and Value attributes of the <Item> tag, and it inserts the object into a System.Mobile.UI.MobileControls.MobileListItemCollection object, which you can access in code by getting the Items property of the SelectionList or List class. In fact, the following code is exactly equivalent to the server control syntax shown above; you could create static list items in code in this way, instead of defining them in server control syntax:

    private void Page_Load(Object sender, EventArgs e)
{
if (!IsPostBack)
{
SelectionList1.Items.Add(
new MobileListItem("Dunes", "Posn:1 Pl:38 Pts:80"));
SelectionList1.Items.Add(
new MobileListItem ("Phoenix", "Posn:2 Pl:38 Pts:70"));
SelectionList1.Items.Add(
new MobileListItem ("Eagles", "Posn:3 Pl:38 Pts:69"));
SelectionList1.Items.Add(
new MobileListItem ("Zodiac", "Posn:4 Pl:38 Pts:68")); 
}
}

Binding to a Data Collection

Instead of defining list items statically, you can bind the SelectionList control, the List control, and the ObjectList control to a data source. These controls support two types of data sources: System.Collections.IEnumerable and System.ComponentModel.IListSource. Many of the collection classes supplied in the Microsoft .NET Framework implement the IEnumerator interface and consequently support simple enumeration. Some examples from the System.Collections namespace include Array, ArrayList, Hashtable, and ListDictionary, as well as many of the collections associated with controls, such as MobileListItemCollection (used in the preceding code sample). To see the full list of classes that implement IEnumerable, click Help in Visual Studio .NET and search for IEnumerable. Statements such as C#'s foreach and Microsoft Visual Basic .NET's For Each…Next can iterate through an enumerable object.

You can also bind the list controls to IListSource data collections. Two .NET classes from the System.Data namespace implement this interface: DataSet and DataTable. These classes are related because a DataSet class is actually a collection of DataTable objects. The DataSet class is a major component of the Microsoft ADO.NET architecture and represents an in-memory cache of data retrieved from a database. When using a DataSet for the data source, you must always set the SelectionList.DataMember property to the name of the DataTable in the DataSet you want to use as the data source. You don't need to set the DataMember property when using an IEnumerable data source, however. In Chapter 11, we'll explore how you can use DataSet objects in your mobile applications.

When you databind a list control, you use the DataSource property to identify the source data collection. If your data source is a DataSet, you use the DataMember property to identify which DataTable inside the DataSet is the required data source. With the SelectionList and List controls, you use the DataTextField and DataValueField properties to identify the fields inside the data record to extract for the display value and the hidden value, respectively. The ObjectList uses the LabelField property to identify the field to display in the initial list. See the descriptions of the individual controls later in this chapter for more details on how to use these properties.

You can set these properties in server control syntax or in code. For example, you could set the name of the field to display in a SelectionList to be "Stats" and the field to supply the hidden value to be "TeamName" with the following server control syntax:

    <mobile:SelectionList id="SelectionList1" runat="server" 
DataValueField="Stats" DataTextField="TeamName" 
SelectType="MultiSelectListBox">
</mobile:SelectionList>

In the code-behind module, you could define a simple class to store a data record, as you see in this example:

    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; } }
}

Then, in the Page_Load event handler, create each of the data items and load them into an ArrayList object. Finally, set the DataSource property of the list control to be the ArrayList instance, and then call the DataBind method of the control to bind the control to the data:

        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();
}
}

See Listing 6-6 later in this chapter for the complete example application that uses this technique.