Northwind-mania: Read Northwind oData into a Windows 8 Metro Style C# / XAML application

Once again I will use the well known Northwind database. This time I will demonstrate how easy it is to render an oData feed originating from http://services.odata.org/Northwind/Northwind.svc.

Pre-requisites:

• Windows 8 Release Preview
• Visual Studio 2012 RC

Step 1:

In Visual Studio 2012 RC, start a new project as follows:

FILE >> New Project … >> Visual C# >> Windows Metro Style >> Blank App (XAML)

Name the application “Win8ReadOdata” then click OK.

Step 2:

We will retrieve data from an oData source at odata.org. In “Solution Explorer”, right-click on References and select “Add Service Reference…”. Enter the address http://services.odata.org/Northwind/Northwind.svc then click on the “Go” button. After the service is found, give the Namespace the name “NorthwindServiceReference” then clock OK.

At this point a proxy to the service is created for us.

Step 3:

Open the “MainPage.xaml” document and paste the following XAML code inside of the “Grid” element:

<StackPanel Background="Transparent" VerticalAlignment="Center" x:Name="fullMode" >
        <ListBox Name="categoriesList" Margin="40" Foreground="Blue" Background="Transparent" Height="500">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="100,0,0,10" VerticalAlignment="Center" Orientation="Horizontal" >
                        <TextBlock Text="{Binding CategoryID}" Margin="10,0,0,0" FontSize="26" VerticalAlignment="Center" Foreground="Green"/>
                        <TextBlock Text="{Binding CategoryName}" Margin="10,0,0,0" FontSize="22" VerticalAlignment="Center" Foreground="Red"/>
                        <TextBlock Text="{Binding Description}" Margin="10,0,0,0" FontSize="22" VerticalAlignment="Center"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
</StackPanel>

The above markup produces a listbox control that will hold records from the “Categories” table in the Northwind database. We will display the CategoryID, CategoryName, and Description database columns in Green, Red, and Blue colors respectively just so that they are easily distinguishable.

Step 4:

Place the following declaration in MainPage.xaml.cs just before the constructor:

NorthwindEntities ctx = new NorthwindEntities(new Uri("http://services.odata.org/Northwind/Northwind.svc/"));

You may need to resolve the NorthwindEntities class.

Put the following code inside the constructor just after this.InitializeComponent().

LoadCategoriesThruOData();

Add these methods to the MainPage.xaml.cs:

private async void LoadCategoriesThruOData()
{
    var results = await Task<IEnumerable<Category>>.Factory.FromAsync(ctx.Categories.BeginExecute(AnotherEndContinuation, ctx), ContinuationDelegate);

    // This fires only after we have a response back.
    this.ParseAndBindData(results);
}

Func<IAsyncResult, IEnumerable<Category>> ContinuationDelegate = EndContinuation;
private static IEnumerable<Category> EndContinuation(IAsyncResult result)
{
    NorthwindServiceReference.NorthwindEntities client = (NorthwindServiceReference.NorthwindEntities)result.AsyncState;
    return client.Categories.EndExecute(result);
}

private static void AnotherEndContinuation(IAsyncResult result)
{
    // Do nothing here.
}

private void ParseAndBindData(IEnumerable<Category> results)
{
    categoriesList.ItemsSource = results;
}

The LoadCategoriesThruOData()  method is responsible for making an async call to the oData service. The ParseAndBindData() method is called once data is successfully received.

After resolving some missing namespaces, run the application by hitting F5. The result should look like this:

In future posts I will extend this application with abilities to insert, update, and delete data.