Consuming OData in Windows Phone 7.1 or Mango Phone

Background

If you have read my posts discussing WCF Data Service and Windows Phone 7, there were many steps involved in consuming WCF Data Service in Windows Phone 7:

1. Download OData client for Windows Phone 7 and add as reference in Windows Phone 7 project
2. Create Proxy of WCF Data Service using svcutil.exe
3. Add as existing item create proxy in Windows Phone 7 project
4. Performing the operations from Phone

You can read the previous article here.

In the Beta release of Windows Phone 7.1 or Mango phone, consuming OData has been improved very impressively; essentially now you do not need to perform all the steps mentioned in previous articles.

OData URL

In this post, I will be using NorthWind OData URL. You can access that URL from following link.

http://services.odata.org/Northwind/Northwind.svc/

We are going to fetch Customers table from NorthWind DataBase.

Create Project and Add Service Reference

Create a new Windows Phone 7.1 project and choose target framework as Windows Phone 7.1





Right-click on the project and add Service Reference.



In Address you need to give URL of OData. As we discussed in previous steps, here I am giving OData URL of NorthWind Database hosted by OData.org.



Writing Code behind

Add the following namespaces on MainPage.Xaml.cs page:



Please make sure about the second namespace. Since I have added a service reference for OData with name ServiceReference1 and the name of the project is ODatainMangoUpdated.

Globally define the following variables:



In the constructor of MainPage:

1. Create instance of NorthWindEntities
2. Create instance of DataServiceCollection passing context
3. Write the LINQ query
4. Attach event handler LoadCompleted on DataServiceCollection object
5. Fetch the result asynchronously
   
   

On the completed event:

1. Check whether the next page exists or not; if it does then load it automatically
2. Set the DataContext of layout as result
   
   

Design Page and Bind List Box

Here you need to create a ListBox and in the Data Template put three TextBlocks vertically. Bind the different columns of table to the text blocks.



For your reference the full source codes are given below. Feel free to use them.

MainPage.Xaml

<phone:PhoneApplicationPage 
    x:Class="ODatainMangoUpdated.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

     <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

 
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="OData in Mango" Style="{StaticResource PhoneTextNormalStyle}"/>

       </StackPanel>

         <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

             <ListBox x:Name="MainListBox" Margin="0,0,-12,0" ItemsSource="{Binding}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Margin="0,0,0,17" Width="432">
                            <TextBlock Text="{Binding Path=CompanyName}" TextWrapping="NoWrap" 
                                       Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                            <TextBlock Text="{Binding Path=ContactName}" TextWrapping="NoWrap" 
                                       Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                            <TextBlock Text="{Binding Path=Phone}" TextWrapping="NoWrap" Margin="12,-6,12,0" 
                                       Style="{StaticResource PhoneTextSubtleStyle}"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
 
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

MainPage.Xaml.cs 

using System;
using System.Linq;
using Microsoft.Phone.Controls;
using System.Data.Services.Client;
using ODatainMangoUpdated.ServiceReference1;
 
namespace ODatainMangoUpdated
{
    public partial class MainPage : PhoneApplicationPage
    {
        private NorthwindEntities  context;
        private readonly Uri ODataUri = new Uri("http://services.odata.org/Northwind/Northwind.svc/");
        private DataServiceCollection<Customer> lstCustomers; 
 
        public MainPage()
        {
            InitializeComponent();
            context = new NorthwindEntities(ODataUri);
            lstCustomers = new DataServiceCollection<Customer>(context);
            var result = from r in context.Customers  select r;
            lstCustomers.LoadCompleted += new EventHandler<LoadCompletedEventArgs>(lstCustomers_LoadCompleted);
            lstCustomers.LoadAsync(result);
          
 
        }
 
        void lstCustomers_LoadCompleted(object sender, LoadCompletedEventArgs e)
        {           
            if (lstCustomers.Continuation != null)
            {               
                lstCustomers.LoadNextPartialSetAsync();
            }
            else
            {               
                this.LayoutRoot.DataContext = lstCustomers;
            }
 
        }
    }
}

Run Application

Press F5 to run the application. You should get all the records from the Customer table into the ListBox.



I hope this post was useful. Thanks for reading..