Walkthrough: Displaying Related Data in a Silverlight Business Application

[ This document was written for WCF Services Version 1 Service Pack 2 and might not be up to date Please see Release Notes or Changelog for a list of changes since WCF RIA Services ]

In this walkthrough, you create a Silverlight Business Application that displays data from two related tables in the AdventureWorks sample database.

This walkthrough illustrates the following tasks:

• Creating a Silverlight Business Application that consists of two projects: a Silverlight client and an ASP.NET Web Application.

• Changing the application name by modifying a resource string.

• Creating an entity data model based on a database file.

• Creating a domain service that exposes the data in the entity data model to the Silverlight client. For more information, see Domain Services.

• Modifying a query in the Domain Service to return related data.

• Modifying the domain services metadata to support loading of related data.

• Creating additional Silverlight pages to present data to users.

• Adding buttons to the default navigation bar to access the Silverlight pages.

• Configuring the Silverlight pages to display data by dragging items from the Data Sources window to the Silverlight Designer.

• Adding a DataPager to navigate records.

Prerequisites

This and the other walkthroughs presented in the Open Ria Services documentation require several prerequisite programs, such as Visual Studio and the Silverlight Developer Runtime and SDK, be installed and configured properly, in addition to Open Ria Services and the Open Ria Services Toolkit. They also require installing and configuring SQL Server 2008 R2 Express with Advanced Services and installing the AdventureWorks OLTP and LT database.

Detailed instructions for the satisfaction of each of these prerequisites are provided by the topics within the Prerequisites for Open Ria Services node. Follow the instructions provided there before proceeding with this walkthrough to ensure that you encounter as few problems as possible when working through this Open Ria Services walkthroughs.

This walkthrough assumes that you can create a Silverlight Business Application. The procedure for completing this task is described in the Walkthrough: Using the Silverlight Business Application Template.

Creating the Silverlight Business Application

Silverlight Business Applications are solutions with two projects: a Silverlight application and an ASP.NET Web Application that hosts the Silverlight application. Silverlight Business Applications have built-in functionality. By default, they have a Home page, an About page, a navigation bar, and site registration functionality.

To create the application

1. In Visual Studio, create a new Silverlight Business Application project in Visual Basic or C# named AdventureWorksOrders. The procedure for completing this task is described in the Walkthrough: Using the Silverlight Business Application Template.

   The AdventureWorksOrders solution is created with two projects: an AdventureWorksOrders Silverlight project and an AdventureWorksOrders.Web Web application project.

2. In Solution Explorer, expand the AdventureWorksOrders project.

3. Expand the Assets folder and then expand Resources.

4. Double-click ApplicationStrings.resx to open the Resource Designer.

5. Change the ApplicationName resource string Value to Adventure Works Orders.

6. Save the changes and close the ApplicationStrings.resx file.

7. Run the application.

   The home page opens and displays the default design, which includes the updated application name.

Creating a Data Model for the Application

To manage the data in the application, you use an entity data model.

To create an entity data model

1. In Solution Explorer, right-click AdventureWorksOrders.Web, click Add, and then click New Item.

   The Add New Item dialog box appears.

2. In the Data category, click the ADO.NET Entity Data Model template.

3. Change the name to AdventureWorksEDM.edmx, and then click Add.

   The Entity Data Model Wizard opens.

4. On the Choose Model Contents page, click Generate from database and then click Next.

5. On the Choose Your Data Connection page, click New Connection.

   The Connection Properties dialog box appears.

6. Select Microsoft SQL Server Database File for the data source and specify the location of the AdventureWorksLT database file.

7. Click OK.

8. On the Choose Your Data Connection page, click Next.

9. If a message appears asking you if you want to copy the database file to your project and modify the connection, click Yes.

10. On the Choose Your Database Objects page, expand the Tables node.

11. Add check marks next to the SalesOrderDetail (SalesLT) and SalesOrderHeader (SalesLT) tables.

    
12. Click Finish.

    The SalesOrderDetail and SalesOrderHeader tables appear in the Entity Designer.

13. Build the solution.

    You must build the solution prior to adding a domain service.

Creating a Domain Service

A domain service exposes the data entities and operations in the data model to the client. In this procedure, you add a domain service to the server project.

To create a domain service

1. In Solution Explorer, right-click AdventureWorksOrders.Web, click Add, and then click New Item.

   The Add New Item dialog box appears.

2. In the Web category, click the Domain Service Class template.

3. Name the Domain Service Class AdventureWorksService and then click Add.

   The Add New Domain Service Class dialog box opens.

4. Select the Enable editing check boxes for both the SalesOrderDetail and SalesOrderHeader entities.

   
5. Click OK.

6. Build the solution.

Editing a Domain Service Query to Include Related Data

The domain service provides default operations that you should modify for your specific application. In this procedure, you edit the GetSalesOrderHeaders query so that it returns the related SalesOrderDetail records. Adding a sort order to the query is also required for the DataPager to run.

To change a Domain Service query

1. In Solution Explorer, double-click AdventureWorksService.vb or AdventureWorksService.cs.

2. Update the GetSalesOrderHeaders method as shown in the following code.

   Public Function GetSalesOrderHeaders() As IQueryable(Of SalesOrderHeader)
       Return Me.ObjectContext.SalesOrderHeaders.Include("SalesOrderDetails").OrderBy(Function(c) c.SalesOrderID)
   End Function

   public IQueryable<SalesOrderHeader> GetSalesOrderHeaders()
   {
       return this.ObjectContext.SalesOrderHeaders.Include("SalesOrderDetails").OrderBy(e => e.SalesOrderID);
   }

3. In Solution Explorer, double-click AdventureWorksService.metadata.vb or AdventureWorksService.metadata.cs.

4. In the SalesOrderHeaderMetadata class, add an Include attribute just before the SalesOrderDetails entity collection statement:

   <Include()>
   Public Property SalesOrderDetails As EntityCollection(Of SalesOrderDetail)

   [Include]
   public EntityCollection<SalesOrderDetail> SalesOrderDetails { get; set; }

5. Build the solution.

Creating a Silverlight Page to Display Data

In this procedure, you add an Orders page to display data from the tables.

To create a Silverlight page

1. In Solution Explorer, in AdventureWorksOrders, right-click the Views folder and add a new item.

2. In the Add New Item dialog box, click the Silverlight category and then click the Silverlight Page template.

3. Change the name to Orders.xaml, and then click Add.

Adding a Navigation Button to the Home page

In this procedure, you add a button to the application's home page that navigates to the Orders page.

To create a navigation button

1. In Solution Explorer, double-click MainPage.xaml.

2. In XAML view add the following code after the \<HyperlinkButton x:Name="Link2" ... /> line.

   <Rectangle x:Name="Divider3" Style="{StaticResource DividerStyle}"/>
   <HyperlinkButton x:Name="Link3" Content="Orders" Style="{StaticResource LinkStyle}" NavigateUri="/Orders" TargetName="ContentFrame"/>

3. Run the application.

   The Orders button should appear in the navigation bar.

4. Click the Orders button.

   The blank Orders page appears.

Displaying Related Data on the Page

In this procedure, you create data bound controls on the Orders page by dragging items from the Data Sources window directly to the designer. You first create a DataGrid that displays basic information about an individual order, such as Account Number, CustomerID, and Amount Due. Then you create a Grid control that lists the individual items in that order.

To create the data bound controls

1. In Solution Explorer, double-click Orders.xaml.

2. Click the Data menu and then click Show Data Sources.

   The Data Sources window opens. Notice that the Data Sources window already contains the entities available to the application.

3. Click the SalesOrderHeader node and then click the drop-down menu.

4. Click Details.

5. From the Data Sources window, drag the SalesOrderHeader node to the designer.

   A Grid is created that is populated with controls for the data fields from the SalesOrderHeader table.

   
6. In the Data Sources window, expand the SalesOrderHeader node.

7. Click the SalesOrderDetails node (the child node of the SalesOrderHeader node).

   
8. Drag the SalesOrderDetails node to the designer next to the individual order controls.

   A DataGrid is created that is populated with fields from the SalesOrderDetail table.

   

Adding Paging to Navigate the Order Data

In this procedure, you add paging by adding a DataPager to the data source. You set the DataPager.Source to the DomainDataSource that manages the data the pager should control.

Note: The DataPager requires that its data source is explicitly sorted. That is why the OrderBy clause was added to the query earlier in this walkthrough.

To configure paging of the data

1. In Solution Explorer, double-click Orders.xaml.

2. Locate the DataPager control in the Toolbox.

3. Drag the DataPager to the designer.

4. In the Data Sources window, click the SalesOrderHeader node.

5. Drag the SalesOrderHeader node to the DataPager.

   This sets the DataPager's Source property to the correct data source.

6. Select the DataPager on the designer.

7. In the Properties window, set the PageSize property to 1.

Testing the Application

In this procedure, you build and run the application to verify that the application behaves as expected.

To test the application

1. On the Build menu, click Build Solution.

   Verify that the solution builds without errors.

2. Run the application.

3. Click the Orders button.

4. Click the navigation buttons on the DataPager buttons to navigate through order records.

   Note that the related order details appear in the DataGrid when navigating through the order header records.

   

Next Steps

After completing this walkthrough, you can perform the following related tasks:

• Modify records and save changes back to the database. For more information, see Walkthrough: Editing Data From a Domain Service.

See Also

Concepts

Open Ria Services

Silverlight Clients