逐步解說：顯示 Silverlight 商務應用程式中的相關資料

發行項
03/11/2011

在本逐步解說中，您將了解如何建立 Silverlight 商務應用程式，顯示 AdventureWorks 範例資料庫中兩個相關資料表的資料。

本逐步解說將說明下列工作：

建立由下列兩種專案組成的 Silverlight 商務應用程式：Silverlight 用戶端和 ASP.NET Web 應用程式。
修改資源字串，以變更應用程式名稱。
根據資料庫檔案建立實體資料模型。
建立可將實體資料模型中的資料公開至 Silverlight 用戶端的網域服務。如需詳細資訊，請參閱網域服務。
修改網域服務中的查詢以傳回相關的資料。
修改網域服務中繼資料以支援載入相關的資料。
建立其他 Silverlight 頁面以將資料呈現給使用者。
在預設導覽列中加入按鈕以存取 Silverlight 頁面。
從 [資料來源] 視窗將項目拖曳至 Silverlight Designer 上，設定要顯示資料的 Silverlight 頁面。
加入 DataPager 以導覽記錄。

必要條件

除了 WCF RIA Services 和 WCF RIA Services 工具組之外，在 WCF RIA Services 文件中呈現的這個逐步解說和其他逐步解說還需要正確安裝並設定數個必要程式 (例如 Visual Studio 2010 和 Silverlight 開發人員執行階段與 SDK)。要執行逐步解說還需要安裝並設定 SQL Server 2008 R2 Express with Advanced Services，以及安裝 AdventureWorks OLTP 和 LT 資料庫。

在 WCF RIA Services 的必要條件節點中的主題也提供符合這些必要條件的詳細指示。請先按照該處提供的指示進行，然後再進行本逐步解說，以確保您在進行本 RIA Services 逐步解說時不會發生問題。

本逐步解說假設您會建立 Silverlight 商務應用程式。完成此工作的程序在逐步解說：使用 Silverlight 商務應用程式範本中有說明。

建立 Silverlight 商務應用程式

Silverlight 商務應用程式是具備兩種專案的方案：一種是 Silverlight 應用程式，而另一種是裝載 Silverlight 應用程式的 ASP.NET Web 應用程式。Silverlight 商務應用程式擁有內建功能。預設有首頁、關於頁、導覽列和網站註冊功能。

若要建立應用程式

在 Visual Studio 2010 中，以 Visual Basic 或 C# 建立新的 Silverlight 商務應用程式，並命名為 AdventureWorksOrders。完成此工作的程序在逐步解說：使用 Silverlight 商務應用程式範本中有說明。

AdventureWorksOrders 方案是由兩個專案所建立的：一個是 AdventureWorksOrders Silverlight 專案，另一個則是 AdventureWorksOrders.Web Web 應用程式專案。
在 [方案總管] 中展開 AdventureWorksOrders 專案。
展開 [Assets] 資料夾，然後展開 [資源]。
按兩下 ApplicationStrings.resx 開啟 [資源設計工具]。
將 [ApplicationName] 資源字串 [Value] 變更為 Adventure Works Orders。
儲存變更並關閉 ApplicationStrings.resx 檔案。
執行應用程式。

首頁隨即開啟並顯示預設設計，當中包含更新過的應用程式名稱。

建立應用程式的資料模型

若要管理應用程式中的資料，您可以使用實體資料模型。

若要建立實體資料模型

在 [方案總管] 中，以滑鼠右鍵按一下 AdventureWorksOrders.Web，然後按一下 [加入]，再按一下 [新增項目]。

[加入新項目] 對話方塊隨即出現。
按一下 [資料] 分類中的 [ADO.NET 實體資料模型] 範本。
將名稱變更為 AdventureWorksEDM.edmx，然後按一下 [加入]。

[實體資料模型精靈] 隨即開啟。
按一下 [選擇模型內容] 頁面上的 [從資料庫產生]，然後按一下 [下一步]。
按一下 [選擇您的資料連接] 頁面上的 [新增連接]。

[連接屬性] 對話方塊隨即出現。
為資料來源選擇 Microsoft SQL Server 資料庫檔案，並指定 AdventureWorksLT 資料庫檔案的位置。
按一下 [確定]。
按一下 [選擇您的資料連接] 頁面上的 [下一步]。
如果出現訊息，詢問您是否要將資料庫檔案複製到專案中並修改連接，請按一下 [是]。
展開 [選擇您的資料庫物件] 頁面上的 [資料表] 節點。
在 [SalesOrderDetail (SalesLT)] 和 [SalesOrderHeader (SalesLT)] 資料表旁邊加上核取標記。
按一下 [完成]。

SalesOrderDetail 和 SalesOrderHeader 資料表隨即出現在 Entity Designer 中。
建置方案。

您必須在加入網域服務之前建置方案。

建立網域服務

網域服務可將資料模型中的資料實體和作業公開至用戶端。在此程序中，您要將網域服務加入至伺服器專案。

若要建立網域服務

在 [方案總管] 中，以滑鼠右鍵按一下 AdventureWorksOrders.Web，然後按一下 [加入]，再按一下 [新增項目]。

[加入新項目] 對話方塊隨即出現。
按一下 [Web] 分類中的 [DomainService 類別] 範本。
將 DomainService 類別命名為 AdventureWorksService，然後按一下 [加入]。

[加入新的 DomainService 類別] 對話方塊隨即開啟。
選取 [SalesOrderDetail] 和 [SalesOrderHeader] 實體的 [啟用編輯] 核取方塊。
按一下 [確定]。
建置方案。

編輯網域服務查詢以包含相關的資料

網域服務提供預設的作業，您應該為特定應用程式修改這些作業。在此程序中，您要編輯 GetSalesOrderHeaders 查詢，讓它傳回相關的 SalesOrderDetail 記錄。在查詢中加入排序次序，對於 DataPager 的執行也是必要的。

若要變更網域服務查詢

在 [方案總管] 中按兩下 AdventureWorksService.vb 或 AdventureWorksService.cs。

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

在 [方案總管] 中按兩下 AdventureWorksService.metadata.vb 或 AdventureWorksService.metadata.cs。

在 SalesOrderHeaderMetadata 類別中，將 Include 屬性加到 SalesOrderDetails 實體集合陳述式前面：

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

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

建置方案。

建立要顯示資料的 Silverlight 頁面

在此程序中，您要加入 Orders 頁面，以便顯示資料表的資料。

若要建立 Silverlight 頁面

在 [方案總管] 的 AdventureWorksOrders 中，以滑鼠右鍵按一下 [Views] 資料夾，然後加入新項目。
在 [加入新項目] 對話方塊中，按一下 [Silverlight] 分類，然後按一下 [Silverlight 頁面] 範本。
將名稱變更為 Orders.xaml，然後按一下 [加入]。

在首頁中加入導覽按鈕

在此程序中，您要在應用程式的首頁中加入一個按鈕，以便導覽至 Orders 頁面。

若要建立導覽按鈕

在 [方案總管] 中按兩下 MainPage.xaml。

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

執行應用程式。

[Orders] 按鈕應該會出現在導覽列中。
按一下 [Orders] 按鈕。

空的 Orders 頁面隨即出現。

在頁面上顯示相關的資料

在此程序中，您要從 [資料來源] 視窗將項目直接拖曳至設計工具，以在 Orders 頁面上建立資料繫結控制項。您要先建立 DataGrid，它會顯示個別訂單的基本資訊，例如 Account Number、CustomerID 和 Amount Due。然後建立 Grid 控制項，它會列出該訂單中的個別項目。

若要建立資料繫結控制項

在 [方案總管] 中按兩下 Orders.xaml。
按一下 [資料] 功能表，然後按一下 [顯示資料來源]。

[資料來源] 視窗隨即開啟。請注意，[資料來源] 視窗已經包含應用程式可用的實體。
按一下 [SalesOrderHeader] 節點，然後按一下下拉式功能表。
按一下 [詳細資料]。
從 [資料來源] 視窗，將 [SalesOrderHeader] 節點拖曳至設計工具。

隨即會建立 Grid，其中填入 SalesOrderHeader 資料表之資料欄位的控制項。
在 [資料來源] 視窗中，展開 [SalesOrderHeader] 節點。
按一下 [SalesOrderDetails] 節點 (為 [SalesOrderHeader] 節點的子節點)。
將 [SalesOrderDetails] 節點拖曳至設計工具上個別訂單控制項的旁邊。

隨即會建立 DataGrid，其中填入 SalesOrderDetail 資料表之資料欄位的控制項。

加入分頁以導覽訂單資料

在此程序中，您要將 DataPager 加入至資料來源來加入分頁。您要將 DataPager.Source 設為 DomainDataSource，後者管理頁面導覽區應該控制的資料。

注意：
DataPager 要求它的資料來源必須明確地經過排序。這就是稍早在本逐步解說的查詢中加入 OrderBy 子句的原因。

若要設定資料分頁

在 [方案總管] 中按兩下 Orders.xaml。
在 [工具箱] 中找出 [DataPager] 控制項。
將 [DataPager] 節點拖曳至設計工具。
按一下 [資料來源] 視窗中的 [SalesOrderHeader] 節點。
將 [SalesOrderHeader] 節點拖曳至 [DataPager]。

這會將 DataPager 的 Source 屬性設為正確的資料來源。
選取設計工具上的 [DataPager]。
在 [屬性] 視窗中將 [PageSize] 屬性設為 1。

測試應用程式

在此程序中，您要建置並執行應用程式，以驗證應用程式是否依預期執行。

若要測試應用程式

按一下 [建置] 功能表上的 [建置方案]。

接著驗證方案建置無誤。
執行應用程式。
按一下 [Orders] 按鈕。
按一下 DataPager 按鈕上的導覽按鈕，以便導覽訂單記錄。

請注意，導覽訂單標頭記錄時相關的訂單詳細資料會出現在 DataGrid。

後續步驟

完成這個逐步解說後，您可以執行下列相關的工作：

修改記錄並將變更儲存回資料庫。如需詳細資訊，請參閱逐步解說：編輯網域服務的資料。

另請參閱

概念

WCF RIA Services
Silverlight 用戶端

Share via