Exemplarische Vorgehensweise: Grundlegender Datenzugriff auf Webseiten

  • Artikel

Aktualisiert: November 2007

In dieser exemplarischen Vorgehensweise wird veranschaulicht, wie Sie eine einfache datengebundene Seite unter Verwendung von speziell für Datenzugriff konstruierten Steuerelementen erstellen können.

Im Rahmen dieser exemplarischen Vorgehensweise erhalten Sie Informationen zu folgenden Themen:

  • Verbinden mit einer Microsoft SQL Server-Datenbank im Webentwicklungstool von Microsoft Visual Web Developer.

  • Verwenden von Drag & Drop-Bearbeitung zum Erstellen von Datenzugriffselementen, die auf der Seite ohne Code verwendet werden können.

  • Verwenden des SqlDataSource-Steuerelements zum Verwalten von Datenzugriff und Bindung.

  • Anzeigen von Daten mit dem GridView-Steuerelement.

  • Konfigurieren des GridView-Steuerelements, um Sortierung und Paging zu ermöglichen.

  • Erstellen einer gefilterten Abfrage, die nur ausgewählte Datensätze anzeigt.

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 in Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer eine Website in Visual Web Developer erstellt haben, 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. Geben Sie in dem sich am weitesten rechts befindlichen Feld Speicherort den Namen des Ordners ein, in dem Sie die Seiten der Website speichern möchten.

    Geben Sie zum Beispiel den Ordnernamen C:\WebSites 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.

Hinzufügen eines GridView-Steuerelements zum Anzeigen von Daten

Wenn Sie Daten auf einer ASP.NET-Webseite anzeigen möchten, benötigen Sie Folgendes:

  • Eine Verbindung zu einer Datenquelle (z. B. einer Datenbank)

    In der folgenden Prozedur erstellen Sie eine Verbindung mit der SQL Server-Datenbank Northwind.

  • Ein Datenquellen-Steuerelement auf der Seite, über das Abfragen ausgeführt und die Ergebnisse der Abfragen verwaltet werden.

  • Ein Steuerelement auf der Seite, um die Daten tatsächlich anzuzeigen.

    In der folgenden Prozedur zeigen Sie Daten in einem GridView-Steuerelement an. Das GridView-Steuerelement ruft seine Daten aus dem SqlDataSource-Steuerelement ab.

Sie können der Website diese Elemente separat hinzufügen. Es ist jedoch die einfachste Methode, mit einer Visualisierung der Datenanzeige über das GridView-Steuerelement zu beginnen und danach Assistenten zu verwenden, um die Verbindung und das Datenquellen-Steuerelement zu erstellen. In der folgenden Prozedur wird erklärt, wie Sie alle drei Elemente erstellen können, die zur Anzeige von Daten auf der Seite erforderlich sind.

So fügen Sie ein GridView-Steuerelement hinzu und konfigurieren es, um Daten anzuzeigen

  1. Schalten Sie in Visual Web Developer zur Entwurfsansicht um.

  2. Ziehen Sie aus der Gruppe Data der Toolbox ein GridView-Steuerelement auf die Seite.

  3. 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.

  4. Klicken Sie im Menü GridView-Aufgaben in der Liste Datenquelle auswählen auf <Neue Datenquelle>.

    Das Dialogfeld Datenquellenkonfiguration wird angezeigt.

  5. Klicken Sie auf Datenbank.

    Dies gibt an, dass Sie Daten aus einer Datenbank abrufen möchten, die SQL-Anweisungen unterstützt. Dies schließt SQL Server und andere OLE DB-kompatible Datenbanken ein.

    Im Feld ID für Datenquelle angeben wird ein Standardname für ein Datenquellen-Steuerelement (SqlDataSource1) angezeigt. Sie können diesen Namen beibehalten.

  6. Klicken Sie auf OK.

    Der Assistent zum Konfigurieren von Datenquellen wird angezeigt. Dieser zeigt eine Seite an, auf der Sie eine Verbindung auswählen können.

  7. Klicken Sie auf Neue Verbindung.

  8. Kicken Sie im Dialogfeld Datenquelle auswählen unter Datenquelle auf Microsoft SQL Server, und klicken Sie danach auf Weiter.

    Das Dialogfeld Verbindung hinzufügen wird angezeigt.

  9. Geben Sie im Feld Servername den Namen des SQL-Servers ein, den Sie verwenden möchten.

  10. 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.

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

  12. Klicken Sie auf Testverbindung, und wenn Sie sicher sind, dass sie funktioniert, klicken Sie auf OK.

    Der Assistent zum Konfigurieren von Datenquellen - <Datenquellenname> wird angezeigt, und die Verbindungsinformationen werden eingetragen.

  13. Klicken Sie auf Weiter.

    Der Assistent zeigt eine Seite an, auf der Sie die Möglichkeit haben, die Verbindungszeichenfolge in der Konfigurationsdatei zu speichern. Das Speichern der Verbindungszeichenfolge in der Konfigurationsdatei hat zwei Vorteile:

    1. Es ist sicherer als das Speichern der Verbindungszeichenfolge auf der Seite.

    2. Sie können die gleiche Verbindungszeichenfolge auf mehreren Seiten wiederverwenden.

  14. Vergewissern Sie sich, dass das Kontrollkästchen Ja, Verbindung speichern unter aktiviert ist, und klicken Sie dann auf Weiter. (Sie können den Standardnamen der Verbindungszeichenfolge, NorthwindConnectionString, beibehalten.)

    Der Assistent zeigt eine Seite an, auf der Sie angeben können, welche Daten Sie aus der Datenbank abrufen möchten.

  15. Klicken Sie unter Spalten von Tabelle oder Ansicht angeben in der Liste Name auf Kunden.

  16. Aktivieren Sie unter Spalten die Kontrollkästchen CustomerID, CompanyName und City.

    Der Assistent zeigt die SQL-Anweisung an, die Sie in einem Feld am unteren Rand der Seite erstellen.

    Hinweis:

    Geben Sie im Assistenten die Auswahlkriterien (eine WHERE-Klausel) und andere SQL-Abfrageoptionen an. In diesem Teil der exemplarischen Vorgehensweise erstellen Sie eine einfache Anweisung ohne Auswahl- oder Sortieroptionen.

  17. Klicken Sie auf Weiter.

  18. Klicken Sie auf Testabfrage, um sicherzustellen, dass Sie die von Ihnen gewünschten Daten abrufen.

  19. Klicken Sie auf Fertig stellen.

    Der Assistent wird geschlossen, und Sie kehren zur Seite zurück. Durch die Ausführung des Assistenten wurden zwei Aufgaben erledigt:

    • Der Assistent hat ein SqlDataSource-Steuerelement (mit dem Namen SqlDataSource1) erstellt und konfiguriert, das die von Ihnen angegebenen Verbindungs- und Abfrageinformationen enthält.

    • Der Assistent hat das GridView-Steuerelement an SqlDataSource gebunden. Deshalb werden im GridView-Steuerelement Daten angezeigt, die vom SqlDataSource-Steuerelement zurückgegeben werden.

    Wenn Sie die Eigenschaften für das SqlDataSource-Steuerelement betrachten, können Sie sehen, dass der Assistent Werte für die ConnectionString-Eigenschaft und für die SelectQuery-Eigenschaft erstellt hat.

    Hinweis:

    Sie können das Aussehen des GridView-Steuerelements leicht ändern. Klicken Sie in der Entwurfsansicht mit der rechten Maustaste auf das GridView-Steuerelement, und klicken Sie dann auf Smarttag anzeigen. Klicken Sie im Menü GridView-Aufgaben auf Automatisch formatieren, und übernehmen Sie dann ein Schema.

Testen der Seite

Sie können die Seite jetzt ausführen.

So testen Sie die Seite

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

    Die Seite wird im Browser angezeigt. Im GridView-Steuerelement werden alle Datenzeilen aus der Kundentabelle angezeigt.

  2. Schließen Sie den Browser.

Hinzufügen von Sortierung und Paging

Sie können dem GridView-Steuerelement Sortierung und Paging hinzufügen, ohne Code schreiben zu müssen.

So fügen Sie Sortierung und Paging hinzu

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

  2. Aktivieren Sie im Kontextmenü GridView-Aufgaben das Kontrollkästchen Sortierung aktivieren.

    Die Spaltenüberschriften im GridView-Steuerelement ändern sich in Verknüpfungen.

  3. Aktivieren Sie im Kontextmenü GridView-Aufgaben das Kontrollkästchen Paging aktivieren.

    Dem GridView-Steuerelement wird ein Footer mit Seitenzahlverknüpfungen hinzugefügt.

  4. Sie können über Eigenschaften den Wert der PageSize-Eigenschaft optional von 10 auf eine kleinere Seitengröße ändern.

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

    Sie können nun auf eine Spaltenüberschrift klicken, um die Spalte nach ihrem Inhalt zu sortieren. Wenn die Anzahl der in der Datenquelle vorhandenen Datensätze größer ist als die Seitengröße des GridView-Steuerelements, können Sie die Seitennavigationsverknüpfungen im unteren Bereich des GridView-Steuerelements verwenden, um sich zwischen den Seiten zu bewegen.

  6. Schließen Sie den Browser.

Hinzufügen der Filterung

Häufig möchten Sie auf der Seite nur ausgewählte Daten anzeigen. In diesem Teil der exemplarischen Vorgehensweise ändern Sie die Abfrage für das SqlDataSource-Steuerelement, damit Benutzer Kundendatensätze für einen bestimmten Ort auswählen können.

Zunächst verwenden Sie ein TextBox-Steuerelement, um ein Textfeld zu erstellen, in das Benutzer einen Ortsnamen eingeben können. Dann ändern Sie die Abfrage, um einen parametrisierten Filter (WHERE-Klausel) einzuschließen. Als Teil dieses Prozesses erstellen Sie ein Parameterelement für das SqlDataSource-Steuerelement. Das Parameterelement legt fest, wie das SqlDataSource-Steuerelement den Wert für seine parametrisierte Abfrage abruft, in diesem Fall also aus dem Textfeld.

Wenn Sie diesen Teil der exemplarischen Vorgehensweise abgeschlossen haben, kann die Seite in der Entwurfsansicht der folgenden Seite ähneln.

So fügen Sie das Textfeld zur Angabe eines Orts hinzu

  1. Ziehen Sie aus der Gruppe Standard der Toolbox ein TextBox-Steuerelement und ein Button-Steuerelement auf die Seite.

    Das Button-Steuerelement wird nur verwendet, um die Seite an den Server zu senden. Sie müssen dafür keinen Code schreiben.

  2. Legen Sie in den Eigenschaften für das TextBox-Steuerelement ID auf textCity fest.

  3. Wenn Sie möchten, geben Sie City oder einen ähnlichen Text vor dem Textfeld ein. Dieser fungiert dann als Beschriftung.

  4. Legen Sie in den Eigenschaften für das Button-Steuerelement Text auf Submit fest.

Sie können jetzt die Abfrage ändern, um einen Filter einzuschließen.

So ändern Sie die Abfrage mit einem parametrisierten Filter

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

  2. Klicken Sie im Menü SqlDataSource-Aufgaben auf Datenquelle konfigurieren.

    Der Assistent Datenquelle konfigurieren - <Datenquellenname> wird angezeigt.

  3. Klicken Sie auf Weiter.

    Der Assistent zeigt den SQL-Befehl an, der gerade für das SqlDataSource-Steuerelement konfiguriert ist.

  4. Klicken Sie auf WHERE.

    Die Seite WHERE-Klausel hinzufügen wird angezeigt.

  5. Klicken Sie in der Liste Spalte auf Ort.

  6. Klicken Sie in der Liste Operator auf =.

  7. Klicken Sie in der Liste Quelle auf Steuerelement.

  8. Klicken Sie unter Parametereigenschaften in der Liste Steuerelement-ID auf textCity.

    Durch die vorangegangenen fünf Schritte wird angegeben, dass die Abfrage den Suchwert für Ort aus dem TextBox-Steuerelement abruft, das Sie in der vorherigen Prozedur hinzugefügt haben.

  9. Klicken Sie auf Hinzufügen.

    Die von Ihnen erstellte WHERE-Klausel wird in einem Feld im unteren Bereich der Seite angezeigt.

  10. Klicken Sie auf OK, um die Seite WHERE-Klausel hinzufügen zu schließen.

  11. Klicken Sie im Assistent Datenquelle konfigurieren - <Datenquellename> auf Weiter.

  12. Klicken Sie auf der Seite Testabfrage auf Testabfrage.

    Der Assistent zeigt die Seite Parameterwerte-Editor an, auf der Sie zur Eingabe eines in der WHERE-Klausel zu verwendenden Werts aufgefordert werden.

  13. Geben Sie London in das Feld Wert ein, und klicken Sie dann auf OK.

    Die Kundendatensätze für London werden angezeigt.

  14. Klicken Sie auf Fertig stellen, um den Assistenten zu schließen.

Sie können jetzt die Filterung testen.

So testen Sie die Filterung

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

  2. Geben Sie London in das Textfeld ein, und klicken Sie dann auf Senden.

    Eine Liste der Kunden aus dem Ort London wird im GridView-Steuerelement angezeigt.

  3. Versuchen Sie es mit anderen Orten, z. B. Buenos Aires und Berlin.

Nächste Schritte

Datenzugriff ist ein wichtiger Teil vieler Webanwendungen, und in dieser exemplarischen Vorgehensweise wurde Ihnen nur angedeutet, was Sie alles mit Daten in den Webseiten machen können. Sie möchten z. B. weitere Datenzugriffsfeatures testen. Beispielsweise können Sie folgende Aufgaben ausführen:

Siehe auch

Konzepte

Übersicht über Datenquellensteuerelemente