Exemplarische Vorgehensweise: Datenbindung in Webseiten mit einer Visual Studio-Datenkomponente

Aktualisiert: November 2007

Viele Webanwendungen werden mithilfe mehrerer Ebenen erstellt. Dabei befinden sich eine oder mehrere Komponenten in der mittleren Ebene und kombinieren den Datenzugriff mit Geschäftslogik. In dieser exemplarischen Vorgehensweise wird gezeigt, wie Sie eine Datenzugriffskomponente in einer Website erstellen und ein Webserver-Steuerelement (ein GridView-Steuerelement) an die von der Komponente verwalteten Daten binden können. Die Datenkomponente interagiert mit einer Microsoft SQL Server-Datenbank und kann Daten lesen und schreiben.

In dieser exemplarischen Vorgehensweise werden u. a. die folgenden Aufgaben veranschaulicht:

• Das Erstellen einer Komponente, die Daten lesen und schreiben kann.

• Das Verweisen auf die Datenkomponente als Datenquelle auf einer Webseite.

• Das Binden eines Steuerelements an die Daten, die von der Datenkomponente zurückgegeben werden.

• Das Lesen und das Schreiben von Daten mithilfe der Datenkomponente.

Vorbereitungsmaßnahmen

Für die Durchführung dieser exemplarischen Vorgehensweise benötigen Sie Folgendes:

• Zugriff auf die Northwind-Datenbank in SQL Server. Informationen über das Downloaden und Installieren der SQL Server-Beispieldatenbank Northwind finden Sie auf der Microsoft SQL Server-Website unter Installing Sample Databases.

  Hinweis:
  Wenden Sie sich an den Serveradministrator, wenn Sie Informationen zur Anmeldung an dem Computer benötigen, auf dem SQL Server ausgeführt wird.

• Microsoft Data Access Components (MDAC), Version 2.7 oder höher.

  Wenn Sie Microsoft Windows XP oder Windows Server 2003 verwenden, verfügen Sie bereits über MDAC 2.7. Wenn Sie jedoch Microsoft Windows 2000 verwenden, müssen Sie möglicherweise die bereits auf dem Computer installierte Version von MDAC aktualisieren. Die aktuelle MDAC-Version können Sie vom Data Access and Storage Developer Center downloaden.

Erstellen der Website

Wenn Sie bereits eine Website in Visual Web Developer erstellt haben (z. B. in Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer), können Sie diese Website verwenden und zum nächsten Abschnitt übergehen. Erstellen Sie andernfalls eine neue Website und eine neue Webseite, indem Sie folgende Schritte ausführen.

So erstellen Sie eine Dateisystem-Website

1. Öffnen Sie Visual Web Developer.

2. Klicken Sie im Menü Datei auf Neue Website.

   Das Dialogfeld Neue Website wird angezeigt.

3. Klicken Sie unter Von Visual Studio installierte Vorlagen auf ASP.NET-Website.

4. Klicken Sie in der am weitesten links befindlichen Liste Speicherort auf Dateisystem, und geben Sie dann im am weitesten rechts befindlichen Textfeld Speicherort den Namen des Ordners ein, in dem Sie die Seiten der Website speichern möchten.

   Geben Sie z. B. den Ordnernamen C:\WebSites\ComponentSample ein.

5. Klicken Sie in der Liste Sprache auf die Programmiersprache, in der Sie arbeiten möchten.

6. Klicken Sie auf OK.

   Visual Web Developer erstellt den Ordner und die neue Seite Default.aspx.

Erstellen einer Datenzugriffskomponente

In dieser exemplarischen Vorgehensweise generieren Sie mithilfe eines Assistenten eine Komponente, die Daten aus der Datenbank Northwind liest und Daten in diese schreibt. Die Komponente beinhaltet eine Schemadatei (XSD-Datei), in der die gewünschten Daten und die zum Lesen und Schreiben von Daten verwendeten Methoden beschrieben werden. Sie müssen keinen Code schreiben. Zur Laufzeit wird die XSD-Datei in eine Assembly kompiliert, die die Aufgaben ausführt, die Sie im Assistenten angeben.

So erstellen Sie eine Datenzugriffskomponente

1. Wenn die Website noch keinen Ordner App_Code aufweist, gehen Sie wie folgt vor:

   1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Namen der Website.

   2. Zeigen Sie auf Ordner hinzufügen, und klicken Sie dann auf den Ordner App_Code.

2. Klicken Sie mit der rechten Maustaste auf den Ordner App_Code, und klicken Sie dann auf Neues Element hinzufügen.

   Das Dialogfeld Neues Element hinzufügen wird angezeigt.

3. Klicken Sie unter Von Visual Studio installierte Vorlagen auf DataSet.

4. Geben Sie im Feld NameEmployeesObject ein, und klicken Sie dann auf Hinzufügen.

   Der TableAdapter-Konfigurations-Assistent wird angezeigt.

5. Klicken Sie auf Neue Verbindung.

6. Wenn das Dialogfeld Datenquelle auswählen angezeigt wird, klicken Sie auf Microsoft SQL Server, und klicken Sie dann auf Weiter.

7. Geben Sie im Feld Servername den Namen des Computers ein, auf dem SQL Server ausgeführt wird.

8. Wählen Sie als Anmeldeinformationen die passende Option für die SQL Server-Datenbank aus (integrierte Sicherheit oder bestimmte ID und Kennwort), und geben Sie, wenn erforderlich, einen Benutzernamen und ein Kennwort ein.

   • Wenn Sie explizite Anmeldeinformationen angeben möchten, aktivieren Sie das Kontrollkästchen Kennwort speichern.

9. Klicken Sie auf Datenbanknamen auswählen oder eingeben, und geben Sie dann Northwind ein.

10. Klicken Sie auf Testverbindung, und wenn Sie sicher sind, dass die Verbindung funktioniert, klicken Sie auf OK.

    Der TableAdapter-Konfigurations-Assistent wird mit den eingetragenen Verbindungsinformationen angezeigt.

11. Klicken Sie auf Weiter.

    Es wird eine Seite angezeigt, auf der Sie die Möglichkeit haben, die Verbindungszeichenfolge in der Konfigurationsdatei zu speichern.

12. Aktivieren Sie das Kontrollkästchen Ja, Verbindung speichern unter, und klicken Sie dann auf Weiter.

    Sie können den Namen der Standardverbindungszeichenfolge beibehalten.

    Eine Seite wird angezeigt, in der Sie wählen können, ob Sie SQL-Anweisungen oder gespeicherte Prozeduren verwenden möchten.

13. Klicken Sie auf SQL-Anweisungen verwenden, und klicken Sie dann auf Weiter.

    Die Verwendung gespeicherter Prozeduren bietet einige Vorteile, z. B. in Bezug auf Leistung und Sicherheit. Der Einfachheit halber verwenden Sie in dieser exemplarischen Vorgehensweise jedoch eine SQL-Anweisung.

    Eine Seite zum Definieren der SQL-Anweisung wird angezeigt.

14. Geben Sie unter Welche Daten sollen in die Tabelle geladen werden? die folgende SQL-Anweisung ein:

    SELECT EmployeeID, LastName, FirstName, HireDate FROM Employees
    

    Hinweis:
    Wenn Sie es vorziehen, ein Abfragetool zu verwenden, können Sie auf Abfrage-Generator klicken.

15. Klicken Sie auf Weiter.

    Es wird eine Seite angezeigt, auf der Sie die Methoden definieren können, die die Komponente verfügbar macht.

16. Deaktivieren Sie das Kontrollkästchen DataTable füllen, und aktivieren Sie die Kontrollkästchen DataTable zurückgeben und Methoden erstellen, um Updates direkt an die Datenbank zu senden.

    In dieser exemplarischen Vorgehensweise benötigen Sie zum Auffüllen einer Datentabelle keine Methode. Sie benötigen allerdings eine Methode, die die Daten zurückgibt. Die Komponente sollte auch Methoden zum Aktualisieren der Datenbank enthalten.

17. Geben Sie im Feld Methodenname die Zeichenfolge GetEmployees ein.

    Damit benennen Sie die Methode, die später zum Abrufen von Daten verwendet wird.

18. Klicken Sie auf Fertig stellen.

    Der Assistent konfiguriert die Komponente und zeigt sie im Komponenten-Designer an, wobei die Daten angezeigt werden, die die Komponente verwaltet, und die Methoden, die die Komponente verfügbar macht.

19. Speichern Sie die Datenkomponente, und schließen Sie dann den Komponenten-Designer.

20. Klicken Sie im Menü Erstellen auf Website erstellen, um ein ordnungsgemäßes Kompilieren der Komponente sicherzustellen.

Verwenden der Datenkomponente auf einer Seite

Sie können jetzt die Datenkomponente als Datenquelle in einer ASP.NET-Webseite verwenden. Zum Zugreifen auf eine Datenkomponente verwenden Sie ein ObjectDataSource-Steuerelement. Dieses wird zum Aufrufen der Datenzugriffsmethoden konfiguriert, die von der Datenkomponente verfügbar gemacht werden. Anschließend können Sie Steuerelemente zur Seite hinzufügen und sie an das Datenquellen-Steuerelement binden.

So fügen Sie der Seite ein Datenquellen-Steuerelement hinzu

1. Öffnen Sie die Seite Default.aspx, und wechseln Sie in die Entwurfsansicht.

2. Ziehen Sie aus der Gruppe Daten der Toolbox ein ObjectDataSource-Steuerelement auf die Seite.

   • Wenn das Kontextmenü ObjectDataSource-Aufgaben nicht angezeigt wird, klicken Sie mit der rechten Maustaste auf das ObjectDataSource-Steuerelement, und klicken Sie dann auf Smarttag anzeigen.

3. Klicken Sie im Kontextmenü ObjectDataSource-Aufgaben auf Datenquelle konfigurieren.

   Der Assistent zum Konfigurieren von Datenquellen wird angezeigt.

4. Klicken Sie in der Liste Geschäftsobjekt auswählen auf EmployeesObjectTableAdapters.EmployeesTableAdapter.

   Dies ist der Typname (Namespace und Klassenname) der im vorherigen Abschnitt erstellten Komponente.

5. Klicken Sie auf Weiter.

6. Klicken Sie auf der Registerkarte Auswählen in der Liste Methode auswählen auf GetEmployees(), returns EmployeesDataTable.

   Die GetEmployees-Methode wurde in der Komponente definiert, die Sie im vorherigen Abschnitt erstellt haben. Sie gibt die Ergebnisse der SQL-Anweisung zurück, die in einem DataTable-Objekt verfügbar ist, an das Datensteuerelemente gebunden werden können.

7. Klicken Sie auf Fertig stellen.

Sie können nun Datensteuerelemente zur Seite hinzufügen und sie an das ObjectDataSource-Steuerelement binden. In dieser exemplarischen Vorgehensweise verwenden Sie das GridView-Steuerelement.

So fügen Sie der Seite ein GridView-Steuerelement hinzu und binden es an die Daten

1. Ziehen Sie aus der Gruppe Daten der Toolbox ein GridView-Steuerelement auf die Seite.

   • Wenn das Kontextmenü GridView-Aufgaben nicht angezeigt wird, klicken Sie mit der rechten Maustaste auf das GridView-Steuerelement, und klicken Sie dann auf Smarttag anzeigen.

2. Klicken Sie im Kontextmenü GridView-Aufgaben in der Liste Datenquelle auswählen auf ObjectDataSource1. Dies ist die ID des im vorherigen Abschnitt konfigurierten Steuerelements.

   Das GridView-Steuerelement wird erneut angezeigt und verfügt über eine Spalte für jede Datenspalte, die von der SQL-Anweisung zurückgegeben wird.

3. Vergewissern Sie sich in den Eigenschaften, dass DataKeyNames auf EmployeeID festgelegt ist.

Testen der Seite

Jetzt, da sich alle benötigten Steuerelemente auf der Seite befinden, können Sie die Seite testen.

So testen Sie die Seite

1. Drücken Sie STRG+F5, um die Seite auszuführen.

2. Stellen Sie sicher, dass die Spalten EmployeeID, LastName, FirstName und HireDate aus der Tabelle Employees im Datenblatt angezeigt werden.

3. Schließen Sie den Browser.

Das GridView-Steuerelement fordert Daten vom ObjectDataSource-Steuerelement an. Daraufhin erstellt das ObjectDataSource-Steuerelement eine Instanz der Datenkomponente und ruft die GetEmployees-Methode für die Datenkomponente auf. Die GetEmployees-Methode gibt ein DataTable-Objekt zurück, das das ObjectDataSource-Steuerelement an das GridView-Steuerelement zurückgibt.

Hinzufügen von Aktualisierungen zur Seite

Die von Ihnen erstellte Datenkomponente beinhaltet SQL-Anweisungen zum Aktualisieren der Datenbank (Aktualisieren, Einfügen und Löschen von Datensätzen). Die Aktualisierungsfunktionen der Datenkomponente werden von Methoden verfügbar gemacht, die beim Erstellen der Komponente durch den Assistenten automatisch generiert wurden. Das GridView-Steuerelement und das ObjectDataSource-Steuerelement können interagieren, um die Aktualisierungsmethoden automatisch zu starten.

Hinweis:
Das GridView-Steuerelement unterstützt keine Einfügevorgänge.

So aktivieren Sie Aktualisierungs- und Löschvorgänge

1. Klicken Sie mit der rechten Maustaste auf das GridView-Steuerelement, und klicken Sie dann auf Smarttag anzeigen.

2. Aktivieren Sie das Kontrollkästchen Bearbeiten aktivieren.

3. Aktivieren Sie das Kontrollkästchen Löschen aktivieren.

   Hinweis:
   Durch das Aktivieren von Löschvorgängen werden Datensätze dauerhaft aus der Datenbank entfernt. Aktivieren Sie den Löschvorgang nur, wenn Sie entbehrliche Testdaten verwenden.

Testen von Aktualisierungen

Mit diesem Test können Sie sicherstellen, dass Sie die Komponente zum Aktualisieren der Datenbank verwenden können.

So testen Sie Aktualisierungen

1. Drücken Sie STRG+F5, um die Seite auszuführen.

   In diesem Fall zeigt das GridView-Steuerelement in jeder Zeile Verknüpfungen zum Bearbeiten und Löschen an.

2. Klicken Sie auf die Verknüpfung Bearbeiten neben einer Zeile.

3. Nehmen Sie eine Änderung an der Zeile vor, und klicken Sie dann auf Aktualisieren.

   Das Raster wird mit einem aktualisierten Datum erneut angezeigt.

4. Klicken Sie in einer Zeile auf die Verknüpfung Löschen.

   Die Zeile wird dauerhaft aus der Datenbank gelöscht. Das Raster wird ohne diese Zeile erneut angezeigt.

5. Schließen Sie den Browser.

Nächste Schritte

In dieser exemplarischen Vorgehensweise wird das Arbeiten mit einer Datenkomponente veranschaulicht. Sie möchten z. B. weitere Navigationsfeatures testen. Beispielsweise können Sie folgende Aufgaben ausführen:

• Erstellen Sie eine benutzerdefinierte Datenkomponente, anstatt den Assistenten zu verwenden.

  Ein Beispiel finden Sie unter Exemplarische Vorgehensweise: Datenbindung an ein benutzerdefiniertes Geschäftsobjekt.

• Schränken Sie den Kreis der Benutzer ein, die die Daten ändern können. Eine typische Methode besteht im Hinzufügen vom Mitgliedschaften und Rollen zur Website und dem Erstellen von Regeln, die die Geschäftskomponente prüfen kann, bevor sie das Ändern von Daten ermöglicht.

• Ausführliche Informationen finden Sie unter Exemplarische Vorgehensweise: Erstellen einer Website mit Mitgliedschaft und Benutzeranmeldung und Exemplarische Vorgehensweise: Verwalten von Websitebenutzern mit Rollen.

Siehe auch

Aufgaben

Exemplarische Vorgehensweise: Verwenden von freigegebenem Code in Websites in Visual Web Developer

Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer

Konzepte

Übersicht über Datenquellensteuerelemente

Verwenden von Parametern für Datenquellen-Steuerelemente