Exemplarische Vorgehensweise: Binden von Silverlight-Steuerelementen an einen WCF-Datendienst

In dieser exemplarischen Vorgehensweise erstellen Sie eine Silverlight-Anwendung, die datengebundene Steuerelemente enthält. Die Steuerelemente werden an Kundendatensätze gebunden, auf die über einen WCF Data Service zugegriffen wird.

In dieser exemplarischen Vorgehensweise werden die folgenden Aufgaben veranschaulicht:

• Erstellen eines Entity Data Model, das aus Daten in der Beispieldatenbank AdventureWorksLT generiert wird

• Erstellen eines WCF Data Service, der die Daten im Entity Data Model für eine Silverlight-Anwendung verfügbar macht

• Ausführen des Assistenten zum Konfigurieren von Datenquellen, um eine Verbindung mit dem Datendienst herzustellen, das das Datenquellenfenster ausfüllt

• Erstellen eines Satzes datengebundener Steuerelemente, indem Elemente aus dem Datenquellenfenster in Silverlight-Designer gezogen werden

• Erstellen von Schaltflächen für die Vorwärts- und Rückwärtsnavigation in Datensätzen

  Hinweis

  Auf Ihrem Computer werden möglicherweise andere Namen oder Speicherorte für die Benutzeroberflächenelemente von Visual Studio angezeigt als die in den folgenden Anweisungen aufgeführten. Diese Elemente sind von der jeweiligen Visual Studio-Version und den verwendeten Einstellungen abhängig. Weitere Informationen finden Sie unter Customizing Development Settings in Visual Studio.

Vorbereitungsmaßnahmen

Zum Durchführen dieser exemplarischen Vorgehensweise benötigen Sie die folgenden Komponenten:

• Visual Studio

• Zugriff auf eine gegenwärtig ausgeführte Instanz von SQL Server oder SQL Server Express, die mit der AdventureWorksLT-Beispieldatenbank verknüpft ist. Sie können die AdventureWorksLT-Datenbank von der CodePlex-Website herunterladen.

Vorkenntnisse in folgenden Konzepten sind außerdem hilfreich, wenn auch für die Durchführung der exemplarischen Vorgehensweise nicht erforderlich:

• WCF Data Services. Weitere Informationen finden Sie unter Übersicht über WCF Data Services.

• Entity Data Models und ADO.NET Entity Framework. Weitere Informationen finden Sie unter Übersicht über das Entity Framework.

• Arbeiten mit Silverlight-Designer.

• Silverlight-Datenbindung. Weitere Informationen finden Sie unter Data Binding.

Erstellen des Dienstprojekts

Starten Sie diese exemplarische Vorgehensweise, indem Sie ein leeres Webanwendungsprojekt erstellen, um einen WCF Data Service zu hosten.

So erstellen Sie das Dienstprojekt

1. Zeigen Sie im Menü Datei auf Neu, und klicken Sie dann auf Projekt.

2. Erweitern Sie Visual C# oder Visual Basic, und wählen Sie dann Web aus.

3. Wählen Sie die Projektvorlage Leere ASP.NET-Webanwendung aus.

4. Geben Sie im Feld Name die Bezeichnung AdventureWorksWebApp ein, und klicken Sie dann auf OK.

Erstellen eines Entity Data Model für den Dienst

Um Daten mit einem WCF Data Service für eine Anwendung verfügbar zu machen, muss ein Datenmodell für den Dienst definiert werden. Erstellen Sie in dieser exemplarischen Vorgehensweise ein Entity Data Model.

So erstellen Sie ein Entity Data Model

1. Klicken Sie im Menü Projekt auf Neues Element hinzufügen.

2. Wählen Sie das Projektelement ADO.NET Entity Data Model aus.

3. Ändern Sie den Namen in AdventureWorksDataModel.edmx, und klicken Sie anschließend auf Hinzufügen.

   Der Assistent für Entity Data Model wird geöffnet.

4. Klicken Sie auf der Seite Modellinhalt auswählen auf Aus Datenbank generieren und dann auf Weiter.

5. Wählen Sie auf der Seite Wählen Sie Ihre Datenverbindung aus eine der folgenden Optionen aus:

   • Wenn in der Dropdownliste eine Datenverbindung mit der AdventureWorksLT-Beispieldatenbank verfügbar ist, wählen Sie diese aus.

     oder

   • Klicken Sie auf Neue Verbindung, und erstellen Sie eine Verbindung mit der AdventureWorksLT-Datenbank.

6. Überprüfen Sie, ob die Option Speichern Sie die Entitätsverbindungseinstellungen in Web.Config als aktiviert ist, und klicken Sie dann auf Weiter.

7. Erweitern Sie auf der Seite Datenbankobjekte auswählen den Knoten Tabellen, und wählen Sie dann die Tabelle Customer aus.

8. Klicken Sie auf Fertig stellen.

Erstellen des Diensts

Erstellen Sie einen WCF Data Service, um die Daten im Entity Data Model verfügbar zu machen.

So erstellen Sie den Dienst

1. Klicken Sie im Menü Projekt auf Neues Element hinzufügen.

2. Wählen Sie das Projektelement WCF-Datendienst aus.

3. Geben Sie im Feld Name die Bezeichnung AdventureWorksDataService.svc ein, und klicken Sie anschließend auf Hinzufügen.

Konfigurieren des Diensts

Sie müssen den Dienst für das Entity Data Model konfigurieren, das Sie erstellt haben.

So konfigurieren Sie den Dienst

1. Ersetzen Sie in der Codedatei AdventureWorksDataService.svc die AdventureWorksDataService-Klassendeklaration durch folgenden Code:

   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. Erstellen Sie das Projekt, und überprüfen Sie, ob es ohne Fehler erstellt wurde.

Erstellen der Silverlight-Anwendung.

Erstellen Sie eine neue Silverlight-Anwendung, und fügen Sie dann eine Datenquelle hinzu, um auf den Dienst zuzugreifen.

So erstellen Sie die Silverlight-Anwendung

1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektmappenknoten, klicken Sie auf Hinzufügen, und wählen Sie Neues Projekt aus.

2. Erweitern Sie im Dialogfeld Neues Projekt den Eintrag Visual C# oder Visual Basic, und wählen Sie dann Silverlight aus.

3. Wählen Sie die Projektvorlage Silverlight-Anwendung aus.

4. Geben Sie im Feld Name die Bezeichnung AdventureWorksSilverlightApp ein, und klicken Sie dann auf OK.

5. Klicken Sie im Dialogfeld Neue Silverlight-Anwendung auf OK.

Hinzufügen der Datenquelle zur Silverlight-Anwendung

Erstellen Sie eine Datenquelle, die auf den vom Dienst zurückgegebenen Daten basiert.

So erstellen Sie die Datenquelle

1. Klicken Sie im Menü Daten auf Datenquellen anzeigen.

2. Klicken Sie im Datenquellenfenster auf Neue Datenquelle hinzufügen.

   Der Assistent zum Konfigurieren von Datenquellen wird geöffnet.

3. Wählen Sie auf der Seite Datenquellentyp auswählen des Assistenten Dienst aus, und klicken Sie dann auf Weiter.

4. Klicken Sie im Dialogfeld Dienstverweis hinzufügen auf Ermitteln.

   Visual Studio durchsucht die aktuelle Lösung nach verfügbaren Diensten und fügt der Liste der verfügbaren Dienste im Feld Dienste den Dienst AdventureWorksDataService.svc hinzu.

5. Geben Sie im Feld Namespace den Dienst AdventureWorksService ein.

6. Klicken Sie im Feld Dienste auf AdventureWorksDataService.svc und dann auf OK.

7. Klicken Sie auf der Seite Dienstverweis hinzufügen auf Fertig stellen.

   Visual Studio fügt Knoten hinzu, die die vom Dienst an das Datenquellenfenster zurückgegebenen Daten darstellen.

Definieren der Benutzeroberfläche des Fensters

Fügen Sie dem Fenster Schaltflächen hinzu, indem Sie im Silverlight-Designer das XAML ändern.

So erstellen Sie das Fensterlayout

1. Doppelklicken Sie im Projektmappen-Explorer auf "MainPage.xaml".

   Das Fenster wird im Silverlight-Designer geöffnet.

2. Fügen Sie in der XAML-Ansicht des Designers zwischen den <Grid>-Tags folgenden Code hinzu:

   <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. Erstellen Sie das Projekt.

Erstellen der datengebundenen Steuerelemente

Erstellen Sie Steuerelemente, die Kundendatensätze anzeigen, indem Sie den Knoten Customers aus dem Datenquellenfenster in den Designer ziehen.

So erstellen Sie die datengebundenen Steuerelemente

1. Klicken Sie im Datenquellenfenster auf das Dropdownmenü für den Knoten Customers, und wählen Sie Details aus.

2. Erweitern Sie den Knoten Customers.

3. In diesem Beispiel werden einige Felder nicht angezeigt. Klicken Sie daher auf das Dropdownmenü neben den folgenden Knoten, und wählen Sie Keine aus:

   • NameStyle

   • PasswordHash

   • PasswordSalt

   • rowguid

   Dies hindert Visual Studio am Erstellen von Steuerelementen für diese Knoten, wenn sie im Designer abgelegt werden. Bei dieser exemplarischen Vorgehensweise wird davon ausgegangen, dass der Benutzer diese Daten nicht anzeigen möchte.

4. Ziehen Sie den Knoten Customers aus dem Datenquellenfenster in den Designer unter den Schaltflächen.

   Visual Studio generiert XAML und Code, durch den Satz von Steuerelementen erstellt wird, die an die Kundendaten gebunden sind.

Laden der Daten aus dem Dienst

Laden Sie Daten mithilfe des Diensts, und weisen Sie die zurückgegebenen Daten der Datenquelle zu, die an die Steuerelemente gebunden wird.

So laden Sie die Daten aus dem Dienst

1. Klicken Sie im Designer auf einen leeren Bereich neben einer der Schaltflächen.

2. Überprüfen Sie im Eigenschaftenfenster, ob UserControl ausgewählt wurde, und klicken Sie anschließend auf die Registerkarte Ereignisse.

3. Suchen Sie das Loaded-Ereignis, und doppelklicken Sie darauf.

4. Fügen Sie in der Codedatei, die geöffnet wird (MainPage.xaml), die folgenden using-Anweisungen (C#) oder Imports-Anweisungen (Visual Basic) hinzu:

   Imports System.Windows.Data
   Imports AdventureWorksSilverlightApp.AdventureWorksService
   

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

5. Ersetzen Sie den Ereignishandler durch folgenden Code. Stellen Sie sicher, dass Sie die localhost-Adresse in diesem Code durch die localhost-Adresse auf dem Entwicklungscomputer ersetzen:

   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("https://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("https://localhost:54961/AdventureWorksDataService.svc"));
   
       customersViewSource = this.Resources["customersViewSource"]
       as System.Windows.Data.CollectionViewSource;
       advWorksService.Customers.BeginExecute(result => customersViewSource.Source = advWorksService.Customers.EndExecute(result), null);
   }
   

Testen der Anwendung

Erstellen Sie die Anwendung, und führen Sie sie aus, um zu überprüfen, ob Sie Verkaufsdatensätze anzeigen können.

So testen Sie die Anwendung

1. Klicken Sie im Menü Erstellen auf Projektmappe erstellen. Überprüfen Sie, ob sich die Projektmappe fehlerfrei erstellen lässt.

2. Drücken Sie F5.

3. Überprüfen Sie, ob der erste Datensatz in der Tabelle "Customers" angezeigt wird.

4. Schließen Sie die Anwendung.

   Hinweis

   Wenn hier ein Fehler angezeigt wird, überprüfen Sie, ob der Code den richtigen Anschluss für ASP.NET Development Server enthält.

Navigieren in Datensätzen

Fügen Sie Code hinzu, der das Navigieren in Datensätzen mit den Schaltflächen < und > ermöglicht.

So ermöglichen Sie es Benutzern, in Verkaufsdatensätzen zu navigieren

1. Öffnen Sie "MainPage.xaml" im Designer, und doppelklicken Sie auf die Schaltfläche <.

2. Ersetzen Sie den generierten backButton_Click-Ereignishandler durch den folgenden Code:

   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. Kehren Sie zum Designer zurück, und doppelklicken Sie auf die Schaltfläche >.

   Visual Studio öffnet die Code-Behind-Datei und erstellt einen neuen nextButton_Click-Ereignishandler.

4. Ersetzen Sie den generierten nextButton_Click-Ereignishandler durch den folgenden Code:

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

Testen der Anwendung

Erstellen Sie die Anwendung, und führen Sie sie aus, um zu überprüfen, ob Sie Verkaufsdatensätze anzeigen und darin navigieren können.

So testen Sie die Anwendung

1. Klicken Sie im Menü Erstellen auf Projektmappe erstellen. Überprüfen Sie, ob sich die Projektmappe fehlerfrei erstellen lässt.

2. Drücken Sie F5.

3. Überprüfen Sie, ob der erste Datensatz in der Tabelle "Customers" angezeigt wird.

4. Klicken Sie auf die Schaltflächen < und >, um durch die Kundendatensätze zu navigieren.

5. Schließen Sie die Anwendung.

   Hinweis

   Wenn hier ein Fehler angezeigt wird, überprüfen Sie, ob der Code den richtigen Anschluss für ASP.NET Development Server enthält.

Nächste Schritte

Nach Abschluss der exemplarischen Vorgehensweise sind Sie in der Lage, die folgenden zugehörigen Aufgaben auszuführen:

• Erfahren Sie, wie Änderungen in der Datenbank gespeichert werden. Weitere Informationen finden Sie unter Data Binding.

• Erfahren Sie, wie mithilfe von WCF Data Services in Silverlight-Anwendungen mehr Funktionen integriert werden. Weitere Informationen finden Sie unter ADO.NET Data Services (Silverlight).

Siehe auch

Weitere Ressourcen

Datenzugriff und Datenstrukturen