Instructions

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

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.

<mob:Label runat="server" ID="LabelInstructions">Select a store name to view the full address.</mob:Label>
<asp:XmlDataSource ID="XmlDataSourceDetails" runat="server" DataFile="~/App_Data/Stores.xml"
    XPath="/"></asp:XmlDataSource>
<mob:DataList ID="DataListDetails" runat="server" DataSourceID="XmlDataSourceDetails"
    ForeColor="#333333" Width="100%">
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <ItemStyle BackColor="#EFF3FB" />
    <ItemTemplate>
        <mob:Panel runat="server" ID="PanelName" BorderStyle="Solid" BorderColor="#507CD1"
            BorderWidth="4" BackColor="#507CD1" Font-Bold="True" ForeColor="White">
            <mob:Label ID="LabelName" runat="server" Text='<%# XPath("name") %>'></mob:Label></mob:Panel>
        <mob:Panel runat="server" ID="PanelStreet">
            <mob:Label ID="LabelStreet" runat="server" Text='<%# XPath("street") %>'></mob:Label></mob:Panel>
        <mob:Panel runat="server" ID="PanelTown">
            <mob:Label ID="LabelTown" runat="server" Text='<%# XPath("town") %>'></mob:Label></mob:Panel>
        <mob:Panel runat="server" ID="PanelPostcode">
            <mob:Label ID="LabelPostcode" runat="server" Text='<%# XPath("postcode") %>'></mob:Label></mob:Panel>
    </ItemTemplate>
</mob:DataList>

Change the opening element of DataListNames to fire the SelectedIndexChanged event when the name is selected. The following code could be used to replace the original element.

<mob:DataList ID="DataListNames" runat="server" CssIncludeGroup="DataList" DataSourceID="XmlDataSourceList"
    CellPadding="4" ForeColor="#333333" ShowFooter="False" DataKeyField="ID" OnSelectedIndexChanged="SelectedIndexChanged"
    Width="100%">

Finally paste the following C# code into the codebehind class to process the event.

protected void SelectedIndexChanged(object sender, EventArgs e)
{
    XmlDataSourceDetails.XPath = String.Format("stores/store[@ID={0}]", DataListNames.SelectedValue);
}

Now open the web form in the Android emulator and select a name from the list. A screen similar to the following should be displayed.


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

The previous 2 steps work very well when dealing with short lists of data. However there may be hundreds of records in the data source. 51Degrees.mobi - .Net Mobile Framework enhances the standard DataList control to support paging in a very similar way to the standard DataGrid control.

Place the following ASP.NET code at the bottom of the web form.

<mob:Pager ID="Pager1" runat="server" ControlToBind="DataListNames" PagerMode="NumericFirstLast" ButtonCount="3">
</mob:Pager>

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.

<mob:DataList ID="DataListNames" runat="server" CssIncludeGroup="DataList" DataSourceID="XmlDataSourceList"
    CellPadding="4" ForeColor="#333333" ShowFooter="False" DataKeyField="ID" OnSelectedIndexChanged="SelectedIndexChanged"
    Width="100%" AllowPaging="true" PageSize="3">

Opening the revised page on an Android Emulator displays a screen similar to the following.




A screen similar to the following will appear for the same page displayed on a Nokia S40.

 

The number of buttons, styles and size of the page can all be controlled via properties of the Pager control or Data List. See the full Documentation for a list of Pager options and features.

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.

Tutorials

NumberSorted By Number In Ascending OrderTutorialSummary
1InstallationInstall 51Degrees - .Net Mobile Framework and confirm the installation is successful.
2EmulatorsConfigure IIS to work with mobile device emulators improving development productivity.
3Hello WorldAdd a mobile label control to a mobile page and understand major differences compared to standard ASP.NET.
4Mobile ProfileUse a simple database to gain additional insight into the mobile device performance, optimise view state and persist data.
5Clever ImagesOptimise images to consume the bare minimum amount of data for the display on the requesting mobile device without compromising image quality.
6Entering TextMake it easier for your users to enter text by remembering previous values and providing common options.
7DatesCaptures dates quickly and easily using all the capabilities of the requesting mobile device.
8LocationFind out where the requesting mobile device is or get location information from users.
9MapsDisplay maps from Google or Bing, move around and show multiple markers.
10Data Lists and PagersDisplay lists of items and page between them.
11Styling Mobile ControlsStyle mobile web applications using different common characteristics of mobile devices such as screen size or input method.
12DeploymentDeploy the Framework onto a production server and configure IIS and SQL.