Tuesday, July 2, 2013

Using WCF Data Service in Silverlight

Step 1: Open VS2010 and create a Blank solution, name it as ‘WCF_DataService_And_Silverlight_4’
Step 2: In this solution, add a new WCF Service application and call it ‘WCF_DataService’. Delete IService1.cs and Service1.svc from the project, as we are going to make a use of the WCF Data Service Template.
Step 3: Right-click the project and add a new ADO.NET Entity Data Model, name it as ‘CompanyEDMX’. Follow the wizard, select ‘Company’ as database and select Department table. The EDMX file should get added in the project as shown below:

Step 4: Right-click on the project, name it as ‘WCF_DataService_Company.svc’ and add the new WCF Data Service in the project. Make the following changes in it:

Step 5: Build the project and make sure that it is error free.
Step 6: Right-Click on WCF_DataService_Company.svc and view in browser, you should see the following:
The Url will be ‘http://localhost:<some Port>/WCF_DataService_Company.svc/
Step 7: Now change the Url to the one shown below:
‘http://localhost:<some port>/WCF_DataService_Company.svc/Departments’
you will find all rows from Department table in the form of an Xml document as below:
If for some reason, you do not see xml and instead you are getting a Feed, then make the following changes from Internet Options (in IE):
Step 7: In the same solution, add a new Silverlight application and name it as ‘SL4_Client_WCF_Data-Service’. Make sure that you will host it in the same WCF Service project created above by keeping the defaults shown in the following window:

This will add ‘SL4_Client_WCF_Data-ServiceTestPage.aspx’ and ‘SL4_Client_WCF_Data-ServiceTestPage.html’ in the ‘WCF_DataService’ project.
Step 8: In the Silverlight project, add the WCF service reference and name the service namespace as MyRef.
Step 9: Open MainPage.xaml and drag drop a button and DataGrid element in it:

Step 10: In the MainPage.Xaml.cs use the following namespaces:
  • using System.Data.Services.Client;
  • using System.Windows.Data;
  • using SL4_Client_WCF_Data_Service.MyRef;
Step 11: In the MainPage class level, declare the following objects:
  • MyRef.CompanyEntities objContext;
  • DataServiceCollection<Department> deptDataCollection;
In .NET 4.0, the DataServiceCollection<T> class is introduced in WCF Data Services to support databinding with the controls in a client application. This class is especially used in WPF and Silverlight.
Step 12: In the UserControl_Loaded event, write the following code for creating an instance of the objectContext proxy for the WCF data service using the Service uri and an instance of DataServiceCollection:

Step 13: In the ‘Get Data’ button click event, make an async call to the WCF Data Service by firing the query as shown below:


The query is executed asynchronously and the result is generated which is further assigned to the ItemsSource property of the DataGrid.
Step 14: Run the application and click on Get Data button. The following output will be displayed: