DOT NET RULES

Using WCF Data Services in WPF applications January 22, 2012

In this post I will provide you with hands-on examples on how to retrieve data from a WCF Data Service and bind the data to WPF data bindable controls that reside inside a WPF window.The client application in this case will be a WPF application again.

I do not know how familiar people are with WCF Data Services.This technology was formerly known as ADO.Net Data Services,codename -”Astoria”. In these days we all come across applications that do not just use ADO.Net code to fetch data over the network from an SQL Server database.Applications use data services to find and manipulate data on the web.We can call this service that lives somewhere on a web server and pass it a message and then it is the service’s job to complete the task and send back to the client application a result. The client application could be a Windows Form application, a WPF application,Silvelight an Ajax enabled web page e.t.c The service certainly does not care who the client is.You call the service the same way in all those technologies.In a nutshell the goal of WCF Data Services is to create a middle tier and then easily consume it from various clients both Internet and windows clients.WCF Data Services use REST (Representation State Transfer). REST thinks of the the web as a collection of resources. Resources could be Text,images,XML. Resources are identified by URIs.A URI looks like as http://www.mysite.com/Customers. We can use HTTP verbs to access resources.Those verbs are GET,POST,PUT,DELETE. Under the hood WCF Data Services use OData (Open Data Protocol) that helps to expose data as resources that are addressable by URIs.

In Web services, data is transmitted via POX (plain old XML).Having said that, it becomes clear that we do not the added layer that is called SOAP.  WCF Services use SOAP, web services use SOAP.Not all platforms support SOAP.If you use REST it is much easier to access services. Bear in mind that not all services need support for transactions,security,reliability.All the functionality of WCF Data Services when we talk about the .Net platform resides in the System.Data.Services dll.In order to create a WCF data service you need to create a data model based on entities. For example we can use Entity Framework for relational data.Obviously we can use a custom LINQ provider for other data sources. In those models each entity has a unique URI.

Let’s move on with our hands-on examples.Ι will provide several examples. In the first one I will use a custom data object. In the second one I will use a database.

I assume that you have access to a version of SQL Server and AdventureWorkLT database.

If you do not, you can download and install the free SQL Server Express edition from here. If you need the installation scripts for the sample AdventureWorksLT database, click here . We will use our WCF service to get data from the the Customers table of the AdventureWorksLT database.

In order to create a WCF Data Service , first we need to create the Entity Data Model and then add a new item that is based on the WCF Data Service template.

Then we need to point to the Entity Data Model and grant read/write access to entities

1) Launch Visual Studio. I will be using Visual Studio 2010 Ultimate edition. I will be using C# as the development language.

2) Add a WPF application to your solution. Give it a meaningful name. I named mine WpfWcfDataServiceApplication.

3) Add an empty ASP.Net Web application to your solution.This application will host the WCF Data Service.Give it a meaningful name.I have named mine HostWCFDataService

4) The next step is to create the entity data model.Add this item to your ASP.net Web application project.Add an ADO.NET Entity Data Model. Ι have named mine AdventureWorksLT.edmx. I will generate the model from the database. As you see there is a wizard that helps you complete the steps. In the next step of the wizard you need to point to the database. Create a new connection to the database if you do not have one already and click Next.Select all the objects in the Tables and click Finish.

In the Entity Model Designer window you will see your new entity data model. Have a look at the entities and their relationships.

5) Add a new item (our service) to the ASP.Net Web application project.  Add a  WCF Data Service.Give it a meaningful name.I have named it WCFDataService.svc.

6) Now I need to configure my WCF Data Service.I need to specify the class that contains my entities. In my case this is “AdventureWorksLTEntities“.We also need to specify some access rules that the client applications will have on the entities through the service. We want all our entities to be visible and readable from all clients.

The source code for the WCFDataService.svc.cs file follows.

namespace HostWCFDataService
{
public class WCFDataService : DataService<<strong>AdventureWorksLTEntities</strong>>
{
// This method is called only once to initialize service-wide policies.
public static void InitializeService(DataServiceConfiguration config)
{
// TODO: set rules to indicate which entity sets and service operations are visible, updatable, etc.
// Examples:
// config.SetEntitySetAccessRule("MyEntityset", EntitySetRights.AllRead);
// config.SetServiceOperationAccessRule("MyServiceOperation", ServiceOperationRights.All);
<strong> config.SetEntitySetAccessRule("*", EntitySetRights.AllRead);</strong>
config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;
}
}
}

7) View your web service in the browser. In my case it is (http://localhost:1741/WCFDataService.svc/) and I can view all the entities.

Because according to REST all resources have a URI we can get only the data for the Customers entity.We can do that by passing to the service this URI.

http://localhost:1741/WCFDataService.svc/Customers

The WCF Data Service will return XML data which contains information about all the customers in the entity. This is plain old XML.

In a similar fashion you can get data for only a customer. The service will send back the correct information in XML format as long as we pass it (through GET) a valid URI.

In this case I will pass it http://localhost:1741/WCFDataService.svc/Customers(1) , if I am interested in the first customer.Ηave a look at the picture below

I hope by now that it is quite evident to all what the similarities / differences of SOAP and REST.

8) Now we need to create our simple WPF application and call the WCF Data service.We need to build our UI first.We will add a ListBox control. The value of the CompanyName field for each record in the Customer table of the database (CompanyName property of the Customer entity in our EDM) will appear in the ListBox control. When the user selects a value the FirstName and LastName values will also appear for that record in a simple TextBlock control.

The whole code for the MainWindow.xaml follows.

<Window x:Class="WpfWcfDataServiceApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Customers" Height="500" Width="500"
WindowStartupLocation="CenterScreen"
Loaded="Window_Loaded">
<Grid>
<StackPanel>
<ListBox Name="customersListBox"
Height="400" Margin="10"
BorderBrush="Black"
DisplayMemberPath="CompanyName"
SelectionChanged=
"customersListBox_SelectionChanged" />
<TextBlock Name="customerTextBlock" Margin="10" Background="#FFBAABC1" FontFamily="Arial" FontSize="14" />
</StackPanel>
</Grid>
</Window>

9) Now we need to add a Service reference to our client application. Click Add Service Reference and then hit  Discover button (in the new window that will pop up).You will see the service. Give the namespace a meaningful name (e.g AdventureWorksDataService). Visual studio will add the necessary references and generate all the necessary proxy classes that will help us talk to the service.Have a look at the Reference.cs file that is inside the Service References folder.You must have a good look at the DataServiceContext class which represents runtime context of data service.After you add a service reference, in this class there is a property for each entity (e.g ctx.Products).Our AdventureWorksLTEntities class inherits from DataServiceContext class.This class is also responsible for tracking entities. Another class you should look into is DataServiceQuery class which represents a request to the service. This class implements the IQueryable interface and that is why we wan write LINQ queries (you will see that later on) to talk to the service.Ιt also returns IEnumerable of the requested entity type.Αll queries are instances of the DataQueryService class and all queries belong to a data service context.Those queries are translated into HTTP GET requests and when a response comes back this response is translated into instances of the entity classes. Another very important class is the DataServiceCollection class that represents a dynamic collection of entity objects. This class inherits from the ObservableCollection(T) and also implements INotifyPropertyChanged and INotifyCollectionChanged interfaces.

10) Now it is time to write some code in the code behind files to handle the Window_Loaded  and the customersListBox_SelectionChanged  events.

public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}

private AdventureWorksLTEntities ctx = null;

private Customer customer = null;

private void Window_Loaded(object sender, RoutedEventArgs e)
{
ctx = new AdventureWorksLTEntities(new Uri("http://localhost:1741/WCFDataService.svc/"));
var customersQuery =from cust in ctx.Customers select cust;
customersListBox.ItemsSource = customersQuery.ToList();
}

private void customersListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
customer = (Customer)customersListBox.SelectedItem;
customerTextBlock.Text = string.Format("The customer's firstname is {0} and his lastname is  {1}",
customer.FirstName, customer.LastName);
}
}

The code is very easy to follow. I am just using standard LINQ queries.

11) Run your application and select a customer (CompanyName). You will get more information for this customer in the TextBlock Control.

Have a look at the picture below to see what happens when I run my application

12) Obviously we could loop through our customers and rewrite our code. We could write our code in the Window_Loaded event handling routine in a different way. Have a look at the code below.

/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}

private AdventureWorksLTEntities ctx = null;
private Customer customer = null;
private List<Customer> customersList = null;

private void Window_Loaded(object sender, RoutedEventArgs e)
{
ctx = new AdventureWorksLTEntities(new Uri(
"http://localhost:1741/WCFDataService.svc/"));
//var customersQuery =
//  from cust in ctx.Customers
//  select cust;
//customersListBox.ItemsSource = customersQuery.ToList();

customersList = new List<Customer>();
foreach (Customer cust in ctx.Customers)
{
customersList.Add(cust);
}
customersListBox.ItemsSource = customersList;

}

private void customersListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
customer = (Customer)customersListBox.SelectedItem;
customerTextBlock.Text = string.Format(
"The customer's firstname is {0} and his lastname is  {1}",
customer.FirstName, customer.LastName);
}
}

13) I will create another window. In this window I will get the information for a specific customer. I will have a textbox control in the UI and the user will insert the Customer ID and hit the Find button. Then the information for that customer will be displayed in the textbox controls that are also part of the UI.  Add another item in your WPF application, a WPF window. Name it GetCustomer.xaml. In order to launch this window from the MainWindow.xaml we need to modify the XAML in this window and add a button.The XAML for the MainWindow.xaml is

<Grid>
<StackPanel>
<ListBox Name="customersListBox"
Height="400" Margin="10"
BorderBrush="Black"
DisplayMemberPath="CompanyName"
SelectionChanged=
"customersListBox_SelectionChanged" />
<TextBlock Name="customerTextBlock"
Margin="10" Background="#FFBAABC1" FontFamily="Arial" FontSize="14" />
<Button Name="btnGetCustomer" Background="Brown" BorderBrush="Azure" Content="GetCustomerData"

FontWeight="Bold" FontFamily="Batang" FontSize="14" Width="200" Height="100" HorizontalAlignment="Center"
VerticalAlignment="Center" Click="btnGetCustomer_Click"></Button>
</StackPanel>
</Grid>

We need to add some code in the button click event handling routine.We need to change the MainWindow.xaml.cs code.

private void btnGetCustomer_Click(object sender, RoutedEventArgs e)
{
var getcustomer = new GetCustomer();

getcustomer.Show();
}

So when the user clicks the button the new window pops up.

14) Now we need to build the UI for the GetCustomer window according to the requirements outlined in the previous paragraphs.

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal">
<TextBox Name="findTextBox" Margin="15,3,3,3"
Width="50" Height="25" />
<Button Name="findButton"
Content="Find"
Margin="10,5,5,5" Width="50" Height="25"
Click="findButton_Click"/>
</StackPanel>
<Grid Name="customerGrid"
Grid.Row="1" Margin="5,0,0,0"
Width="450" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="Company Name"
Grid.Row="0" Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="10,0,0,0" />
<TextBox Text="{Binding Path=CompanyName}"
Grid.Row="0" Grid.Column="1"
Margin="3" Height="25" />
<TextBlock Text="First Name"
Grid.Row="1" Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="10,0,0,0" />
<TextBox Text="{Binding Path=FirstName}"
Grid.Row="1" Grid.Column="1"
Margin="3" Height="25" />
<TextBlock Text="Middle Name"
Grid.Row="2" Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="10,0,0,0" />
<TextBox Text="{Binding Path=MiddleName}"
Grid.Row="2" Grid.Column="1"
Margin="3" Height="25" />
<TextBlock Text="Last Name"
Grid.Row="3" Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="10,0,0,0" />
<TextBox Text="{Binding Path=LastName}"
Grid.Row="3" Grid.Column="1"
Margin="3" Height="25" />
<TextBlock Text="Title" Grid.Row="4"
Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="10,0,0,0" />
<TextBox Text="{Binding Path=Title}"
Grid.Row="4" Grid.Column="1"
Margin="3" Height="25" />
<TextBlock Text="Sales Person"
Grid.Row="5" Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="10,0,0,0" />
<TextBox Text="{Binding Path=SalesPerson}"
Grid.Row="5" Grid.Column="1"
Margin="3" Height="25" />
<TextBlock Text="Email Address"
Grid.Row="6" Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="10,0,0,0" />
<TextBox Text="{Binding Path=EmailAddress}"
Grid.Row="6" Grid.Column="1"
Margin="3" Height="25" />
<TextBlock Text="Phone"
Grid.Row="7" Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="10,0,0,0" />
<TextBox Text="{Binding Path=Phone}"
Grid.Row="7" Grid.Column="1"
Margin="3" Height="25" />
</Grid>
</Grid>

We add the TextBox controls and the TextBlock controls. Those TextBox controls have their Text property bound to the value that will return the WCF Data Service and basically are the properties of the Customer entity. We also have the TextBox control that the user will enter the Customer ID and hit the Find button.This is the code for the GetCustomer.xaml.cs file.

public partial class GetCustomer : Window
{
public GetCustomer()
{
InitializeComponent();
}

private AdventureWorksLTEntities ctx = null;
private Customer customer = null;

private void Window_Loaded(object sender, RoutedEventArgs e)
{
ctx = new AdventureWorksLTEntities(new Uri(
"http://localhost:1741/WCFDataService.svc/"));
}

private void findButton_Click(object sender, RoutedEventArgs e)
{
try
{
int FindID=Convert.ToInt32(findTextBox.Text);
customer =
(from cust in ctx.Customers
where (cust.CustomerID == FindID)
select cust).Single();
customerGrid.DataContext = customer;

}
catch (Exception ex)
{
customerGrid.DataContext = null;
}
}
}

I am using a simple LINQ query and set the Grid’s DataContext property to the customer entity that the WCF Service returns as XML raw data and the WCF Data Services Client library converts the XML data to a .Net entity.

15) Run your application and hit the button in the MainWindow window.In the new window type “4″ in the textbox control and hit the Find button.

Have a look at the picture below to see what happens when I run the application. I am sure that if you followed all the steps so far you will have similar results.

16) Moving on I would like to show you how to find related data in the database through our middle tier, thus the WCF Data service.In this example we will load some information from the Customer (table/entity) and then display the related data in the SalesOrderHeader (table/entity).I will create another window. In this window I will have various controls. I will have a ListBox control where the CompanyName values will appear for the customers.When the user clicks a customer from the top ListBox control in the second ListBox control just below it the orders will appear and in the tetboxes some more field with values for this particular order .

Add another item in your WPF application, a WPF window. Name it GetCustomerOders.xaml. In order to launch this window from the MainWindow.xaml we need to modify the XAML in this window and add a button.The XAML for the MainWindow.xaml becomes

<Grid>
<StackPanel>
<ListBox Name="customersListBox"
Height="400" Margin="10"
BorderBrush="Black"
DisplayMemberPath="CompanyName"
SelectionChanged=
"customersListBox_SelectionChanged" />
<TextBlock Name="customerTextBlock"
Margin="10" Background="#FFBAABC1" FontFamily="Arial" FontSize="14" />
<Button Name="btnGetCustomer" Background="Brown" BorderBrush="Azure" Content="GetCustomerData" FontWeight="Bold" FontFamily="Batang" FontSize="14" Width="200" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" Click="btnGetCustomer_Click"></Button>
<Button Name="btnGetCustomerOrders" Background="DimGray" BorderBrush="Blue" Content="GetCustomerOrdersData" FontWeight="Bold" FontFamily="Batang" FontSize="14" Width="200" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" Click="btnGetCustomerOrders_Click"></Button>
</StackPanel>
</Grid>

We need to add some code in the button click event handling routine.We need to change the MainWindow.xaml.cs code.

private void btnGetCustomerOrders_Click(object sender, RoutedEventArgs e)
{
var getcustomerorders = new GetCustomerOders();

getcustomerorders.Show();
}

17) Now we need to add the XAML code for the GetCustomerOders.xaml. We need to have a functional UI before we move on writing our code

<Window.Resources>
<DataTemplate x:Key="CustomerTemplate">
<StackPanel Margin="0,0,0,5"
Orientation="Horizontal">
<TextBlock Margin="10,0,0,0"
VerticalAlignment="Center"
Text="{Binding Path=CompanyName}" />

</StackPanel>
</DataTemplate>
<DataTemplate x:Key="OrderTemplate">
<StackPanel Margin="0,0,0,5"
Orientation="Horizontal">
<TextBlock Margin="10,0,0,0"
VerticalAlignment="Center"
Text="{Binding Path=OrderDate}" />
<TextBlock Text=" (" />
<TextBlock VerticalAlignment="Center"
Text="{Binding Path=SalesOrderID}" />
<TextBlock Text=")" />
</StackPanel>
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="3*" />
<RowDefinition Height="5*" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ListBox Name="customersListBox" Grid.Row="0"
ItemTemplate="{StaticResource CustomerTemplate}"
SelectionChanged=
"customersListBox_SelectionChanged"
Margin="10"
BorderBrush="Black" />
<ListBox Name="ordersListBox" Grid.Row="1"
ItemTemplate="{StaticResource OrderTemplate}"
SelectionChanged=
"ordersListBox_SelectionChanged"
Margin="10"
BorderBrush="Black" />
<Grid Name="OrdersGrid" Grid.Row="2" Margin="5,0,0,0"
Width="600" HorizontalAlignment="Left" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="125" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="125" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="Due Date"
Grid.Row="0" Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="10,0,0,0" />
<TextBox Text="{Binding Path=DueDate}"
Grid.Row="0" Grid.Column="1"
Margin="3" Height="25" />
<TextBlock Text="Ship Date"
Grid.Row="1" Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="10,0,0,0" />
<TextBox Text="{Binding Path=ShipDate}"
Grid.Row="1" Grid.Column="1"
Margin="3" Height="25" />
<TextBlock Text="Modified Date"
Grid.Row="2" Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="10,0,0,0" />
<TextBox Text="{Binding Path=ModifiedDate}"
Grid.Row="2" Grid.Column="1"
Margin="3" Height="25" />
<TextBlock Text="Status"
Grid.Row="0" Grid.Column="2"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="10,0,0,0" />
<TextBox Text="{Binding Path=Status}"
Grid.Row="0" Grid.Column="3"
Margin="3" Height="25" />
<TextBlock Text="Sub Total"
Grid.Row="1" Grid.Column="2"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="10,0,0,0" />
<TextBox Text="{Binding Path=SubTotal}"
Grid.Row="1" Grid.Column="3"
Margin="3" Height="25" />
<TextBlock Text="Comment"
Grid.Row="2" Grid.Column="2"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="10,0,0,0" />
<TextBox Text="{Binding Path=Comment}"
Grid.Row="2" Grid.Column="3"
Margin="3" Height="25" />
</Grid>
</Grid>
</Window>

Now I have my UI in Xaml and I must implement the event handling routines in the code behind. I handle the Window_Loaded event where I load the CompanyName value for every record in the Customers table. Then I handle the customersListBox_SelectionChanged event where I load in the ordersListBox the OrderDate and the SalesOrderID for the selected customer.Finally when the value in the ordersListBox is selected more information about this order is displayed in the TextBox controls.

This is the code for the GetCustomerOders.xaml.cs file

public partial class GetCustomerOders : Window
{
public GetCustomerOders()
{
InitializeComponent();
}

private AdventureWorksLTEntities ctx = null;
private Customer customer = null;
private void Window_Loaded(object sender, RoutedEventArgs e)
{
ctx = new AdventureWorksLTEntities(new Uri("http://localhost:1741/WCFDataService.svc/"));
var customersQuery =from cust in ctx.Customers
select cust;
customersListBox.ItemsSource = customersQuery.ToList();
}
private void customersListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
customer = (Customer)customersListBox.SelectedItem;
ctx.LoadProperty(customer, "SalesOrderHeaders");
 foreach (var order in customer.SalesOrderHeaders)
 {
ctx.LoadProperty(order, "OrderDate");
}
ordersListBox.ItemsSource = customer.SalesOrderHeaders;
}
private void ordersListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
OrdersGrid.DataContext =(SalesOrderHeader)ordersListBox.SelectedItem;
}
}

Have a look at the picture below to see what I mean. Run your application and see the results for yourself. You should have similar results.

Leave a comment if you want the source code.

Hope it helps!!!