Objectives

• Display multiple rows from a data source as a selectable list.
• Understand the deficiencies of some mobile device emulators.
• Select a row to display additional information.
• Use a Pager control to reduce the length of the list. 

Prerequisites

• Complete Installation, Emulators and Mobile Profiles tutorials.

Step 1 - Display a List of Rows

Before we start we need to create a data source for data aware mobile controls to use. Create a new XML file in the App_Data folder called Stores.xml and paste the following XML into this new file. The address details of 8 stores can now be used with the XmlDataSource control.

<?xml version="1.0" encoding="utf-8"?>

<stores>

  <store ID="1">

    <name>Bury</name>

    <latitude>53.593699</latitude>

    <longitude>-2.295181</longitude>

    <street>12 Union Street</street>

    <town>Bury</town>

    <postcode>BL9 0NY</postcode>

  </store>

  <store ID="2">

    <name>Sheffield</name>

    <latitude>53.37919</latitude>

    <longitude>-1.470352</longitude>

    <street>95 Pinstone Street</street>

    <town>Sheffield</town>

    <postcode>S1 2HJ</postcode>

  </store>

  <store ID="3">

    <name>Liverpool</name>

    <latitude>53.406445</latitude>

    <longitude>-2.980835</longitude>

    <street>145-146 Charlotte Way St Johns Precinct</street>

    <town>Liverpool</town>

    <postcode>L1 1NA</postcode>

  </store>

  <store ID="4">

    <name>Bolton</name>

    <latitude>53.578372</latitude>

    <longitude>-2.429099</longitude>

    <street>17 Victoria Square</street>

    <town>Bolton</town>

    <postcode>BL1 1RJ</postcode>

  </store>

  <store ID="5">

    <name>Luton</name>

    <latitude>51.879443</latitude>

    <longitude>-0.413328</longitude>

    <street>Units 104-106 The Arndale SC</street>

    <town>Luton</town>

    <postcode>LU1 2LJ</postcode>

  </store>

  <store ID="6">

    <name>Newcastle</name>

    <latitude>54.975861</latitude>

    <longitude>-1.612163</longitude>

    <street>54 Northumberland Street</street>

    <town>Newcastle Upon Tyne</town>

    <postcode>NE1 7DF</postcode>

  </store>

  <store ID="7">

    <name>Preston</name>

    <latitude>53.758811</latitude>

    <longitude>-2.701517</longitude>

    <street>32-34 Fishergate St Georges SC</street>

    <town>Preston</town>

    <postcode>PR1 2NR</postcode>

  </store>

  <store ID="8">

    <name>Bolton</name>

    <latitude>53.581165</latitude>

    <longitude>-2.429792</longitude>

    <street>37 Market Place</street>

    <town>Bolton</town>

    <postcode>BL1 2AL</postcode>

  </store>

</stores>

Now create a new Mobile Web Form and paste the following ASP.NET code between the form elements.

<asp:XmlDataSource ID="XmlDataSourceList" runat="server" DataFile="~/App_Data/Stores.xml"

    XPath="stores/store"></asp:XmlDataSource>

<mob:DataList ID="DataListNames" runat="server" CssIncludeGroup="DataList" DataSourceID="XmlDataSourceList"

    CellPadding="4" ForeColor="#333333" ShowFooter="False" DataKeyField="ID"

    Width="100%">

    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />

    <ItemStyle BackColor="#EFF3FB" Width="100%" />

    <ItemTemplate>

        <mob:LinkButton ID="LinkButtonName" runat="server" CommandArgument='<%# Eval("ID") %>'

            CommandName="Select" Text='<%# XPath("name") %>'></mob:LinkButton>

    </ItemTemplate>

    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />

    <HeaderTemplate>

        <mob:Label ID="LabelNamesHeader" runat="server">Stores</mob:Label>

    </HeaderTemplate>

    <SelectedItemStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />

    <AlternatingItemStyle BackColor="White" Width="100%" />

</mob:DataList>

Notice that an asp:XmlDataSource control is used on this form and the control is not prefixed mob:. This is because the control has no user interface and as such does not need to be adapted for optimum performance on mobile devices.

Open the web page using the Android emulator. A screen similar to the following should be displayed.



When a name is selected it will become highlighted.

Now open the same page on the Nokia S40 6th Edition emulator. A screen similar to the following will be displayed.



Notice how the list renders differently to the Android device. The standard ASP.NET LinkButton relies on JavaScript to process requests. However the Nokia S40 6th Edition, like many older feature phones, does not provide a robust implementation of JavaScript. The 51Degrees.mobi implementation of a LinkButton has been changed when displayed on non JavaScript devices to use standard HTML buttons and CSS styling instead.

Step 2 - Selecting Items

In the previous step a list of names were displayed for selection. We can now extend the example so that the full address of the store is displayed when the name is selected.

Add the following ASP.NET code to the top of the page.

The SelectedIndexChange event is used to update the XmlDataSourceDetails XPath property to select only the current record. See MSDN for more information about DataSource controls.

Now open the same page on the Nokia S40 6th Edition emulator. A screen similar to the following will be displayed.

Step 3 - Introducing Paging

Change the opening element of DataListNames to include two new attributes. AllowPaging enables the DataList to interact with the new Page control. PageSize determines the number of rows or screens that should appear on each page. The following code could be used to replace the original element.

Conclusion

The DataList can be used with other mobile controls to produce easy to navigate mobile web applications quickly and with minimal custom code. Any mobile web application which needs to list items should make use of the DataList control.