> For the complete documentation index, see [llms.txt](https://openriaservices.gitbook.io/openriaservices/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://openriaservices.gitbook.io/openriaservices/gg602747/ee796241.md).

# 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](https://github.com/OpenRIAServices/OpenRiaServices/releases) or [Changelog](https://github.com/OpenRIAServices/OpenRiaServices/blob/main/Changelog.md) 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](/openriaservices/ee707348/ee707373.md).
* 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](/openriaservices/gg512106.md) 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](/openriaservices/ee707336/ee707360.md).

## 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](/openriaservices/ee707336/ee707360.md).

   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.

    ![RIARelatedData03ChooseDatabaseObjects](/files/-M_An23eoeX5ZhwDiUF_)
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.

   ![RIARelatedData04AddDomainServiceEntities](/files/-M_An23g4dvlIq7ycWtc)
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
   ```

   ```csharp
   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)
   ```

   ```csharp
   [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.

   ![RIARelatedData06SalesOrderHeaderGridOnLayout](/files/-M_An23i1_VACQ3nFnyb)
6. In the **Data Sources** window, expand the **SalesOrderHeader** node.
7. Click the **SalesOrderDetails** node (the child node of the **SalesOrderHeader** node).

   ![RIARelatedData07SalesOrderHeaderSalesOrderDetails](/files/-M_An23jbOGbRVgh-QWY)
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.

   ![RIARelatedData08NoPagingYet](/files/-M_An23knwYjwRR0O0VM)

## 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.

{% hint style="info" %}
**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.
{% endhint %}

### 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.

   ![Completed application showing OrderID and detail](/files/-M_An23m9dHf12a5Ob69)

## 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](/openriaservices/gg602747/ee707338.md).

## See Also

#### Concepts

[Open Ria Services](/openriaservices/readme.md)

[Silverlight Clients](/openriaservices/ee707349.md)