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

To create the application

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.
The AdventureWorksApp solution is created with two projects: an AdventureWorksApp Silverlight project and an AdventureWorksApp.Web Web application project.
In Solution Explorer, expand the AdventureWorksApp project.
Expand the Assets folder and then expand Resources.
Double-click ApplicationStrings.resx to open the Resource Designer.
Change the ApplicationName resource string Value to Adventure Works Application.
Save the changes and close the ApplicationStrings.resx file.
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

In Solution Explorer, right-click AdventureWorksApp.Web, click Add, and then click New Item.
The Add New Item dialog box appears.
In the Data category, click the ADO.NET Entity Data Model template.
Change the name to AdventureWorksEDM.edmx, and then click Add.
The Entity Data Model Wizard opens.
On the Choose Model Contents page, click Generate from database and then click Next.
On the Choose Your Data Connection page, click New Connection.
The Connection Properties dialog box appears.
Select Microsoft SQL Server Database File for the data source and specify the location of the AdventureWorksLT database file.
Click OK.
On the Choose Your Data Connection page, click Next.
If a message appears asking you if you want to copy the database file to your project and modify the connection, click Yes.
On the Choose Your Database Objects page, expand the Tables node.
Add a check mark next to the SalesOrderHeader (Sales LT) table.
Click Finish.
The SalesOrderHeader table appears in the Entity Designer.
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

In Solution Explorer, right-click AdventureWorksApp.Web, click Add, and then click New Item.
The Add New Item dialog box appears.
In the Web category, click the Domain Service Class template.
Name the Domain Service Class AdventureWorksService and then click Add.
The Add New Domain Service Class dialog box opens.
Select the SalesOrderHeader and Enable editing check boxes, and then click OK.
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

In Solution Explorer, double-click AdventureWorksService.vb or AdventureWorksService.cs to open this file.

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

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

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

In Solution Explorer, in the AdventureWorksApp project, right-click the Views folder and add a new item.
In the Add New Item dialog box, select the Silverlight category and then click the Silverlight Page template.
Change the name to OrderList.xaml, and then click Add.
OrderList.xaml opens in the designer.
From the Toolbox, drag a TextBlock to the top of the designer.
In the Properties window, change the Text property to Order List.
Save the OrderList.xaml page.

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

In Solution Explorer, double-click MainPage.xaml to open it in the designer.

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"/>

Run the application.
The Order List button should appear in the navigation bar.
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

In Solution Explorer, double-click OrderList.xaml.
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.
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.
Run the application.
In the navigation bar, click the Order List button.
Order data displays on the Order List page.

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

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

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

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);
}

If you are using Visual Basic, at the top of the AdventureWorksService.vb file, set the Option Strict statement to Off.
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

In Solution Explorer, double-click OrderList.xaml.
In the Data Sources window, click SalesOrderHeader and then click the drop-down menu.
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.
Select GetOrdersWithSmallSubtotalsQuery from the list of queries to set it as the query of this entity.
Drag the SalesOrderHeader node to the existing DataGrid on the designer.
Run the application.
Click the Order List button.
Note that no order subtotal listed in the DataGrid exceeds 2000.

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

In Solution Explorer double-click OrderList.xaml.
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.

In the Properties window, click the SortDescriptors property and then click the ellipsis button (…).
The SortDescriptors collection editor appears.
Click Add.
A SortDescriptors item is added.
Under Properties, expand the Other category.
In the PropertyPath value column, type CustomerID.

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>

Run the application.
Click the Order List button.
Note the data is sorted by list Customer ID.

[!WARNING] When you implement paging and sorting together, include at least one SortDescriptor with its PropertyPath 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. 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

In Solution Explorer, double-click OrderList.xaml.
In the ToolBox, locate the DataPager control.
Drag the DataPager to an area in the designer below the DataGrid.
In the Data Sources window, click the SalesOrderHeader node, click the drop-down menu, and verify the GetOrdersWithSmallSubtotalsQuery is selected.
Drag the SalesOrderHeader node onto the DataPager.
This sets the DataPager's Source property to the correct data source.
Select the DataPager on the designer.
In the Properties window, set the PageSize property to 5.
Run the application.
Click the Order List button.
Click the navigation buttons on the DataPager to navigate 5 records at a time in the DataGrid.

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

In the AdventureWorksApp project, in the Views folder, add a new Silverlight Page named OrderSearchByShipDateBefore.xaml.
In Solution Explorer, double-click MainPage.xaml.

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"/>

In Solution Explorer, double-click OrderSearchByShipDateBefore.xaml.
In the Data Sources window, click the SalesOrderHeader node and then click the drop-down menu.
Select GetShipDateBeforeQuery to set it as the query of this entity.
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.

Testing the Application

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

To test the application

On the Build menu, click Build Solution.
Verify that the solution builds without errors.
Run the application.
Click the Ship Date button to open the page with the ship date query.
In the Ship Date box, type a date, such as 1/1/2006.
Click Load.
Note that only ship dates before the specified date are returned.
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.