Binding OData Feeds to Controls in a Client Application (WCF Data Services Quickstart)

Article
05/23/2013

In this final task of the WCF Data Services quickstart, you will create a more advanced client application to consume the Northwind service created in the previous task. You will add a new Windows Presentation Foundation (WPF) application to the solution, add a reference to the writable Northwind service, and access the OData feed from the client application by using the generated client data service classes and client libraries. You will then use this application to update Northwind data by using OData.

Note

By default, Visual Studio auto-assigns a port number to the localhost URI on your computer. This task uses the port number 12345 in the URI examples. For more information about how to set a specific port number in your Visual Studio project see Creating the Northwind Data Service (WCF Data Services Quickstart).

To create the client application by using Visual Studio

In Solution Explorer, right-click the solution, click Add, and then click New Project.
In Project types, click Windows, and then select WPF Application in the Templates pane.
Enter NorthwindClient for the project name, and then click OK.

Open the file MainWindow.xaml and replace the XAML code with the following code:

    <Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Northwind Orders" Height="335" Width="425" 
        Name="OrdersWindow" Loaded="Window1_Loaded">
    <Grid Name="orderItemsGrid">
        <ComboBox DisplayMemberPath="OrderID" ItemsSource="{Binding}"
                  IsSynchronizedWithCurrentItem="true" 
                  Height="23" Margin="92,12,198,0" Name="comboBoxOrder" VerticalAlignment="Top"/>
        <DataGrid ItemsSource="{Binding Path=Order_Details}"  
                  CanUserAddRows="False" CanUserDeleteRows="False"  
                  Name="orderItemsDataGrid" Margin="34,46,34,50"
                  AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn  Header="Product" Binding="{Binding ProductID, Mode=OneWay}" />
                <DataGridTextColumn  Header="Quantity" Binding="{Binding Quantity, Mode=TwoWay}" />
                <DataGridTextColumn  Header="Price" Binding="{Binding UnitPrice, Mode=TwoWay}" />
                <DataGridTextColumn  Header="Discount" Binding="{Binding Discount, Mode=TwoWay}" />                
            </DataGrid.Columns>     
        </DataGrid>
        <Label Height="28" Margin="34,12,0,0" Name="orderLabel" VerticalAlignment="Top" 
               HorizontalAlignment="Left" Width="65">Order:</Label>
        <StackPanel Name="Buttons" Orientation="Horizontal" HorizontalAlignment="Right" 
                    Height="40" Margin="0,257,22,0">
            <Button Height="23" HorizontalAlignment="Right" Margin="0,0,12,12" 
                Name="buttonSave" VerticalAlignment="Bottom" Width="75" 
                    Click="buttonSaveChanges_Click">Save Changes
            </Button>
            <Button Height="23" Margin="0,0,12,12" 
                Name="buttonClose" VerticalAlignment="Bottom" Width="75" 
                    Click="buttonClose_Click">Close</Button>
        </StackPanel>
    </Grid>
</Window>

To add a data service reference to the project

Right-click the NorthwindClient project, click Add Service Reference, and then click Discover.

This displays the Northwind data service that you created in the first task.
In the Namespace text box, type Northwind, and then click OK.

This adds a new code file to the project, which contains the data classes that are used to access and interact with data service resources as objects. The data classes are created in the namespace NorthwindClient.Northwind.

To access data service data in the WPF application

In Solution Explorer under NorthwindClient, right-click the project and click Add Reference.
In the Add Reference dialog box, click the .NET tab, select the System.Data.Services.Client.dll assembly, and then click OK. In Solution Explorer under NorthwindClient, open the code page for the MainWindow.xaml file, and add the following using statement (Imports in Visual Basic).
```
Imports System.Data.Services.Client
Imports NorthwindClient.Northwind
```
```
using System.Data.Services.Client;
using NorthwindClient.Northwind;
```

Insert the following code that queries that data service and binds the result to a DataServiceCollection<T> into the MainWindow class:

Note

You must replace the host name localhost:12345 with the server and port that is hosting your instance of the Northwind data service.

Private context As NorthwindEntities
Private customerId As String = "ALFKI"

' Replace the host server and port number with the values 
' for the test server hosting your Northwind data service instance.
Private svcUri As Uri = New Uri("https://localhost:12345/Northwind.svc")

Private Sub Window1_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Try
        ' Instantiate the DataServiceContext.
        context = New NorthwindEntities(svcUri)

        ' Define a LINQ query that returns Orders and 
        ' Order_Details for a specific customer.
        Dim ordersQuery = From o In context.Orders.Expand("Order_Details") _
                              Where o.Customer.CustomerID = customerId _
                              Select o

        ' Create an DataServiceCollection(Of T) based on
        ' execution of the LINQ query for Orders.
        Dim customerOrders As DataServiceCollection(Of Order) = New  _
            DataServiceCollection(Of Order)(ordersQuery)

        ' Make the DataServiceCollection<T> the binding source for the Grid.
        Me.orderItemsGrid.DataContext = customerOrders
    Catch ex As Exception
        MessageBox.Show(ex.ToString())
    End Try
End Sub

private NorthwindEntities context;
private string customerId = "ALFKI";

// Replace the host server and port number with the values 
// for the test server hosting your Northwind data service instance.
private Uri svcUri = new Uri("https://localhost:12345/Northwind.svc");

private void Window1_Loaded(object sender, RoutedEventArgs e)
{
    try
    {
        // Instantiate the DataServiceContext.
        context = new NorthwindEntities(svcUri);

        // Define a LINQ query that returns Orders and 
        // Order_Details for a specific customer.
        var ordersQuery = from o in context.Orders.Expand("Order_Details")
                          where o.Customer.CustomerID == customerId
                          select o;

        // Create an DataServiceCollection<T> based on 
        // execution of the LINQ query for Orders.
        DataServiceCollection<Order> customerOrders = new
            DataServiceCollection<Order>(ordersQuery);

        // Make the DataServiceCollection<T> the binding source for the Grid.
        this.orderItemsGrid.DataContext = customerOrders;
    }
    catch (Exception ex)
    {
        MessageBox.Show(ex.ToString());
    }
}

Insert the following code that saves changes into the MainWindow class:

Private Sub buttonSaveChanges_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Try
        ' Save changes made to objects tracked by the context.
        context.SaveChanges()
    Catch ex As DataServiceRequestException
        MessageBox.Show(ex.ToString())
    End Try
End Sub
Private Sub buttonClose_Click(ByVal sender As Object, ByVal a As RoutedEventArgs)
    Me.Close()
End Sub

private void buttonSaveChanges_Click(object sender, RoutedEventArgs e)
{
    try
    {
        // Save changes made to objects tracked by the context.
        context.SaveChanges();
    }
    catch (DataServiceRequestException ex)
    {
        MessageBox.Show(ex.ToString());

    }
}
private void buttonClose_Click(object sender, RoutedEventArgs e)
{
    this.Close();
}

To build and run the NorthwindClient application

In Solution Explorer, right-click the NorthwindClient project and select Set as startup project.
Press F5 to start the application.

This builds the solution and starts the client application. Data is requested from the service and bound to the controls.
Edit a value in the Quantity column of the data grid, and then click Save.

Changes are saved to the data service.

Note

This version of the NorthwindClient application does not support adding and deleting of entities.

Next Steps

You have successfully created the client application that accesses the sample Northwind OData feed. You have also completed the WCF Data Services quickstart. For more information about accessing an OData feed from a .NET Framework application, see Data Client (WCF Data Services).

Binding OData Feeds to Controls in a Client Application (WCF Data Services Quickstart)

To create the client application by using Visual Studio

To add a data service reference to the project

To access data service data in the WPF application

To build and run the NorthwindClient application

Next Steps

See Also

Concepts

Other Resources

Additional resources