共用方式為

將 WPF 控制項繫結至 WCF 資料服務

  • 發行項

您將在此逐步解說中，建立包含資料繫結控制項的 WPF 應用程式。 這些控制項會繫結至 WCF 資料服務中封裝的客戶記錄。 您也會加入按鈕，讓客戶可使用這些按鈕檢視及更新記錄。

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

  • 建立從 AdventureWorksLT 範例資料庫中的資料產生的實體資料模型。

  • 建立 WCF 資料服務，以將實體資料模型中的資料公開給 WPF 應用程式。

  • 從 [資料來源] 視窗將項目拖曳至 WPF 設計工具，以建立一組資料繫結控制項。

  • 建立可向前及向後巡覽客戶記錄的按鈕。

  • 建立按鈕，以將控制項中的資料變更儲存至 WCF 資料服務及基礎資料來源。

注意

在本文的某些 Visual Studio 使用者介面項目中，您的電腦可能會顯示不同的名稱或位置。 您使用的可能是不同版本的 Visual Studio 或不同的環境設定。 如需詳細資訊，請參閱將 IDE 個人化。

必要條件

您需要下列元件才能完成這個逐步解說：

  • Visual Studio

  • 對執行中的 SQL Server 或 SQL Server Express (其中連結了 AdventureWorksLT 範例資料庫) 執行個體的存取權。 若要下載資料庫，請參閱 AdventureWorks 範例資料庫。

預先了解下列概念也有助於完成此逐步解說 (但非必要)：

建立服務專案

  1. 建立 C# 或 Visual Basic ASP.NET Web 應用程式 專案，以開始本逐步解說。 將專案命名為 AdventureWorksService。

  2. 在 [方案總管] 中，以滑鼠右鍵按一下 Default.aspx，並選取 [刪除]。 此逐步解說不需要這個檔案。

建立服務的實體資料模型

若要使用 WCF 資料服務將資料公開給應用程式，您必須定義服務的資料模型。 WCF 資料服務支援兩種類型的資料模型：實體資料模型及自訂資料模型，後者使用實作 IQueryable<T> 介面的 Common Language Runtime (CLR) 所定義。 在此逐步解說中，您要建立資料模型的實體資料模型。

  1. 在 [專案] 功能表上，按一下 [加入新項目]。

  2. 在 [已安裝的範本] 清單中，按一下 [資料]，然後選取 [ADO.NET 實體資料模型] 專案項目。

  3. 將名稱變更為 AdventureWorksModel.edmx，然後按一下 [新增]。

    [實體資料模型精靈] 隨即開啟。

  4. 在 [選擇模型內容] 頁面中，按一下 [從資料庫產生]，然後按一下 [下一步]。

  5. 在 [選擇資料連線] 頁面中，選取下列其中一個選項：

    • 若下拉式清單中有提供 AdventureWorksLT 範例資料庫的資料連接，請選取此資料連接。

    • 按一下 [新增連線]，建立與 AdventureWorksLT 資料庫的連線。

  6. 在 [選擇資料連線] 頁面中，確定已選取 [將 App.Config 中的實體連線設定儲存為] 選項，然後按一下 [下一步]。

  7. 在 [選擇您的資料庫物件] 頁面中，展開 [資料表]，然後選取 SalesOrderHeader 資料表。

  8. 按一下完成。

建立服務

建立 WCF 資料服務，以將實體資料模型中的資料公開給 WPF 應用程式：

  1. 在 [專案] 功能表上，選取 [新增項目]。

  2. 在 [已安裝的範本] 清單中，按一下 Web，然後選取 [WCF 資料服務] 專案項目。

  3. 在 [名稱] 方塊中輸入 AdventureWorksService.svc，然後按一下 [新增]。

    Visual Studio 會將 AdventureWorksService.svc 新增至專案。

設定服務

您必須設定服務，以處理您建立的實體資料模型：

  1. 在 AdventureWorks.svc 程式碼檔案中，以下列程式碼取代 AdventureWorksService 類別宣告。

    public class AdventureWorksService : DataService<AdventureWorksLTEntities>
{
    // This method is called only once to initialize service-wide policies.
    public static void InitializeService(IDataServiceConfiguration config)
    {
        config.SetEntitySetAccessRule("SalesOrderHeaders", EntitySetRights.All);
    }
}

    此程式碼會更新 AdventureWorksService 類別，使其衍生自處理您在實體資料模型中 AdventureWorksLTEntities 物件內容類別的 DataService<T>。 該程式碼也會更新 InitializeService 方法，允許服務的用戶端對 SalesOrderHeader 實體具有完整的讀取/寫入存取權。

  2. 建置專案，並確認專案建置無誤。

建立 WPF 用戶端應用程式

若要從 WCF 資料服務顯示資料，請使用以服務為基礎的資料來源，建立新的 WPF 應用程式。 稍後您將在此逐步解說中，將資料繫結控制項加入至應用程式。

  1. 在 [方案總管] 中，以滑鼠右鍵按一下方案節點，然後按一下 [新增]，然後選取 [新增專案]。

  2. 在 [新增專案] 對話方塊中，展開 [Visual C#] 或 [Visual Basic]，然後選取 [視窗]。

  3. 選取 [WPF 應用程式] 專案範本。

  4. 在 [名稱] 方塊中，鍵入 AdventureWorksSalesEditor 並按一下 [確定]。

    Visual Studio 會將 AdventureWorksSalesEditor 專案新增至方案。

  5. 按一下 [ 資料 ] 功能表上的 [ 顯示資料來源]。

    [資料來源] 視窗隨即開啟。

  6. 在 [ 資料來源 ] 視窗中，按一下 [ 加入新資料來源]。

    [資料來源組態精靈] 隨即開啟。

  7. 在精靈的 [選擇資料來源類型] 頁面中，選取 [服務]，然後按一下 [下一步]。

  8. 在 [新增服務參考] 對話方塊中，按一下 [探索]。

    Visual Studio 會搜尋目前方案中可用的服務，並將 AdventureWorksService.svc 新增至 [服務] 方塊中可用的服務清單。

  9. 在 [命名空間] 方塊中，鍵入 AdventureWorksService。

  10. 在 [服務] 方塊中，按一下 AdventureWorksService.svc，然後按一下 [確定]。

    Visual Studio 會下載服務資訊，然後傳回 [資料來源組態精靈]。

  11. 在 [新增服務參考] 頁面中按一下 [完成]。

    Visual Studio 會將代表服務所傳回之資料的節點，新增至 [資料來源] 視窗。

定義使用者介面

透過在 WPF 設計工具中修改 XAML，將數個按鈕加入至視窗。 在此逐步解說的稍後內容中，您會加入程式碼，讓使用者使用這些按鈕檢視及更新銷售記錄。

  1. 在 [方案總管] 中，按兩下 MainWindow.xaml。

    隨即會在 WPF 設計工具中開啟視窗。

  2. 在設計工具的 XAML 檢視中，在 <Grid> 標記之間新增下列程式碼：

    <Grid.RowDefinitions>
    <RowDefinition Height="75" />
    <RowDefinition Height="525" />
</Grid.RowDefinitions>
<Button HorizontalAlignment="Left" Margin="22,20,0,24" Name="backButton" Width="75"><</Button>
<Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75">></Button>
<Button HorizontalAlignment="Right" Margin="0,21,46,24" Name="saveButton" Width="110">Save changes</Button>

  3. 組建專案。

建立資料繫結控制項

從 [資料來源] 視窗將 SalesOrderHeaders 節點拖曳至設計工具，以建立可顯示客戶記錄的控制項。

  1. 在 [資料來源] 視窗中，按一下 [SalesOrderHeaders] 節點的下拉式清單功能表，然後選取 [詳細資料]。

  2. 展開 [SalesOrderHeaders] 節點。

  3. 在此範例中，某些欄位不會顯示，因此請按一下下列節點旁邊的下拉式清單功能表，然後選取 [無]：

    • CreditCardApprovalCode

    • ModifiedDate

    • OnlineOrderFlag

    • RevisionNumber

    • rowguid

    此動作可避免 Visual Studio 在下一個步驟中建立這些節點的資料繫結控制項。 在此逐步解說中，假設終端使用者不需要看到此資料。

  4. 從 [資料來源] 視窗將 [SalesOrderHeaders] 節點拖曳至包含按鈕之資料列下方的資料格列。

    Visual Studio 會產生 XAML 和程式碼，其可建立一組繫結至 [產品] 資料表之資料的控制項。 如需所產生 XAML 和程式碼的詳細資訊，請參閱將 WPF 控制項繫結至 Visual Studio 中的資料。

  5. 在設計工具中，按一下 [Customer ID] 標籤旁邊的文字方塊。

  6. 在 [屬性] 視窗中，選取 [IsReadOnly] 屬性旁邊的核取方塊。

  7. 為下列每個文字方塊設定 IsReadOnly 屬性：

    • Purchase Order Number

    • Sales Order ID

    • Sales Order Number

從服務載入資料

使用服務 Proxy 物件從服務載入銷售資料。 然後將傳回的資料指派給 WPF 視窗中 CollectionViewSource 的資料來源。

  1. 在設計師中，若要建立Window_Loaded事件處理常式，按兩下所讀取的文字：MainWindow。

  2. 以下列程式碼取代事件處理常式。 確認使用開發電腦的本機主機位址，取代此程式碼中的 localhost 位址。

    private AdventureWorksService.AdventureWorksLTEntities dataServiceClient;
private System.Data.Services.Client.DataServiceQuery<AdventureWorksService.SalesOrderHeader> salesQuery;
private CollectionViewSource ordersViewSource;

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    // TODO: Modify the port number in the following URI as required.
    dataServiceClient = new AdventureWorksService.AdventureWorksLTEntities(
        new Uri("http://localhost:45899/AdventureWorksService.svc"));
    salesQuery = dataServiceClient.SalesOrderHeaders;

    ordersViewSource = ((CollectionViewSource)(this.FindResource("salesOrderHeadersViewSource")));
    ordersViewSource.Source = salesQuery.Execute();
    ordersViewSource.View.MoveCurrentToFirst();
}

新增可讓使用者使用 < 及 > 按鈕捲動銷售記錄的程式碼。

  1. 在設計工具中，按兩下視窗介面上的 < 按鈕。

    Visual Studio 會開啟程式碼後置檔案，並建立 Click 事件的新 backButton_Click 事件處理常式。

  2. 將下列程式碼加入至產生的 backButton_Click 事件處理常式：

    if (ordersViewSource.View.CurrentPosition > 0)
    ordersViewSource.View.MoveCurrentToPrevious();

  3. 回到設計工具，然後按兩下 > 按紐。

    Visual Studio 會開啟程式碼後置檔案，並建立 Click 事件的新 nextButton_Click 事件處理常式。

  4. 將下列程式碼加入至產生的 nextButton_Click 事件處理常式：

    if (ordersViewSource.View.CurrentPosition < ((CollectionView)ordersViewSource.View).Count - 1)
{
    ordersViewSource.View.MoveCurrentToNext();
}

儲存銷售記錄的變更

新增程式碼，讓使用者可以使用 [儲存變更] 按鈕檢視及儲存銷售記錄的變更：

  1. 在設計工具中，按兩下 [儲存變更] 按鈕。

    Visual Studio 會開啟程式碼後置檔案，並建立 Click 事件的新 saveButton_Click 事件處理常式。

  2. 將下列程式碼加入至 saveButton_Click 事件處理常式。

    AdventureWorksService.SalesOrderHeader currentOrder = (AdventureWorksService.SalesOrderHeader)ordersViewSource.View.CurrentItem;
dataServiceClient.UpdateObject(currentOrder);
dataServiceClient.SaveChanges();

測試應用程式

建置並執行應用程式，以確認您可以檢視及更新客戶記錄：

  1. 在 [建置] 功能表上，按一下 [建置方案]。 確認方案建置無誤。

  2. 按 Ctrl+F5。

    Visual Studio 會啟動 AdventureWorksService 專案而不進行偵錯。

  3. 在 [方案總管] 中，以滑鼠右鍵按一下 AdventureWorksSalesEditor。

  4. 在右鍵功能表 (捷徑功能表) 的 [偵錯] 之下，按一下 [開始新執行個體]。

    應用程式隨即執行。 驗證下列項目：

    • 這些文字方塊會從第一筆銷售記錄 (具有銷售訂單 ID 71774) 的資料顯示不同欄位。

    • 您可以按一下 > 或 < 按鈕，巡覽其他銷售記錄。

  5. 在其中一個銷售記錄中，在 [註解] 方塊中鍵入部分文字，然後按一下 [儲存變更]。

  6. 關閉應用程式，然後從 Visual Studio 再次啟動應用程式。

  7. 巡覽至您變更過的銷售記錄，並確認變更在您關閉及重新開啟應用程式之後仍然存在。

  8. 關閉應用程式。

下一步

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

相關內容