# Walkthrough: Displaying 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 the AdventureWorks sample database on two different Silverlight pages. The first page displays data from the SalesOrderHeader table and provides support to page through the database records. The second page allows the user to execute a query based on a date.

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](https://openriaservices.gitbook.io/openriaservices/ee707348/ee707373).
* Modifying and adding custom queries to the domain service.
* 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.
* Sorting and paging of the data.
* Configuring a user interface to take query parameters.

## 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](https://openriaservices.gitbook.io/openriaservices/gg512106) 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](https://openriaservices.gitbook.io/openriaservices/ee707336/ee707360).

## 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. A default application name is also provided as a resource string that you change to your applications name.

### To create the application

1. In Visual Studio, create a new Silverlight Business Application project in Visual Basic or C# named AdventureWorksApp. The procedure for completing this task is described in the [Walkthrough: Using the Silverlight Business Application Template](https://openriaservices.gitbook.io/openriaservices/ee707336/ee707360).

   The AdventureWorksApp solution is created with two projects: an AdventureWorksApp Silverlight project and an AdventureWorksApp.Web Web application project.
2. In **Solution Explorer**, expand the AdventureWorksApp 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 Application.
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 AdventureWorksApp.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.

   ![RIADisplayingData01EDMX](https://1585985709-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_5pS6LfA6GSEBmCbd9%2Fsync%2F56e825e0e0914966247b0061fcfc0379829298cd.png?generation=1620474378381423\&alt=media)
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 a check mark next to the **SalesOrderHeader (Sales LT)** table.
12. Click **Finish**.

    The SalesOrderHeader table appears 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 AdventureWorksApp.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 **SalesOrderHeader** and **Enable editing** check boxes, and then click **OK**.

   ![RIADisplayingData02AddNewDomainServiceClass](https://1585985709-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_5pS6LfA6GSEBmCbd9%2Fsync%2F564e5c4ffc5f9f530dfb8f250a91346a9dcded3d.png?generation=1620474378990844\&alt=media)
5. Build the solution.

## Changing a Domain Service Query

When you add a domain service class, it comes populated with query methods. You may decide to use these query methods without further modification. However, in many cases, some modification is necessary. In this procedure you edit the GetSalesOrderHeaders query method.

### To change a domain service query

1. In **Solution Explorer**, double-click AdventureWorksService.vb or AdventureWorksService.cs to open this file.
2. Update the GetSalesOrderHeaders method as shown in the following code.

   ```
   Public Function GetSalesOrderHeaders() As IQueryable(Of SalesOrderHeader)
       Return Me.ObjectContext.SalesOrderHeaders.OrderBy(Function(e) e.SalesOrderID)
   End Function
   ```

   ```csharp
   public IQueryable<SalesOrderHeader> GetSalesOrderHeaders()
   {
       return this.ObjectContext.SalesOrderHeaders.OrderBy(e=>e.SalesOrderID);
   }
   ```
3. Build the solution.

## Creating a Silverlight Page to Display Data

In this procedure, you add an OrderList page to display the data from the SalesOrderHeader table.

### To create a Silverlight page

1. In **Solution Explorer**, in the AdventureWorksApp project, right-click the **Views** folder and add a new item.
2. In the **Add New Item** dialog box, select the **Silverlight** category and then click the **Silverlight Page** template.
3. Change the name to OrderList.xaml, and then click **Add**.

   OrderList.xaml opens in the designer.
4. From the Toolbox, drag a **TextBlock** to the top of the designer.
5. In the Properties window, change the **Text** property to Order List.
6. Save the OrderList.xaml page.

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

### To create a navigation button

1. In **Solution Explorer**, double-click MainPage.xaml to open it in the designer.
2. In XAML view, add the following markup after the \\\<HyperlinkButton x:Name="Link2" ... /> line.

   ```
   <Rectangle x:Name="Divider3" Style="{StaticResource DividerStyle}"/>
   <HyperlinkButton x:Name="Link3" Content="Order List" Style="{StaticResource LinkStyle}" NavigateUri="/OrderList" TargetName="ContentFrame"/>
   ```
3. Run the application.

   The **Order List** button should appear in the navigation bar.
4. Click the **Order List** button.

   The OrderList page appears.

## Displaying Order Data on the OrderList Page

In this procedure, you create and configure a DataGrid to display order data by dragging an order entity from the **Data Sources** window to the designer.

### To create a data bound DataGrid

1. In **Solution Explorer**, double-click OrderList.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. From the **Data Sources** window, drag the **SalesOrderHeader** node to the designer (below the Order List text block).

   A **DataGrid** populated with column headings from the SalesOrderHeader table appears on the design surface.

   ![RIADisplayingData03OrderListPageWithDataGrid](https://1585985709-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_5pS6LfA6GSEBmCbd9%2Fsync%2F95f58d12aade82a694939aabc3448f5b43341201.png?generation=1620474379707494\&alt=media)
4. Run the application.
5. In the navigation bar, click the **Order List** button.

   Order data displays on the Order List page.

   ![RIADisplayingData04OrderListPageWithDataGridComple](https://1585985709-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_5pS6LfA6GSEBmCbd9%2Fsync%2Fec0fe3f6bae1f601fffaf6368707d13e4c35bcfc.png?generation=1620474380200450\&alt=media)

## Add Custom Queries to the Domain Service

You can create additional queries in the domain service. This procedure adds two custom queries.

### To add custom queries to the domain service

1. In **Solution Explorer**, double-click AdventureWorksService.vb or AdventureWorksService.cs.
2. Add the following methods to the AdventureWorksService class:

   ```
   Public Function GetOrdersWithSmallSubtotals() As IQueryable(Of SalesOrderHeader)
       Return Me.ObjectContext.SalesOrderHeaders.Where(Function(p) p.SubTotal <= 2000).OrderBy(Function(p) p.SubTotal)
   End Function

   Public Function GetShipDateBefore(ByVal shipDate As DateTime) As IQueryable(Of SalesOrderHeader)
       Return Me.ObjectContext.SalesOrderHeaders.Where(Function(p) p.ShipDate < shipDate).OrderBy(Function(p) p.SalesOrderID)
   End Function
   ```

   ```csharp
   public IQueryable<SalesOrderHeader> GetOrdersWithSmallSubtotals()
   {
       return this.ObjectContext.SalesOrderHeaders.Where(e => e.SubTotal <= 2000).OrderBy(e => e.SubTotal);
   }

   public IQueryable<SalesOrderHeader> GetShipDateBefore(DateTime shipDate)
   {
       return this.ObjectContext.SalesOrderHeaders.Where(e => e.ShipDate < shipDate).OrderBy(e => e.SalesOrderID);
   }
   ```
3. If you are using Visual Basic, at the top of the AdventureWorksService.vb file, set the Option Strict statement to Off.
4. Build the solution.

## Displaying Data from the Custom Query

In this procedure, you display the data from the new query by selecting the query in the **Data Sources** window and dragging it to the **DataGrid** that is already on the designer. This action reconfigures the binding of the **DataGrid** to display data from the selected query.

### To display data from the custom query in the existing DataGrid

1. In **Solution Explorer**, double-click OrderList.xaml.
2. In the **Data Sources** window, click **SalesOrderHeader** and then click the drop-down menu.

   ![RIADisplayingData05QueriesInDataSources](https://1585985709-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_5pS6LfA6GSEBmCbd9%2Fsync%2Fab09b1d62a1a44ecdbdeeefd88f03d838da7ba9f.png?generation=1620474379743360\&alt=media)

   Notice the three queries listed at the bottom of the menu. The checked query is the query that will be set in the QueryName of the generated data source after dragging this entity to the designer.
3. Select **GetOrdersWithSmallSubtotalsQuery** from the list of queries to set it as the query of this entity.
4. Drag the **SalesOrderHeader** node to the existing **DataGrid** on the designer.
5. Run the application.
6. Click the **Order List** button.

   Note that no order subtotal listed in the **DataGrid** exceeds 2000.

   ![RIADisplayingData06SmallSubtotalsQueryResult](https://1585985709-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_5pS6LfA6GSEBmCbd9%2Fsync%2F0bc09bfc6ce0345ee551c4756af107d8584d7c08.png?generation=1620474377953110\&alt=media)

## Adding Sorting

In addition to sorting data by using the OrderBy clause in the underlying queries, you can also configure sorting in the XAML of your page. You configure sorting by adding SortDescriptors to the DomainDataSource. You can add SortDescriptors directly in the XAML, or by using the **Properties** window, as shown in the following procedure.

### To add SortDescriptors using the Properties window

1. In **Solution Explorer** double-click OrderList.xaml.
2. In XAML view, position your cursor in the riaControls:DomainDataSource element whose Name attribute is set to salesOrderHeaderDomainDataSource1.

> \[!WARNING] There are two riaControls:DomainDataSource elements in the file. Be sure to place your mouse in the element whose Name attribute is set to salesOrderHeaderDomainDataSource1.

1. In the **Properties** window, click the **SortDescriptors** property and then click the ellipsis button (**…**).

   ![RIADisplayingData07SortDescriptorsProperty](https://1585985709-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_5pS6LfA6GSEBmCbd9%2Fsync%2Fc23fd275fb116931b535b8f8cc26e1bb2d45cb9e.png?generation=1620474379215020\&alt=media)

   The SortDescriptors collection editor appears.
2. Click **Add**.

   A SortDescriptors item is added.
3. Under **Properties**, expand the **Other** category.
4. In the **PropertyPath** value column, type CustomerID.
5. Click **OK**.

   Notice that the following XAML has been added to the riaControls:DomainDataSource element:

   ```
   <riaControls:DomainDataSource.SortDescriptors>
       <riaControls:SortDescriptor PropertyPath="CustomerID" />
   </riaControls:DomainDataSource.SortDescriptors>
   ```
6. Run the application.
7. Click the **Order List** button.

   Note the data is sorted by list Customer ID.

   ![RIADisplayingData09SortedByCustomerID](https://1585985709-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_5pS6LfA6GSEBmCbd9%2Fsync%2F3dabebd9d8875dec95fca8c8c825f5346d8a12cd.png?generation=1620474379960385\&alt=media)

> \[!WARNING] When you implement paging and sorting together, include at least one [SortDescriptor](https://github.com/OpenRIAServices/OpenRiaServices/tree/086ea8c8fcb115000749be6b2b01cd43bb95bf80/docs/ff423258\(v=vs.91\).md) with its [PropertyPath](https://github.com/OpenRIAServices/OpenRiaServices/tree/086ea8c8fcb115000749be6b2b01cd43bb95bf80/docs/ff422047\(v=vs.91\).md) attribute assigned to a property that contains unique values, such as a primary key. Or add an OrderBy clause based on a property that contains unique values to the query in the [DomainDataSource](https://github.com/OpenRIAServices/OpenRiaServices/tree/086ea8c8fcb115000749be6b2b01cd43bb95bf80/docs/ee732901\(v=vs.91\).md). If you only sort the data on a property that does not contain unique values, the return values could contain inconsistent or missing data across pages.

## Adding Paging

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.

### To configure paging of the data

1. In **Solution Explorer**, double-click OrderList.xaml.
2. In the ToolBox, locate the DataPager control.
3. Drag the **DataPager** to an area in the designer below the DataGrid.
4. In the **Data Sources** window, click the **SalesOrderHeader** node, click the drop-down menu, and verify the **GetOrdersWithSmallSubtotalsQuery** is selected.
5. Drag the **SalesOrderHeader** node onto 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 5.
8. Run the application.
9. Click the **Order List** button.
10. Click the navigation buttons on the DataPager to navigate 5 records at a time in the DataGrid.

    ![RIADisplayingData10OrderListPageComplete](https://1585985709-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_5pS6LfA6GSEBmCbd9%2Fsync%2F24ba1c3852f495e4fe50e9c6976fc24ed9dea751.png?generation=1620474379390810\&alt=media)

## Creating a Page to Search Orders by Date

Previously in this walkthrough, you added a custom query to the domain service that returns orders with a ship date before a user-supplied date. This procedure demonstrates how the **Data Sources** window can be used to create a user interface that takes user-supplied parameters that are then passed to a domain service query.

### To create the user interface

1. In the AdventureWorksApp project, in the **Views** folder, add a new Silverlight Page named OrderSearchByShipDateBefore.xaml.
2. In **Solution Explorer**, double-click MainPage.xaml.
3. In XAML view, add the following code after the \\\<HyperlinkButton x:Name="Link3" ... /> line.

   ```
   <Rectangle x:Name="Divider4" Style="{StaticResource DividerStyle}"/>
   <HyperlinkButton x:Name="Link4" Content="Ship Date" Style="{StaticResource LinkStyle}" NavigateUri="/OrderSearchByShipDateBefore" TargetName="ContentFrame"/>
   ```
4. In **Solution Explorer**, double-click OrderSearchByShipDateBefore.xaml.
5. In the **Data Sources** window, click the **SalesOrderHeader** node and then click the drop-down menu.
6. Select **GetShipDateBeforeQuery** to set it as the query of this entity.

   ![RIADisplayingData11DataSourcesGetShipDateBeforeQue](https://1585985709-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_5pS6LfA6GSEBmCbd9%2Fsync%2F26094cc2f7579442c992d77477503c81bbe91780.png?generation=1620474378744098\&alt=media)
7. Drag the **SalesOrderHeader** node to the designer.

   In addition to the DataGrid, a text box is created to accept the parameter in the query, and a button is added to run the query and load the data.

   ![RIADisplayingData12ShipDateQueryOnDesigner](https://1585985709-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_5pS6LfA6GSEBmCbd9%2Fsync%2Fa4593888dbb4477dbc29d8121e9bae0055554f08.png?generation=1620474378146352\&alt=media)

## 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 **Ship Date** button to open the page with the ship date query.
4. In the **Ship Date** box, type a date, such as 1/1/2006.
5. Click **Load**.

   Note that only ship dates before the specified date are returned.

   ![RIADisplayingData13ShipDateQueryComplete](https://1585985709-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_5pS6LfA6GSEBmCbd9%2Fsync%2F0c387d5e8ef16098bca63485818cd024a9b6bb2d.png?generation=1620474378532297\&alt=media)
6. Try other ship dates.

## Next Steps

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

* Learn how to modify records and save changes back to the database. For more information, see [Walkthrough: Editing Data From a Domain Service](https://openriaservices.gitbook.io/openriaservices/gg602747/ee707338).

## See Also

#### Concepts

[Silverlight Clients](https://openriaservices.gitbook.io/openriaservices/ee707349)