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

  • 發行項

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

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

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

  • 建立可將實體資料模型中的資料公開至 Silverlight 應用程式的 WCF 資料服務。

  • 執行 [資料來源組態精靈] 以連接至填入 [資料來源] 視窗的資料服務。

  • 從 [資料來源] 視窗將項目拖曳至 Silverlight Designer，建立一組資料繫結控制項。

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

    注意事項注意事項

    在下列指示的某些 Visual Studio 使用者介面項目中，您的電腦可能會顯示不同的名稱或位置：您所擁有的 Visual Studio 版本以及使用的設定會決定這些項目。如需詳細資訊，請參閱 Customizing Development Settings in Visual Studio。

必要條件

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

  • Visual Studio

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

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

建立服務專案

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

若要建立服務專案

  1. 在 [檔案] 功能表上，指向 [新增]，然後按一下 [專案]。

  2. 展開 [Visual C#] 或 [Visual Basic]，然後選取 [Web]。

  3. 選取 [ASP.NET 空白 Web 應用程式] 專案範本。

  4. 在 [名稱] 方塊中輸入 AdventureWorksWebApp，然後按一下 [確定]。

建立服務的實體資料模型

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

若要建立實體資料模型

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

  2. 選取 [ADO.NET 實體資料模型] 專案項目。

  3. 將名稱改成 AdventureWorksDataModel.edmx，然後按一下 [加入]。

    [實體資料模型精靈] 隨即出現。

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

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

    • 如果下拉式清單中提供 AdventureWorksLT 範例資料庫的資料連接，請選取這個資料連接。

      或

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

  6. 確認已選取 [另存 Web.Config 中的實體連接字串為] 選項，然後按 [下一步]。

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

  8. 按一下 [完成]。

建立服務

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

若要建立服務

  1. 在 [專案] 功能表中選取 [加入新項目]。

  2. 選取 [WCF 資料服務] 專案項目。

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

設定服務

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

若要設定服務

  1. 在 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;
    }
}

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

建立 Silverlight 應用程式

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

若要建立 Silverlight 應用程式

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

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

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

  4. 在 [名稱] 方塊中輸入 AdventureWorksSilverlightApp，然後按一下 [確定]。

  5. 在 [新 Silverlight 應用程式] 對話方塊中，按一下 [確定]。

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

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

若要建立資料來源

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

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

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

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

  4. 在 [加入服務參考] 對話方塊中，按一下 [探索]。

    Visual Studio 會搜尋目前方案中的可用服務，並且將 AdventureWorksDataService.svc 加入至 [服務] 方塊中的可用服務清單。

  5. 在 [命名空間] 方塊中，輸入 AdventureWorksService。

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

  7. 在 [加入服務參考] 頁面中，按一下 [完成]。

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

定義視窗的使用者介面

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

若要建立視窗配置

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

    視窗隨即在 Silverlight Designer 中開啟。

  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" Content="&lt;"></Button>
<Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75" Content="&gt;"></Button>

  3. 建置專案。

建立資料繫結控制項

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

若要建立資料繫結控制項

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

  2. 展開 [Customers] 節點。

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

    • NameStyle

    • PasswordHash

    • PasswordSalt

    • rowguid

    這個動作可防止 Visual Studio 在節點置放於設計工具時為這些節點建立控制項。 在此逐步解說中，假設使用者不要看到此資料。

  4. 從 [資料來源] 視窗，將 [Customers] 節點拖曳至設計工具的按鈕底下。

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

從服務載入資料

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

若要從服務載入資料

  1. 在設計工具中，按一下其中一個按鈕旁邊的空白區域。

  2. 在 [屬性] 視窗中，確認 [UserControl] 已選取，然後按一下 [事件] 索引標籤。

  3. 尋找並按兩下 [Loaded] 事件。

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

    Imports System.Windows.Data
Imports AdventureWorksSilverlightApp.AdventureWorksService

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

  5. 以下列程式碼取代事件處理常式。 務必以開發電腦的本機主機位址取代此程式碼中的 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);
}

測試應用程式

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

若要測試應用程式

  1. 按一下 [建置] 功能表上的 [建置方案]。 接著驗證方案建置無誤。

  2. 請按 F5。

  3. 確認 Customers 資料表的第一筆記錄出現。

  4. 請關閉應用程式。

    注意事項注意事項

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

巡覽記錄

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

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

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

  2. 以下列程式碼取代產生的 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();
}

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

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

  4. 以下列程式碼取代產生的 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();
}

測試應用程式

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

若要測試應用程式

  1. 按一下 [建置] 功能表上的 [建置方案]。 接著驗證方案建置無誤。

  2. 請按 F5。

  3. 確認 Customers 資料表的第一筆記錄出現。

  4. 按一下 < 和 > 按鈕，在客戶記錄中向後及向前巡覽。

  5. 請關閉應用程式。

    注意事項注意事項

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

後續步驟

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

  • 學習如何將變更儲存回資料庫。 如需詳細資訊，請參閱資料繫結。

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

請參閱

其他資源

資料存取和資料結構