Developing Master/Details Application In SilverLight

In this Blog post I am going to show how to create a Silverlight application Master/Details Records display. First Open of the VS.NET 2010 and create Silverlight application project.

Creating a SilverLight Application Project

     In this application we are going to use WCF RIA services to bring Data from Backend so we need to check the  Enable WCF RIA Services Check-Box. and then click ok.

Enabling WCF RIA Services

 

At this point VS.NET will created two projects.  One is Silverlight Client application project and another one Web application project as shown below.

Adding EF Model

Now we need to add Data Model to our project. Here we can use either LINQ TO SQL or EF. But I am going to use  EF Data Model Template. so let us add  ADO.NET Enitity Data Model template to this project and follow the Wizard.

   Here I am going to use Chinook Sample Database which you can download from CodePlex. Next we are going to select an option Generate From Database and create the EF Model.

Once EF Model created successfully at this point we need to compile or build our project so that VS.NET will get latest changes or additions that we made  in our solution. This build process helps to choose Entities when we are creating Domain Service. 

Adding Domain Service Class

Now we need to add Domain Service template to our project to create WCF RIA Service. Here we asked to select the Entities which we wanted to exposes to client side and can perform CURD operations . having said that Here I am selecting all Entities and also enabling editing option as shown below. And do not forgot to check the options which will Generate metadata for our EF classes.  

   Now once again we need to compile or build the project at this point VS.NET generate DomainContext and Entities on client side. (WCF RIA Service tool magic).

  Here we need to add some UI to display Customer and their Invoices. To do click on Data Sources and right click on Customer and select DataGrid and drag and drop it on  Mainpage.xmal Designer surface. do the same steps for Invoices as well.  At this point we have two Datagird. Here whenever user select customer Record we need to display related invoices in another DataGrid called Customer Invoices.

Creating UI

 

 

  Adding [Include Attribute]

     To bring right data from backend we need to modify our Entity Metadata class as shown below.

 

 

      Here I have added another method which will returns both Customer and their invoices records .

 

  Now build the project and Run . Now if we select a record or row in Customer DataGrid the related invoices records are displayed  in Customer Invoices datagrid.

Next blog post will see how to Add Busy Indicator when loading Data, Sorting and Grouping of the Data.

Nandri(Thanks)

SreenivasaRagavan.