演练:在 Silverlight 业务应用程序中显示相关数据

在本演练中,您需要创建一个 Silverlight 业务应用程序,用来显示来自 AdventureWorks 示例数据库中两个相关表的数据。

本演练演示以下任务:

  • 创建由以下两个项目构成的 Silverlight 业务应用程序:Silverlight 客户端和 ASP.NET Web 应用程序。

  • 通过修改资源字符串更改应用程序名称。

  • 基于数据库文件创建一个实体数据模型。

  • 创建一个域服务,该服务向 Silverlight 客户端公开实体数据模型中的数据。有关更多信息,请参见域服务

  • 修改域服务中的查询以返回相关数据。

  • 修改域服务元数据以支持加载相关数据。

  • 创建更多 Silverlight 页以便向用户提供数据。

  • 将按钮添加到默认导航栏以便访问 Silverlight 页。

  • 对 Silverlight 页进行配置,以便通过将项从**“数据源”**窗口拖放到 Silverlight 设计器来显示数据。

  • 添加 DataPager 以导航记录。

必备条件

本演练和 WCF RIA Services 文档中提供的其他演练除了要求正确安装和配置 WCF RIA Services 和 WCF RIA Services 工具包外,还要求正确安装和配置几个必备程序,如 Visual Studio 2010 以及 Silverlight Developer Runtime 和 SDK。它们还要求安装和配置具有高级服务的 SQL Server 2008 R2 Express 以及安装 AdventureWorks OLTP 和 LT 数据库。

WCF RIA Services 的必备条件节点中的主题提供有关如何满足这些前提条件的详细说明。在执行本演练前请按照那里提供的说明操作,以确保在执行本 RIA Services 演练时遇到的问题最少。

本演练假设您可以创建一个 Silverlight 业务应用程序。在演练:使用“Silverlight 业务应用程序”模板中介绍完成此任务的过程。

创建 Silverlight 业务应用程序

Silverlight 业务应用程序是具有两个项目的解决方案:一个 Silverlight 应用程序和一个承载该 Silverlight 应用程序的 ASP.NET Web 应用程序。Silverlight 业务应用程序具有内置功能。默认情况下,它们有一个主页、一个“关于”页、一个导航栏和站点注册功能。

创建应用程序

  1. 在 Visual Studio 2010 中,在 Visual Basic 或 C# 中创建一个名为 AdventureWorksOrders 的新的 Silverlight 业务应用程序项目。在演练:使用“Silverlight 业务应用程序”模板中介绍完成此任务的过程。

    AdventureWorksOrders 解决方案用两个项目创建:一个 AdventureWorksOrders Silverlight 项目和一个 AdventureWorksOrders.Web Web 应用程序项目。

  2. 在**“解决方案资源管理器”**中,展开 AdventureWorksOrders 项目。

  3. 展开 Assets 文件夹,然后展开 Resources。

  4. 双击 ApplicationStrings.resx 以便打开资源设计器。

  5. ApplicationName 资源字符串**“值”**更改为 Adventure Works Orders

  6. 保存更改并关闭 ApplicationStrings.resx 文件。

  7. 运行该应用程序。

    主页将打开并且显示默认设计,其中包含更新的应用程序名称。

为应用程序创建数据模型

为了在该应用程序中管理数据,您使用实体数据模型。

创建实体数据模型

  1. 在**“解决方案资源管理器”中右击 AdventureWorksOrders.Web,单击“添加”,然后单击“新建项”**。

    将显示**“添加新项”**对话框。

  2. 在**“数据”类别中,单击“ADO.NET 实体数据模型”**。

  3. 将名称更改为 AdventureWorksEDM.edmx,然后单击**“添加”**。

    **“实体数据模型向导”**将打开。

  4. 在**“选择模型内容”页上,单击“从数据库生成”,然后单击“下一步”**。

  5. 在**“选择您的数据连接”页上,单击“新建连接”**。

    此时出现**“连接属性”**对话框。

  6. 为数据源选择“Microsoft SQL Server 数据库文件”,然后指定 AdventureWorksLT 数据库文件的位置。

  7. 单击**“确定”**。

  8. 在**“选择您的数据连接”页上,单击“下一步”**。

  9. 如果出现一条消息,请求您将数据库文件复制到您的项目中并修改连接,则单击**“是”**。

  10. 在**“选择数据库对象”页上,展开“表”**节点。

  11. 在**“SalesOrderDetail (SalesLT)”表和“SalesOrderHeader (SalesLT)”**表旁边添加复选标记。

    RIARelatedData03ChooseDatabaseObjects

  12. 单击**“完成”**。

    SalesOrderDetail 表和 SalesOrderHeader 将表显示在实体设计器中。

  13. 生成解决方案。

    您必须在添加域服务之前生成解决方案。

创建域服务

域服务向客户端公开数据模型中的数据实体和操作。在此过程中,您将向服务器项目添加一个域服务。

创建域服务

  1. 在**“解决方案资源管理器”中右击 AdventureWorksOrders.Web,单击“添加”,然后单击“新建项”**。

    将显示**“添加新项”**对话框。

  2. 在**“Web”类别中,单击“域服务类”**模板。

  3. 将域服务类命名为 AdventureWorksService,然后单击**“添加”**。

    此时将打开**“添加新的域服务类”**对话框。

  4. 为**“SalesOrderDetail”实体和“SalesOrderHeader”实体同时选中“启用编辑”**复选框。

    RIARelatedData04AddDomainServiceEntities

  5. 单击**“确定”**。

  6. 生成解决方案。

编辑域服务查询以包含相关数据

域服务提供默认操作,您应对默认操作进行修改以适应特定的应用程序。在此过程中,您需要编辑 GetSalesOrderHeaders 查询,以便它返回相关的 SalesOrderDetail 记录。还需要向查询添加排序顺序以便运行 DataPager

更改域服务查询

  1. 在**“解决方案资源管理器”**中,双击 AdventureWorksService.vb 或 AdventureWorksService.cs。

  2. 如下面的代码所示,更新 GetSalesOrderHeaders 方法。

    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. 在**“解决方案资源管理器”**中,双击 AdventureWorksService.metadata.vb 或 AdventureWorksService.metadata.cs。

  4. SalesOrderHeaderMetadata 类中,在 SalesOrderDetails 实体集合语句之前添加一个 Include 特性:

    <Include()>
    Public Property SalesOrderDetails As EntityCollection(Of SalesOrderDetail)
    
    [Include]
    public EntityCollection<SalesOrderDetail> SalesOrderDetails { get; set; }
    
  5. 生成解决方案。

创建 Silverlight 页以显示数据

在此过程中,您将添加一个“Orders”页,以显示来自各表的数据。

创建 Silverlight 页

  1. 在**“解决方案资源管理器”的 AdventureWorksOrders 中右击“视图”**文件夹,然后添加一个新项。

  2. 在**“添加新项”对话框中,单击“Silverlight”类别,再单击“Silverlight 页”**模板。

  3. 将名称更改为 Orders.xaml,然后单击**“添加”**。

向主页添加导航按钮

在此过程中,您向该应用程序的主页添加一个用于导航到“Orders”页的按钮。

创建导航按钮

  1. 在**“解决方案资源管理器”**中,双击 MainPage.xaml。

  2. 在 XAML 视图中,在 <HyperlinkButton x:Name="Link2" ... /> 行之后添加以下代码。

    <Rectangle x:Name="Divider3" Style="{StaticResource DividerStyle}"/>
    <HyperlinkButton x:Name="Link3" Content="Orders" Style="{StaticResource LinkStyle}" NavigateUri="/Orders" TargetName="ContentFrame"/>
    
  3. 运行该应用程序。

    **“Orders”**按钮应该在该导航栏中出现。

  4. 单击**“Orders”**按钮。

    将显示空白的“Orders”页。

在页上显示相关数据

在此过程中,通过将项从**“数据源”**窗口直接拖到设计器中,可以在“Orders”页上创建数据绑定控件。首先创建一个 DataGrid 以显示关于各个订单的基本信息,如 Account Number(帐号)、CustomerID(客户 ID)和 Amount Due(应付金额)。然后创建一个 Grid 控件,用于列出该订单中的各个项。

创建数据绑定控件

  1. 在**“解决方案资源管理器”**中,双击 Orders.xaml。

  2. 单击**“数据”菜单,然后单击“显示数据源”**。

    将打开**“数据源”窗口。请注意,该“数据源”**窗口已包含可用于该应用程序的实体。

  3. 单击**“SalesOrderHeader”**节点,然后单击下拉菜单。

  4. 单击**“详细信息”**。

  5. 从**“数据源”窗口中,将“SalesOrderHeader”**节点拖到设计器上。

    随之创建一个 Grid,其中填充了用于 SalesOrderHeader 表中各数据字段的控件。

    RIARelatedData06SalesOrderHeaderGridOnLayout

  6. 在**“数据源”窗口中,展开“SalesOrderHeader”**节点。

  7. 单击**“SalesOrderDetails”节点(“SalesOrderHeader”**节点的子节点)。

    RIARelatedData07SalesOrderHeaderSalesOrderDetails

  8. 将**“SalesOrderDetails”**节点拖到各个订单控件旁边的设计器上。

    随之创建一个 DataGrid,其中填充了 SalesOrderDetail 表的字段。

    RIARelatedData08NoPagingYet

添加分页以便对订单数据进行导航

在此过程中,您通过将 DataPager 添加到数据源来添加分页。您将 DataPager.Source 设置为 DomainDataSource,它管理页导航应该控制的数据。

note注意:
DataPager 要求对其数据源进行显式排序。这就是为什么在本演练中较早向查询添加了 OrderBy 子句的原因。

配置数据的分页

  1. 在**“解决方案资源管理器”**中,双击 Orders.xaml。

  2. 在工具箱中找到**“DataPager”**控件。

  3. 将**“DataPager”**拖到设计器上。

  4. 在**“数据源”窗口中,单击“SalesOrderHeader”**节点。

  5. 将**“SalesOrderHeader”节点拖到“DataPager”**上。

    这会将 DataPager 的 Source 属性设置为正确的数据源。

  6. 在设计器上选择**“DataPager”**。

  7. 在**“属性”窗口中,将“PageSize”**属性设置为 1。

测试应用程序

在此过程中,您将生成并运行该应用程序,以便确认该应用程序按预期运行。

测试应用程序

  1. 在**“生成”菜单上单击“生成解决方案”**。

    验证解决方案已生成且未发生错误。

  2. 运行该应用程序。

  3. 单击**“Orders”**按钮。

  4. DataPager 按钮上单击导航按钮,以便在订单记录中导航。

    请注意,在订单头记录中导航时,相关的订单详细信息将显示在 DataGrid 中。

    显示 OrderID 和详细信息的已完成的应用程序

后续步骤

完成本演练后,您可以执行以下相关任务:

另请参见

概念

WCF RIA Services
Silverlight 客户端