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

發行項
03/11/2011

在本逐步解說中，您將建立 Silverlight 商務應用程式，在兩個不同的 Silverlight 頁面上顯示 AdventureWorks 範例資料庫的資料。第一個頁面會顯示 SalesOrderHeader 資料表的資料，並提供瀏覽整個資料庫記錄的支援。第二個頁面讓使用者可以根據日期執行查詢。

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

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

必要條件

除了 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 商務應用程式，並命名為 AdventureWorksApp。完成此工作的程序在逐步解說：使用 Silverlight 商務應用程式範本中有說明。

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

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

建立應用程式的資料模型

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

若要建立實體資料模型

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

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

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

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

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

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

建立網域服務

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

若要建立網域服務

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

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

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

變更網域服務查詢

加入 DomainService 類別時，當中會填入查詢方法。您可以決定直接使用這些查詢的方法，而不必進一步修改。但是，在多數的情況下一些修改是必要的。在此程序中，您要編輯 GetSalesOrderHeaders 查詢方法。

若要變更網域服務查詢

在 [方案總管] 中按兩下 AdventureWorksService.vb 或 AdventureWorksService.cs，以便開啟這個檔案。

更新 GetSalesOrderHeaders 方法，如下列程式碼所示。

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

建置方案。

建立要顯示資料的 Silverlight 頁面

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

若要建立 Silverlight 頁面

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

OrderList.xaml 隨即在設計工具中開啟。
將 [TextBlock] 從 [工具箱] 拖曳至設計工具頂端。
在 [屬性] 視窗中，將 [Text] 屬性變更為訂單清單。
儲存 OrderList.xaml 頁面。

在首頁中加入導覽按鈕

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

若要建立導覽按鈕

在 [方案總管] 中按兩下 MainPage.xaml，以便在設計工具中加以開啟。

在 [XAML] 檢視中，將下列標記加到 <HyperlinkButton x:Name="Link2" ... /> 程式行後面。

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

執行應用程式。

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

OrderList 頁面隨即出現。

在 OrderList 頁面上顯示訂單資料

在此程序中，您要將 Order 實體從 [資料來源] 視窗拖曳至設計工具，以建立及設定 DataGrid 來顯示訂單資料。

若要建立資料繫結 DataGrid

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

[資料來源] 視窗隨即開啟。請注意，[資料來源] 視窗已經包含應用程式可用的實體。
將 [SalesOrderHeader] 節點從 [資料來源] 視窗拖曳至設計工具 (訂單清單文字區塊下方)。

已填入 SalesOrderHeader 資料表之資料行標題的 [DataGrid] 會出現在設計介面上。
執行應用程式。
按一下導覽列中的 [訂單清單] 按鈕。

訂單資料隨即顯示在 OrderList 頁面上。

在網域服務中加入自訂查詢

您可以在網域服務中加入其他查詢。此程序會加入兩個自訂查詢。

若要在網域服務中加入自訂查詢

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

在 AdventureWorksService 類別中加入下列方法。

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

如果使用 Visual Basic，請在 AdventureWorksService.vb 檔案最上方將 Option Strict 陳述式設為 Off。
建置方案。

顯示自訂查詢的資料

在此程序中，您要選取 [資料來源] 視窗中的查詢並將它拖曳至已在設計工具中的 [DataGrid]，以便顯示新查詢的資料。此動作會重新設定 [DataGrid] 的繫結，以顯示選取之查詢的資料。

若要顯示現有 DataGrid 中自訂查詢的資料

在 [方案總管] 中按兩下 OrderList.xaml。
按一下 [資料來源] 視窗中的 [SalesOrderHeader]，然後按一下下拉式功能表。

請注意，有三個查詢列在功能表底部。選取的查詢即是將這個實體拖曳至設計工具後會在產生的資料來源之 QueryName 中設定的查詢。
從查詢清單中選取 [GetOrdersWithSmallSubtotalsQuery]，將它設為這個實體的查詢。
將 [SalesOrderHeader] 節點拖曳至設計工具上的現有 [DataGrid]。
執行應用程式。
按一下 [訂單清單] 按鈕。

請注意，[DataGrid] 中不會列出小計超過 2000 的訂單。

加入排序

除了在基礎查詢中使用 OrderBy 子句排序資料外，您還可以在頁面的 XAML 中設定排序。您可以在 DomainDataSource 中加入 SortDescriptors 來設定排序。您可以直接在 XAML 中或使用 [屬性] 視窗加入 SortDescriptors，如下列程序所示。

若要使用屬性視窗加入 SortDescriptors

在 [方案總管] 中按兩下 OrderList.xaml。
在 [XAML] 檢視中，將游標放在 Name 屬性設為 salesOrderHeaderDomainDataSource1 的 riaControls:DomainDataSource 項目內。

注意：

在檔案中有兩個 riaControls:DomainDataSource 項目。請務必將滑鼠指標放在 Name 屬性設為 salesOrderHeaderDomainDataSource1 的項目內。
在 [屬性視窗] 中按一下 [SortDescriptors] 屬性，然後按一下省略符號按鈕 (…)。

SortDescriptors 集合編輯器隨即出現。
按一下 [加入]。

SortDescriptors 項目隨即加入。
展開 [屬性] 底下的 [其他] 分類。
在 [PropertyPath] 值資料行中輸入 CustomerID。

注意：
在檔案中有兩個 `riaControls:DomainDataSource` 項目。請務必將滑鼠指標放在 `Name` 屬性設為 `salesOrderHeaderDomainDataSource1` 的項目內。

按一下 [確定]。

請注意，下列 XAML 已經加入 riaControls:DomainDataSource 項目中。

<riaControls:DomainDataSource.SortDescriptors>
    <riaControls:SortDescriptor PropertyPath="CustomerID" />
</riaControls:DomainDataSource.SortDescriptors>

執行應用程式。

按一下 [訂單清單] 按鈕。

請注意，資料會依 Customer ID 清單排序。

RIADisplayingData09SortedByCustomerID

注意：
當您同時實作分頁和排序時，請至少加入一個 SortDescriptor 並將其 PropertyPath 屬性 (Attribute) 指派至包含唯一值的屬性 (Property)，例如主索引鍵。或者，請根據包含唯一值的屬性，將 OrderBy 子句加入至 DomainDataSource 中的查詢。如果您只針對不包含唯一值的屬性排序資料，傳回值可能會包含頁面之間不一致或遺漏的資料。

當您同時實作分頁和排序時，請至少加入一個 SortDescriptor 並將其 PropertyPath 屬性 (Attribute) 指派至包含唯一值的屬性 (Property)，例如主索引鍵。或者，請根據包含唯一值的屬性，將 OrderBy 子句加入至 DomainDataSource 中的查詢。如果您只針對不包含唯一值的屬性排序資料，傳回值可能會包含頁面之間不一致或遺漏的資料。

加入分頁

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

若要設定資料分頁

在 [方案總管] 中按兩下 OrderList.xaml。
在 [工具箱] 中找出 DataPager 控制項。
將 [DataPager] 拖曳至設計工具上 DataGrid 下方的區域。
在 [資料來源] 視窗中，按一下 [SalesOrderHeader] 節點，然後按一下下拉式功能表，確認 [GetOrdersWithSmallSubtotalsQuery] 處於選取狀態。
將 [SalesOrderHeader] 節點拖曳至 [DataPager] 上。

這會將 DataPager 的 Source 屬性設為正確的資料來源。
在設計工具上選取 DataPager。
在 [屬性] 視窗中將 [PageSize] 屬性設為 5。
執行應用程式。
按一下 [訂單清單] 按鈕。
按一下 DataPager 上的導覽按鈕，以便在 DataGrid 中一次導覽 5 筆記錄。

建立要依日期搜尋訂單的頁面

先前在本逐步解說中，您已在網域服務中加入一個自訂查詢，可傳回出貨日期早於使用者提供之日期的訂單。此程序將示範如何使用 [資料來源] 視窗建立一個使用者介面，用來接受使用者提供的參數再傳遞至網域服務查詢。

若要建立使用者介面

在 AdventureWorksApp 專案的 [Views] 資料夾中加入新的 Silverlight 頁面並命名為 OrderSearchByShipDateBefore.xaml。
在 [方案總管] 中按兩下 MainPage.xaml。

在 [XAML] 檢視中，將下列程式碼加到 <HyperlinkButton x:Name="Link3" ... /> 程式行後面。

<Rectangle x:Name="Divider4" Style="{StaticResource DividerStyle}"/>
<HyperlinkButton x:Name="Link4" Content="Ship Date" Style="{StaticResource LinkStyle}" NavigateUri="/OrderSearchByShipDateBefore" TargetName="ContentFrame"/>

在 [方案總管] 中按兩下 OrderSearchByShipDateBefore.xaml。
按一下 [資料來源] 視窗中的 [SalesOrderHeader] 節點，然後按一下下拉式功能表。
選取 [GetShipDateBeforeQuery]，將它設為這個實體的查詢。
將 [SalesOrderHeader] 節點拖曳至設計工具。

除了 DataGrid 之外，還會建立一個可接受查詢參數的文字方塊，並且加入一個可執行查詢及載入資料的按鈕。

測試應用程式

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

若要測試應用程式

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

接著驗證方案建置無誤。
執行應用程式。
按一下 [出貨日期] 按鈕，以出貨日期查詢開啟頁面。
在 [出貨日期] 方塊中輸入日期，例如 1/1/2006。
按一下 [載入]。

請注意，只會傳回早於指定之日期的出貨日期。
嘗試其他出貨日期。

後續步驟

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

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

另請參閱

概念

Silverlight 用戶端

Share via