Exemplarische Vorgehensweise: Anzeigen von Daten in einer Silverlight-Geschäftsanwendung

Artikel
03/11/2011

In dieser exemplarischen Vorgehensweise erstellen Sie eine Silverlight-Geschäftsanwendung, in der Daten aus der AdventureWorks-Beispieldatenbank auf zwei unterschiedlichen Silverlight-Seiten angezeigt werden. Auf der ersten Seite werden Daten aus der Tabelle "SalesOrderHeader" angezeigt, und die Datenbankdatensätze können durchgeblättert werden. Auf der zweiten Seite kann der Benutzer auf Grundlage eines Datums eine Abfrage ausführen.

In dieser exemplarischen Vorgehensweise werden die folgenden Aufgaben veranschaulicht:

Erstellen einer Silverlight-Geschäftsanwendung, die aus zwei Projekten besteht: einem Silverlight-Client und einer ASP.NET-Webanwendung
Ändern des Anwendungsnamens durch Ändern einer Ressourcenzeichenfolge
Erstellen eines Entity Data Models anhand einer Datenbankdatei
Erstellen eines Domänendiensts, der die Daten im Entity Data Model für den Silverlight-Client verfügbar macht (Weitere Informationen finden Sie unter Domänendienste.)
Ändern von benutzerdefinierten Abfragen und Hinzufügen von benutzerdefinierten Abfragen zum Domänendienst
Erstellen zusätzlicher Silverlight-Seiten, um Daten für Benutzer anzuzeigen
Hinzufügen von Schaltflächen zur Standardnavigationsleiste, um auf die Silverlight-Seiten zuzugreifen
Konfigurieren der Silverlight-Seiten zum Anzeigen von Daten, indem Elemente vom Fenster Datenquellen in den Silverlight-Designer gezogen werden
Sortieren und Paging von Daten
Konfigurieren einer Benutzeroberfläche für Abfrageparameter

Erforderliche Komponenten

Für diese und die anderen exemplarischen Vorgehensweisen in der WCF RIA Services-Dokumentation müssen zusätzlich zu WCF RIA Services und dem WCF RIA Services-Toolkit mehrere erforderliche Programme installiert und korrekt konfiguriert werden, z. B. Visual Studio 2010, die Silverlight Developer-Laufzeit und das Silverlight-SDK. Zudem müssen Sie SQL Server 2008 R2 Express with Advanced Services installieren und konfigurieren und die AdventureWorks OLTP- und LT-Datenbanken installieren.

Ausführliche Anweisungen für jede dieser erforderlichen Komponenten finden Sie in den Themen unter Erforderliche Komponenten für WCF RIA Services. Folgen Sie den Anweisungen in diesen Themen, bevor Sie mit dieser exemplarischen Vorgehensweise fortfahren, um sicherzustellen, dass beim Ausführen der exemplarischen Vorgehensweisen für RIA Services so wenig Probleme wie möglich auftreten.

Diese exemplarische Vorgehensweise setzt voraus, dass Sie eine Silverlight-Geschäftsanwendung erstellen können. Das Verfahren zum Ausführen dieser Aufgabe wird unter Exemplarische Vorgehensweise: Verwenden der Silverlight-Geschäftsanwendungsvorlage beschrieben.

Erstellen der Silverlight-Geschäftsanwendung

Bei einer Silverlight-Geschäftsanwendung handelt es sich um eine Projektmappe mit zwei Projekten: eine Silverlight-Anwendung und eine ASP.NET-Webanwendung, die die Silverlight-Anwendung hostet. Silverlight-Geschäftsanwendungen verfügen über integrierte Funktionen. Standardmäßig enthalten sie eine Startseite, eine Infoseite, eine Navigationsleiste und eine Websiteregistrierungsfunktion. Zudem ist ein Standardanwendungsname in Form einer Ressourcenzeichenfolge vorhanden, den Sie in den gewünschten Anwendungsnamen ändern können.

So erstellen Sie die Anwendung

Erstellen Sie in Visual Studio 2010 ein neues Silverlight-Geschäftsanwendungsprojekt in Visual Basic oder C# mit dem Namen AdventureWorksApp. Das Verfahren zum Ausführen dieser Aufgabe wird unter Exemplarische Vorgehensweise: Verwenden der Silverlight-Geschäftsanwendungsvorlage beschrieben.

Die Projektmappe "AdventureWorksApp" wird mit zwei Projekten erstellt: einem Silverlight-Projekt "AdventureWorksApp" und einem Webanwendungsprojekt "AdventureWorksApp.Web".
Erweitern Sie im Projektmappen-Explorer das Projekt "AdventureWorksApp".
Erweitern Sie den Ordner "Assets" und dann den Ordner "Resources".
Doppelklicken Sie auf "ApplicationStrings.resx", um den Ressourcen-Designer zu öffnen.
Ändern Sie den Wert der ApplicationName-Ressourcenzeichenfolge in Adventure Works-Anwendung.
Speichern Sie die Änderungen, und schließen Sie die Datei "ApplicationStrings.resx".
Führen Sie die Anwendung aus.

Die Startseite wird geöffnet, und der Standardentwurf mit dem aktualisierten Anwendungsnamen wird angezeigt.

Erstellen eines Datenmodells für die Anwendung

Die Daten in der Anwendung werden mithilfe eines Entity Data Models verwaltet.

So erstellen Sie ein Entity Data Model

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf "AdventureWorksApp.Web", klicken Sie auf Hinzufügen und anschließend auf Neues Element.

Das Dialogfeld Neues Element hinzufügen wird angezeigt.
Klicken Sie in der Kategorie Daten auf die Vorlage ADO.NET Entity Data Model.
Ändern Sie den Namen in AdventureWorksEDM.edmx, und klicken Sie dann auf Hinzufügen.

Der Assistent für Entity Data Model wird geöffnet.
Klicken Sie auf der Seite Modellinhalte auswählen auf Aus Datenbank generieren und dann auf Weiter.
Klicken Sie auf der Seite Wählen Sie Ihre Datenverbindung aus auf Neue Verbindung.

Das Dialogfeld Verbindungseigenschaften wird angezeigt.
Wählen Sie für die Datenquelle "Microsoft SQL Server-Datenbankdatei" aus, und geben Sie den Speicherort der AdventureWorksLT-Datenbankdatei an.
Klicken Sie auf OK.
Klicken Sie auf der Seite Wählen Sie Ihre Datenverbindung aus auf Weiter.
Klicken Sie auf Ja, wenn Sie gefragt werden, ob Sie die Datenbankdatei in Ihr Projekt kopieren und die Verbindung ändern möchten.
Erweitern Sie auf der Seite Wählen Sie Ihre Datenbankobjekte aus den Knoten Tabellen.
Fügen Sie neben der Tabelle SalesOrderHeader (Sales LT) ein Häkchen hinzu.
Klicken Sie auf Fertig stellen.

Die Tabelle "SalesOrderHeader" wird im Entity Designer angezeigt.
Erstellen Sie die Projektmappe.

Die Projektmappe muss vor dem Hinzufügen eines Domänendiensts erstellt werden.

Erstellen eines Domänendiensts

Ein Domänendienst macht die Datenentitäten und -vorgänge im Datenmodell für den Client verfügbar. In diesem Verfahren fügen Sie dem Serverprojekt einen Domänendienst hinzu.

So erstellen Sie einen Domänendienst

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf "AdventureWorksApp.Web", klicken Sie auf Hinzufügen und anschließend auf Neues Element.

Das Dialogfeld Neues Element hinzufügen wird angezeigt.
Klicken Sie in der Kategorie Web auf die Vorlage Domänendienstklasse.
Geben Sie für die Domänendienstklasse den Namen AdventureWorksService ein, und klicken Sie dann auf Hinzufügen.

Das Dialogfeld Neue Domänendienstklasse hinzufügen wird geöffnet.
Aktivieren Sie die Kontrollkästchen SalesOrderHeader und Bearbeitung aktivieren, und klicken Sie dann auf OK.
Erstellen Sie die Projektmappe.

Ändern einer Domänendienstabfrage

Wenn Sie eine Domänendienstklasse hinzufügen, ist diese mit Abfragemethoden aufgefüllt. Sie können diese Abfragemethoden ohne weitere Änderung verwenden. In vielen Fällen sind jedoch einige Änderungen notwendig. In diesem Verfahren bearbeiten Sie die GetSalesOrderHeaders-Abfragemethode.

So ändern Sie eine Domänendienstabfrage

Doppelklicken Sie im Projektmappen-Explorer auf "AdventureWorksService.vb" bzw. "AdventureWorksService.cs", um diese Datei zu öffnen.

Aktualisieren Sie die GetSalesOrderHeaders-Methode wie im folgenden Code dargestellt.

Public Function GetSalesOrderHeaders() As IQueryable(Of SalesOrderHeader)
    Return Me.ObjectContext.SalesOrderHeaders.OrderBy(Function(e) e.SalesOrderID)
End Function

public IQueryable<SalesOrderHeader> GetSalesOrderHeaders()
{
    return this.ObjectContext.SalesOrderHeaders.OrderBy(e=>e.SalesOrderID);
}

Erstellen Sie die Projektmappe.

Erstellen einer Silverlight-Seite zum Anzeigen von Daten

In diesem Verfahren fügen Sie eine OrderList-Seite hinzu, um die Daten aus der Tabelle "SalesOrderHeader" anzuzeigen.

So erstellen Sie eine Silverlight-Seite

Klicken Sie im Projektmappen-Explorer im Projekt "AdventureWorksApp" mit der rechten Maustaste auf den Ordner Views, und fügen Sie ein neues Element hinzu.
Wählen Sie im Dialogfeld Neues Element hinzufügen die Kategorie Silverlight aus, und klicken Sie dann auf die Vorlage Silverlight-Seite.
Ändern Sie den Namen in OrderList.xaml, und klicken Sie anschließend auf Hinzufügen.

"OrderList.xaml" wird im Designer geöffnet.
Ziehen Sie aus der Toolbox einen TextBlock in den oberen Bereich des Designers.
Ändern Sie im Eigenschaftenfenster die Text-Eigenschaft in Order List.
Speichern Sie die Seite "OrderList.xaml".

Hinzufügen einer Navigationsschaltfläche zur Startseite

In diesem Verfahren fügen Sie der Startseite der Anwendung eine Schaltfläche hinzu, die zur OrderList-Seite navigiert.

So erstellen Sie eine Navigationsschaltfläche

Doppelklicken Sie im Projektmappen-Explorer auf die Datei "MainPage.xaml", um sie im Designer zu öffnen.

Fügen Sie in der XAML-Ansicht nach der Zeile <HyperlinkButton x:Name="Link2" ... /> das folgende Markup hinzu.

<Rectangle x:Name="Divider3" Style="{StaticResource DividerStyle}"/>
<HyperlinkButton x:Name="Link3" Content="Order List" Style="{StaticResource LinkStyle}" NavigateUri="/OrderList" TargetName="ContentFrame"/>

Führen Sie die Anwendung aus.

Die Schaltfläche Order List sollte auf der Navigationsleiste angezeigt werden.
Klicken Sie auf die Schaltfläche Order List.

Die OrderList-Seite wird angezeigt.

Anzeigen von Auftragsdaten auf der OrderList-Seite

In diesem Verfahren erstellen und konfigurieren Sie ein DataGrid zum Anzeigen von Auftragsdaten, indem Sie eine Order-Entität aus dem Fenster Datenquellen in den Designer ziehen.

So erstellen Sie ein datengebundenes Datenraster

Doppelklicken Sie im Projektmappen-Explorer auf "OrderList.xaml".
Klicken Sie auf das Menü Daten und dann auf Datenquellen anzeigen.

Das Fenster Datenquellen wird geöffnet. Das Fenster Datenquellen enthält bereits die für die Anwendung verfügbaren Entitäten.
Ziehen Sie den Knoten SalesOrderHeader aus dem Fenster Datenquellen in den Designer (unter den Textblock "Order List").

Ein mit Spaltenüberschriften aus der Tabelle "SalesOrderHeader" aufgefülltes Datenraster wird auf der Entwurfsoberfläche angezeigt.
Führen Sie die Anwendung aus.
Klicken Sie auf der Navigationsleiste auf die Schaltfläche Order List.

Auf der Seite "Order List" werden Auftragsdaten angezeigt.

Hinzufügen von benutzerdefinierten Abfragen zum Domänendienst

Sie können zusätzliche Abfragen im Domänendienst erstellen. In diesem Verfahren werden zwei benutzerdefinierte Abfragen hinzugefügt.

So fügen Sie dem Domänendienst benutzerdefinierte Abfragen hinzu

Doppelklicken Sie im Projektmappen-Explorer auf "AdventureWorksService.vb" bzw. "AdventureWorksService.cs".

Fügen Sie der AdventureWorksService-Klasse die folgenden Methoden hinzu:

Public Function GetOrdersWithSmallSubtotals() As IQueryable(Of SalesOrderHeader)
    Return Me.ObjectContext.SalesOrderHeaders.Where(Function(p) p.SubTotal <= 2000).OrderBy(Function(p) p.SubTotal)
End Function

Public Function GetShipDateBefore(ByVal shipDate As DateTime) As IQueryable(Of SalesOrderHeader)
    Return Me.ObjectContext.SalesOrderHeaders.Where(Function(p) p.ShipDate < shipDate).OrderBy(Function(p) p.SalesOrderID)
End Function

public IQueryable<SalesOrderHeader> GetOrdersWithSmallSubtotals()
{
    return this.ObjectContext.SalesOrderHeaders.Where(e => e.SubTotal <= 2000).OrderBy(e => e.SubTotal);
}

public IQueryable<SalesOrderHeader> GetShipDateBefore(DateTime shipDate)
{
    return this.ObjectContext.SalesOrderHeaders.Where(e => e.ShipDate < shipDate).OrderBy(e => e.SalesOrderID);
}

Legen Sie bei Verwendung von Visual Basic die Option Strict-Anweisung am Anfang der Datei "AdventureWorksService.vb" auf Off fest.
Erstellen Sie die Projektmappe.

Anzeigen von Daten aus der benutzerdefinierten Abfrage

In diesem Verfahren zeigen Sie die Daten aus der neuen Abfrage an, indem Sie die Abfrage im Fenster Datenquellen auswählen und in das bereits im Designer vorhandene Datenraster ziehen. Dadurch wird die Bindung des Datenrasters neu konfiguriert, sodass Daten aus der ausgewählten Abfrage angezeigt werden.

So zeigen Sie Daten aus der benutzerdefinierten Abfrage im vorhandenen Datenraster an

Doppelklicken Sie im Projektmappen-Explorer auf "OrderList.xaml".
Klicken Sie im Fenster Datenquellen auf SalesOrderHeader und anschließend auf das Dropdownmenü.

Beachten Sie die drei Abfragen, die im unteren Teil des Menüs aufgelistet sind. Die aktivierte Abfrage ist die Abfrage, die im Abfragenamen (QueryName) der generierten Datenquelle festgelegt wird, nachdem diese Entität in den Designer gezogen wurde.
Wählen Sie in der Liste der Abfragen die Abfrage GetOrdersWithSmallSubtotalsQuery aus, um sie als Abfrage dieser Entität festzulegen.
Ziehen Sie den Knoten SalesOrderHeader in das vorhandene Datenraster im Designer.
Führen Sie die Anwendung aus.
Klicken Sie auf die Schaltfläche Order List.

Beachten Sie, dass keines der im Datenraster aufgeführten Auftragsteilergebnisse 2000 überschreitet.

Hinzufügen einer Sortierung

Zusätzlich zum Sortieren von Daten mithilfe der OrderBy-Klausel in den zugrunde liegenden Abfragen können Sie auch eine Sortierung im XAML-Code der Seite konfigurieren. Zum Konfigurieren der Sortierung fügen Sie SortDescriptors zur DomainDataSource hinzu. Sie können SortDescriptors direkt im XAML-Code hinzufügen oder wie im folgenden Verfahren beschrieben das Eigenschaftenfenster verwenden.

So fügen Sie SortDescriptors mithilfe des Eigenschaftenfensters hinzu

Doppelklicken Sie im Projektmappen-Explorer auf "OrderList.xaml".

Positionieren Sie den Cursor in der XAML-Ansicht in dem riaControls:DomainDataSource-Element, dessen Name-Attribut auf salesOrderHeaderDomainDataSource1 festgelegt ist.

Vorsicht:
Die Datei enthält zwei `riaControls:DomainDataSource`-Elemente. Der Cursor muss in dem Element platziert werden, dessen `Name`-Attribut auf `salesOrderHeaderDomainDataSource1` festgelegt ist.

Klicken Sie im Eigenschaftenfenster auf die SortDescriptors-Eigenschaft und dann auf die Schaltfläche mit den Auslassungspunkten (...).

Der SortDescriptors-Auflistungs-Editor wird angezeigt.
Klicken Sie auf Hinzufügen.

Ein SortDescriptors-Element wird hinzugefügt.
Erweitern Sie unter Eigenschaften die Kategorie Sonstige.
Geben Sie in der Wertspalte PropertyPath den Wert CustomerID ein.

Klicken Sie auf OK.

Dem riaControls:DomainDataSource-Element wurde der folgende XAML-Code hinzugefügt:

<riaControls:DomainDataSource.SortDescriptors>
    <riaControls:SortDescriptor PropertyPath="CustomerID" />
</riaControls:DomainDataSource.SortDescriptors>

Führen Sie die Anwendung aus.

Klicken Sie auf die Schaltfläche Order List.

Die Daten werden nach der Kunden-ID sortiert.

RIADisplayingData09SortedByCustomerID

Vorsicht:
Schließen Sie mindestens einen SortDescriptor ein, dessen PropertyPath-Attribut einer Eigenschaft zugewiesen ist, die eindeutige Werte enthält (z. B. ein Primärschlüssel), wenn Sie Paging und Sortierung zusammen implementieren. Sie können der Abfrage in der DomainDataSource auch eine OrderBy-Klausel hinzufügen, die auf einer Eigenschaft mit eindeutigen Werten basiert. Wenn Sie die Daten nur mit einer Eigenschaft ohne eindeutige Werte sortieren, können die Rückgabewerte über mehrere Seiten hinweg inkonsistente und lückenhafte Daten enthalten.

Schließen Sie mindestens einen SortDescriptor ein, dessen PropertyPath-Attribut einer Eigenschaft zugewiesen ist, die eindeutige Werte enthält (z. B. ein Primärschlüssel), wenn Sie Paging und Sortierung zusammen implementieren. Sie können der Abfrage in der DomainDataSource auch eine OrderBy-Klausel hinzufügen, die auf einer Eigenschaft mit eindeutigen Werten basiert. Wenn Sie die Daten nur mit einer Eigenschaft ohne eindeutige Werte sortieren, können die Rückgabewerte über mehrere Seiten hinweg inkonsistente und lückenhafte Daten enthalten.

Hinzufügen von Paging

In diesem Verfahren fügen Sie Paging hinzu, indem Sie der Datenquelle einen DataPager hinzufügen. Sie legen DataPager.Source auf die DomainDataSource fest, von der vom Pager zu steuernde Daten verwaltet werden.

So konfigurieren Sie das Paging der Daten

Doppelklicken Sie im Projektmappen-Explorer auf "OrderList.xaml".
Suchen Sie in der Toolbox nach dem DataPager-Steuerelement.
Ziehen Sie den DataPager im Designer in einen Bereich unter dem DataGrid.
Klicken Sie im Fenster Datenquellen auf den Knoten SalesOrderHeader, klicken Sie auf das Dropdownmenü, und vergewissern Sie sich, dass GetOrdersWithSmallSubtotalsQuery ausgewählt ist.
Ziehen Sie den Knoten SalesOrderHeader auf den DataPager.

Dadurch wird die Source-Eigenschaft des DataPagers auf die richtige Datenquelle festgelegt.
Wählen Sie den DataPager im Designer aus.
Legen Sie im Eigenschaftenfenster die PageSize-Eigenschaft auf 5 fest.
Führen Sie die Anwendung aus.
Klicken Sie auf die Schaltfläche Order List.
Klicken Sie auf die Navigationsschaltflächen auf dem DataPager, um im DataGrid jeweils durch 5 Datensätze zu navigieren.

Erstellen einer Seite zur datumsbasierten Suche nach Aufträgen

An früherer Stelle dieser exemplarischen Vorgehensweise haben Sie dem Domänendienst eine benutzerdefinierte Abfrage hinzugefügt, die Aufträge zurückgibt, deren Lieferdatum vor einem vom Benutzer angegebenen Datum liegt. In diesem Verfahren wird gezeigt, wie Sie mithilfe des Fensters Datenquellen eine Benutzeroberfläche zur Eingabe von Parametern erstellen können, die anschließend an eine Domänendienstabfrage übergeben werden.

So erstellen Sie die Benutzeroberfläche

Fügen Sie im Projekt "AdventureWorksApp" im Ordner Views eine neue Silverlight-Seite mit dem Namen OrderSearchByShipDateBefore.xaml hinzu.
Doppelklicken Sie im Projektmappen-Explorer auf MainPage.xaml.

Fügen Sie in der XAML-Ansicht nach der Zeile <HyperlinkButton x:Name="Link3" ... /> den folgenden Code hinzu.

<Rectangle x:Name="Divider4" Style="{StaticResource DividerStyle}"/>
<HyperlinkButton x:Name="Link4" Content="Ship Date" Style="{StaticResource LinkStyle}" NavigateUri="/OrderSearchByShipDateBefore" TargetName="ContentFrame"/>

Doppelklicken Sie im Projektmappen-Explorer auf "OrderSearchByShipDateBefore.xaml".
Klicken Sie im Fenster Datenquellen auf den Knoten SalesOrderHeader und anschließend auf das Dropdownmenü.
Wählen Sie die Abfrage GetShipDateBeforeQuery aus, um sie als Abfrage dieser Entität festzulegen.
Ziehen Sie den Knoten SalesOrderHeader in den Designer.

Zusätzlich zum DataGrid wird ein Textfeld zum Eingeben des Parameters in der Abfrage erstellt, und es wird eine Schaltfläche zum Ausführen der Abfrage und Laden der Daten hinzugefügt.

Testen der Anwendung

In diesem Verfahren überprüfen Sie, ob sich die Anwendung wie erwartet verhält, indem Sie sie erstellen und ausführen.

So testen Sie die Anwendung

Klicken Sie im Menü Erstellen auf Projektmappe erstellen.

Überprüfen Sie, ob sich die Projektmappe fehlerfrei erstellen lässt.
Führen Sie die Anwendung aus.
Klicken Sie auf die Schaltfläche Versanddatum, um die Seite mit der Lieferdatumsabfrage zu öffnen.
Geben Sie im Feld Versanddatum ein Datum ein, z. B. 1/1/2006.
Klicken Sie auf Laden.

Beachten Sie, dass nur Lieferdaten vor dem angegebenen Datum zurückgegeben werden.
Probieren Sie andere Lieferdaten aus.

Nächste Schritte

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

Erfahren Sie, wie Datensätze geändert und Änderungen in der Datenbank gespeichert werden. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Bearbeiten von Daten von einem Domänendienst.

Siehe auch

Konzepte

Silverlight-Clients