PREREQUISITES DEVELOPPMENT TOOL
In this tutorial, component that follow is required and need to be install:
- Visual Studio 2010 Express
- ADO.NET Entity Framework 3.5/4.0
- Microsoft Silverlight 4 Tools for visual Studio 2010 that include all components necessary for silverlight 4: Silverlight 4 developper runtime, silverlight 4 SDK, silverlight 4 tools for visual studion 2010. Please, to download it, please refer to this link.
This topic explain in the simple way how to display data from two tables with relationship in application silverlight. I used ADO.NET Entity Framework to retrieve data and create the Silverlight DataGrid.
Once all requires installers have been done, you started creating new project web application in which the control silverlight is hosted. You can find here the Sql Database called "Sale.mdf" used in this tuto . Please note that step to generate edmx model Entity Framework is not mentioned in this article. If you need more information how to perfom this step, please refer to this link
CREATING HOSTED SILVERLIGHT APPLICATION
We will start creating new ASP.NET web application in Visual Studio 2010.
- click "New project" in the Menu bar
- Select "ASP.NET Web Application" and name the application as "SilverlightTuto".
SET UP EDMX MODEL ENTITY FRAMEWORK
- Fist, create new "Class Library" project name "DAL" layer. This is where your Entity Model(edmx) will be placed
- Click "OK" button
- Add new Item "ADO.NET Entity Data Model" to the "DAL" project. Follow this link for more information concering how to create edmx data model.
I have created a simple database table with relationship to illustrate the process master/details when displaying on DataGrid Silverlight. Here is a view of what the table schema looks like in Sql Server:
After generating your entity model to your database and adding these tables to your edmx model, your model should look like this when you are done.
That's all about creating edmx model Entity Framework in visualt studio 2010.
You cannot set direclty a reference from DAL to SilverlightTuto project for the simple reason that you are working on the client side at runtime. Moreover, non Silverlight assembly cannot be used to a Silverlight project because CLR for .NET application and Silverlight are different.
The solution is to use RIA Services. In this article we use WCF service technologie to consumme data from client-side.
CREATING THE WCF SERVICE PROJECT
- Add new project in the solution.
- Select "WCF" project and name the application as "SilverlightTuto.WcfService"
- Visual studio genere automatically for you two source files:
- IService1.cs : it is an Interface between client side(silverlight) and server-side (DB)
- Service1.svc.cs: implementation of the IService1 interface.
- Add a reference from "SilverlightTuto.WcfServive to your Data Access Layer project. And also add a reference "System.Data.Entity" to the project.
- Adding the following methods inside IService1.cs file:
- The implementation of these contract will be defined inside the Service1.svc.cs file:
1: public class Service1 : IService1
3: /// <summary>
4: /// A reference to the Data Access Layer project
5: /// </summary>
6: private SaleEntitiesContext cxt;
8: /// <summary>
9: /// Initialize a new instance of <see cref="Service1"/> class.
10: /// </summary>
11: public Service1()
13: cxt = new SaleEntitiesContext("name=SaleEntities");
14: // SaleEntities is the name of your data model.
17: /// <summary>
18: /// Get customers list in database
19: /// </summary>
20: /// <returns></returns>
21: public List<Customer> GetCustomers()
25: var customers = (from cust in cxt.Customers
26: select cust);
28: return customers.ToList();
30: catch (DbException e)
32: throw new FaultException(
33: new FaultReason(e.Message),
34: new FaultCode("Data Access Error"));
38: /// <summary>
39: /// Get Product purchased by the Customer
40: /// </summary>
41: /// <param name="CustomerID"></param>
42: /// <returns></returns>
43: public List<Product> GetProduct(int CustomerID)
45: var product = (from p in cxt.Products
46: where p.CustomerID == CustomerID
47: select p).ToList();
48: return product;
We have created a WCF project and Silverlight application project. Now, let's see how to link these two project.
- Compile the service before adding it to the Silverlight project.
- Right click on the "SilverlightTuto" project and then choose "Add Service Reference"
- A new Dialog box will appear. Click on button "Discover" to a add service in a solution
The "SilverlightTuto" project after adding the service reference:
BUILDING THE USER INTERFACE
The first thing you need to do is get the DataGrid and ComboBox onto your Silverlight Control. DataGrid will display data from Product table. ComboxBox will be used to display customer list. For that add the following XAML code to the MainPage.xaml.
All right, now let's add the following code to the MainPage.xaml.cs:
Note that, in silverlight, services should be called only using asynchronous.
Here is the overall project structure:
Following comboBox value selected, the DataGrid display the products purchased by the customer.
That's all about consuming the ADO.NET Entity Framework from Silverlight application using WCF service. Although i have not detailed a few steps necessary, for exemple how to generate the model edmx file entity framework, i hope you will get some understanding about how to bind, from tables relationship, Datagrid Silverlight using WCF that provide data to retrieve using Entity Framework. This is the purpose of writing this article.