共用方式為


逐步解說:將 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)

請參閱

其他資源

資料存取和資料結構