逐步解說：將 Silverlight 控制項繫結至 WCF 資料服務

發行項
06/10/2015

在這個逐步解說中，您將建立包含資料繫結控制項的 Silverlight 應用程式。這些控制項是繫結至透過 WCF 資料服務存取的客戶記錄。

這個逐步解說將說明下列工作：

建立從 AdventureWorksLT 範例資料庫中的資料所產生的實體資料模型。
建立可將實體資料模型中的資料公開至 Silverlight 應用程式的 WCF 資料服務。
執行 [資料來源組態精靈] 以連接至填入 [資料來源] 視窗的資料服務。
從 [資料來源] 視窗將項目拖曳至 Silverlight Designer，建立一組資料繫結控制項。

建立可向前和向後巡覽記錄的按鈕。

注意事項
您的電腦對於下列指示中某些 Visual Studio 使用者介面項目的名稱或位置，可能會顯示不同的資訊：您所擁有的 Visual Studio 版本以及使用的設定會決定這些項目。如需詳細資訊，請參閱＜Visual Studio 中的自訂開發設定＞。

必要條件

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

Visual Studio
存取附加了 AdventureWorksLT 範例資料庫之執行中的 SQL Server 或 SQL Server Express 執行個體。您可以從 CodePlex 網站 (英文) 下載 AdventureWorksLT 資料庫。

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

WCF 資料服務。如需詳細資訊，請參閱 WCF Data Services 概觀。
實體資料模型和 ADO.NET Entity Framework。如需詳細資訊，請參閱 Entity Framework 概觀。
使用 Silverlight Designer。
Silverlight 資料繫結。如需詳細資訊，請參閱資料繫結。

建立服務專案

建立空白 Web 應用程式專案以裝載 WCF 資料服務，開始進行這個逐步解說。

若要建立服務專案

在 [檔案] 功能表上，指向 [新增]，然後按一下 [專案]。
展開 [Visual C#] 或 [Visual Basic]，然後選取 [Web]。
選取 [ASP.NET 空白 Web 應用程式] 專案範本。
在 [名稱] 方塊中輸入 AdventureWorksWebApp，然後按一下 [確定]。

建立服務的實體資料模型

若要使用 WCF 資料服務將資料公開至應用程式，必須定義服務的資料模型。在這個逐步解說中，請建立實體資料模型。

若要建立實體資料模型

在 [專案] 功能表上，按一下 [加入新項目]。
選取 [ADO.NET 實體資料模型] 專案項目。
將名稱改成 AdventureWorksDataModel.edmx，然後按一下 [加入]。

[實體資料模型精靈] 隨即出現。
在 [選擇模型內容] 頁面上，按一下 [從資料庫產生]，再按 [下一步]。
在 [選擇資料連接] 頁面上，選取下列其中一個選項：
- 如果下拉式清單中提供 AdventureWorksLT 範例資料庫的資料連接，請選取這個資料連接。
  
  或
- 按一下 [新增連接]，建立與 AdventureWorksLT 資料庫的連接。
確認已選取 [另存 Web.Config 中的實體連接字串為] 選項，然後按 [下一步]。
在 [選擇您的資料庫物件] 頁面上，展開 [資料表]，然後選取 [Customer] 資料表。
按一下 [完成]。

建立服務

建立 WCF 資料服務以公開實體資料模型中的資料。

若要建立服務

在 [專案] 功能表中選取 [加入新項目]。
選取 [WCF 資料服務] 專案項目。
在 [名稱] 方塊中輸入 AdventureWorksDataService.svc，然後按一下 [加入]。

設定服務

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

若要設定服務

在 AdventureWorksDataService.svc 程式碼檔中，以下列程式碼取代 AdventureWorksDataService 類別宣告：

Public Class AdventureWorksDataService
    Inherits DataService(Of AdventureWorksLTEntities)

    ' This method is called only once to initialize service-wide policies. 
    Public Shared Sub InitializeService(ByVal config As DataServiceConfiguration)
        config.SetEntitySetAccessRule("*", EntitySetRights.All)
        config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2
    End Sub 

End Class

public class AdventureWorksDataService : DataService<AdventureWorksLTEntities>
{
    // This method is called only once to initialize service-wide policies. 
    public static void InitializeService(DataServiceConfiguration config)
    {
        config.SetEntitySetAccessRule("*", EntitySetRights.All);
        config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;
    }
}

建置專案並驗證專案建置無誤。

建立 Silverlight 應用程式

建立新的 Silverlight 應用程式，然後加入資料來源以存取服務。

若要建立 Silverlight 應用程式

在 [方案總管] 中，以滑鼠右鍵按一下方案節點，然後按一下 [加入]，再選取 [新增專案]。
在 [新增專案] 對話方塊中，展開 [Visual C#] 或 [Visual Basic]，然後選取 [Silverlight]。
選取 [Silverlight 應用程式] 專案範本。
在 [名稱] 方塊中輸入 AdventureWorksSilverlightApp，然後按一下 [確定]。
在 [新 Silverlight 應用程式] 對話方塊中，按一下 [確定]。

將資料來源加入至 Silverlight 應用程式

根據服務所傳回的資料建立資料來源。

若要建立資料來源

按一下 [資料] 功能表上的 [顯示資料來源]。
在 [資料來源] 視窗中，按一下 [加入新資料來源]。

[資料來源組態精靈] 隨即開啟。
在精靈的 [選擇資料來源類型] 頁面上選取 [服務]，然後按 [下一步]。
在 [加入服務參考] 對話方塊中，按一下 [探索]。

Visual Studio 會搜尋目前方案中的可用服務，並且將 AdventureWorksDataService.svc 加入至 [服務] 方塊中的可用服務清單。
在 [命名空間] 方塊中，輸入 AdventureWorksService。
在 [服務] 方塊中，按一下 [AdventureWorksDataService.svc]，然後按一下 [確定]。
在 [加入服務參考] 頁面中，按一下 [完成]。

Visual Studio 會將表示服務所傳回之資料的節點加入至 [資料來源] 視窗。

定義視窗的使用者介面

在 Silverlight Designer 中修改 XAML，將數個按鈕加入至視窗。

若要建立視窗配置

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

視窗隨即在 Silverlight Designer 中開啟。

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

<Grid.RowDefinitions>
    <RowDefinition Height="75" />
    <RowDefinition Height="525" />
</Grid.RowDefinitions>
<Button HorizontalAlignment="Left" Margin="22,20,0,24" Name="backButton" Width="75" Content="&lt;"></Button>
<Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75" Content="&gt;"></Button>

建置專案。

建立資料繫結控制項

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

若要建立資料繫結控制項

在 [資料來源] 視窗中，按一下 [Customers] 節點的下拉式功能表，然後選取 [詳細資料]。
展開 [Customers] 節點。
在這個範例中，某些欄位不會顯示，因此請按一下下列節點旁的下拉式功能表，然後選取 [無]：
- NameStyle
- PasswordHash
- PasswordSalt
- rowguid
這個動作可防止 Visual Studio 在節點置放於設計工具時為這些節點建立控制項。在此逐步解說中，假設使用者不要看到此資料。
從 [資料來源] 視窗，將 [Customers] 節點拖曳至設計工具的按鈕底下。

Visual Studio 會產生可建立一組繫結至客戶資料之控制項的 XAML 和程式碼。

從服務載入資料

使用服務載入資料，然後將傳回的資料指派給繫結至控制項的資料來源。

若要從服務載入資料

在設計工具中，按一下其中一個按鈕旁邊的空白區域。
在 [屬性] 視窗中，確認 [UserControl] 已選取，然後按一下 [事件] 索引標籤。
尋找並按兩下 [Loaded] 事件。

在開啟的程式碼檔 (MainPage.xaml) 中，加入下列 using (C#) 或 Imports (Visual Basic) 陳述式：

Imports System.Windows.Data
Imports AdventureWorksSilverlightApp.AdventureWorksService

using System.Windows.Data;
using AdventureWorksSilverlightApp.AdventureWorksService;

以下列程式碼取代事件處理常式。務必以開發電腦的本機主機位址取代此程式碼中的 localhost 位址：

Private advWorksService As AdventureWorksLTEntities
Private customersViewSource As CollectionViewSource

Private Sub UserControl_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
    advWorksService = New AdventureWorksLTEntities(New Uri("http://localhost:6188/AdventureWorksDataService.svc"))
    customersViewSource = Me.Resources("CustomersViewSource")
    advWorksService.Customers.BeginExecute(Sub(result As IAsyncResult)
                                               customersViewSource.Source = advWorksService.Customers.EndExecute(result)
                                           End Sub, Nothing)
End Sub

private AdventureWorksLTEntities advWorksService;
private System.Windows.Data.CollectionViewSource customersViewSource;

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
    advWorksService = new AdventureWorksLTEntities(new Uri("http://localhost:54961/AdventureWorksDataService.svc"));

    customersViewSource = this.Resources["customersViewSource"]
    as System.Windows.Data.CollectionViewSource;
    advWorksService.Customers.BeginExecute(result => customersViewSource.Source = advWorksService.Customers.EndExecute(result), null);
}

測試應用程式

建置並執行應用程式，以驗證您可以檢視客戶記錄。

若要測試應用程式

按一下 [建置] 功能表上的 [建置方案]。接著驗證方案建置無誤。
請按 F5。
確認 Customers 資料表的第一筆記錄出現。
請關閉應用程式。

注意事項

如果您在此看到錯誤，請確認程式碼包含 ASP.NET 程式開發伺服器的正確連接埠。

注意事項
如果您在此看到錯誤，請確認程式碼包含 ASP.NET 程式開發伺服器的正確連接埠。

巡覽記錄

加入可啟用透過 < 和 > 按鈕捲動記錄的程式碼。

若要讓使用者巡覽銷售記錄

在設計工具中開啟 MainPage.xaml，然後按兩下 < 按鈕。

以下列程式碼取代產生的 backButton_Click 事件處理常式：

Private Sub backButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles backButton.Click
    customersViewSource.View.MoveCurrentToPrevious()
    If customersViewSource.View.IsCurrentBeforeFirst Then
        customersViewSource.View.MoveCurrentToFirst()
    End If 
End Sub

private void backButton_Click(object sender, RoutedEventArgs e)
{
    customersViewSource.View.MoveCurrentToPrevious();
    if (customersViewSource.View.IsCurrentBeforeFirst)
        customersViewSource.View.MoveCurrentToFirst();
}

回到設計工具，然後按兩下 > 按鈕。

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

以下列程式碼取代產生的 nextButton_Click 事件處理常式：

Private Sub nextButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles nextButton.Click
    customersViewSource.View.MoveCurrentToNext()
    If customersViewSource.View.IsCurrentAfterLast Then
        customersViewSource.View.MoveCurrentToLast()
    End If 
End Sub

private void nextButton_Click(object sender, RoutedEventArgs e)
{
    customersViewSource.View.MoveCurrentToNext();
    if (customersViewSource.View.IsCurrentAfterLast)
        customersViewSource.View.MoveCurrentToLast();
}

測試應用程式

建置並執行應用程式，以驗證您可以檢視及巡覽客戶記錄。

若要測試應用程式

按一下 [建置] 功能表上的 [建置方案]。接著驗證方案建置無誤。
請按 F5。
確認 Customers 資料表的第一筆記錄出現。
按一下 < 和 > 按鈕，在客戶記錄中向後及向前巡覽。
請關閉應用程式。

注意事項

如果您在此看到錯誤，請確認程式碼包含 ASP.NET 程式開發伺服器的正確連接埠。

注意事項
如果您在此看到錯誤，請確認程式碼包含 ASP.NET 程式開發伺服器的正確連接埠。

後續步驟

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

學習如何將變更儲存回資料庫。如需詳細資訊，請參閱資料繫結。
學習如何使用 Silverlight 應用程式中的 WCF 資料服務加入更多功能。如需詳細資訊，請參閱 ADO.NET 資料服務 (Silverlight)。

請參閱

其他資源

資料存取和資料結構

共用方式為

逐步解說：將 Silverlight 控制項繫結至 WCF 資料服務

必要條件

建立服務專案

若要建立服務專案

建立服務的實體資料模型

若要建立實體資料模型

建立服務

若要建立服務

設定服務

若要設定服務

建立 Silverlight 應用程式

若要建立 Silverlight 應用程式

將資料來源加入至 Silverlight 應用程式

若要建立資料來源

定義視窗的使用者介面

若要建立視窗配置

建立資料繫結控制項

若要建立資料繫結控制項

從服務載入資料

若要從服務載入資料

測試應用程式

若要測試應用程式

巡覽記錄

若要讓使用者巡覽銷售記錄

測試應用程式

若要測試應用程式

後續步驟

請參閱

其他資源

其他資源