Exemplarische Vorgehensweise: Bearbeiten und Einfügen von Daten in Webseiten mit dem DetailsView-Webserver-Steuerelement

Aktualisiert: November 2007

Mit Microsoft Visual Web Developer können Sie Formulare zur Dateneingabe erstellen, mit denen Datensätze aktualisiert und neue Datensätze mit nur wenigen Zeilen Code in eine Datenbank eingefügt werden können. Wenn Sie eine Kombination aus einem Datenquellen-Steuerelement, das Datenzugriff kapselt, dem DetailsView-Steuerelement und dem GridView-Steuerelement verwenden, mit denen Datensätze in einem bearbeitbaren Format angezeigt werden, können Sie eine Dateneingabeseite erstellen, mit der Benutzer bestehende Datensätze bearbeiten oder neue hinzufügen können, ohne Code eingeben zu müssen.

In dieser exemplarischen Vorgehensweise werden die folgenden Themen behandelt:

• Erstellen einer Dateneingabeseite

• Konfigurieren eines Datenquellen-Steuerelements mit den erforderlichen Informationen, um in einer Datenbank Aktualisierungen und Einfügungen vorzunehmen

• Anzeigen und Ändern einzelner Datensätze sowie Einfügen neuer Datensätze mit dem DetailsView-Steuerelement

• Aktivieren von Datenbankänderungen auf der Dateneingabeseite mit einem GridView-Steuerelement

Vorbereitungsmaßnahmen

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

• Visual Web Developer

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

  Wenn Sie das Betriebssystem Microsoft Windows XP oder Windows Server 2003 verwenden, verfügen Sie bereits über MDAC 2.7. Wenn Sie jedoch das Betriebssystem Microsoft Windows 2000 Server 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.

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

• Die Berechtigung zum Ändern von Daten in der Beispieldatenbank Northwind

Erstellen der Website und der Webseite

Erstellen Sie eine neue Website und eine neue Webseite, indem Sie folgende Schritte ausführen.

So erstellen Sie eine neue Dateisystem-Website

1. Öffnen Sie Visual Web Developer.

2. Klicken Sie im Menü Datei auf Neu, und klicken Sie anschließend auf Website. Wenn Sie Visual Web Developer Express verwenden, 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. Wählen Sie im Feld Speicherort die Option Dateisystem aus, und geben Sie den Namen des Ordners ein, in dem Sie die Seiten der Website aufbewahren möchten.

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

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

   Die ausgewählte Programmiersprache wird zur Standardsprache für die Website. Sie können jedoch die Programmiersprache für jede Seite einzeln festlegen.

6. Klicken Sie auf OK.

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

Verbinden mit SQL Server

Der nächste Schritt ist das Erstellen einer Verbindung mit der SQL Server-Datenbank.

So erstellen Sie eine Verbindung mit einer SQL Server-Datenbank

1. Klicken Sie im Server-Explorer mit der rechten Maustaste auf Datenverbindungen, und klicken Sie dann auf Verbindung hinzufügen. Wenn Sie Visual Web Developer Express verwenden, verwenden Sie den Datenbank-Explorer.

   Das Dialogfeld Verbindung hinzufügen wird angezeigt.

   • Wenn in der Liste Datenquelle der Eintrag Microsoft SQL Server (SqlClient) nicht angezeigt wird, klicken Sie auf Ändern, und wählen Sie im Dialogfeld Datenquelle wechseln den Eintrag Microsoft SQL Server aus.

   • Wenn die Seite Datenquelle auswählen angezeigt wird, wählen Sie in der Liste Datenquelle den Typ der zu verwendenden Datenquelle aus. Für diese exemplarische Vorgehensweise ist der Datenquellentyp Microsoft SQL Server. Klicken Sie in der Liste Datenanbieter auf .NET Framework-Datenanbieter für SQL Server, und klicken Sie danach auf Weiter.

   Hinweis:
   Wenn die Registerkarte Server-Explorer in Visual Web Developer nicht sichtbar ist, klicken Sie im Menü Ansicht auf Server-Explorer. Wenn die Registerkarte Datenbank-Explorer in der Express Edition nicht sichtbar ist, klicken Sie im Menü Ansicht auf Datenbank-Explorer.

2. Geben Sie im Feld Verbindung hinzufügen im Feld Servername den Servernamen ein.

3. Wählen Sie im Abschnitt Beim Server anmelden die Option aus, die für den Zugriff auf die SQL Server-Datenbank geeignet ist (integrierte Sicherheit oder bestimmte ID und Kennwort), und geben Sie ggf. einen Benutzernamen und ein Kennwort ein. Aktivieren Sie das Kontrollkästchen Kennwort speichern, wenn Sie ein Kennwort eingegeben haben.

4. Unter Datenbanknamen auswählen oder eingeben geben Sie Northwind ein.

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

   Die neue Verbindung wurde im Server-Explorer unter Datenverbindungen erstellt.

Erstellen der Dateneingabeseite

In diesem Abschnitt erstellen Sie eine Dateneingabeseite, und Sie konfigurieren ein DetailsView-Steuerelement, damit Mitarbeiterdaten angezeigt werden können, die in der Tabelle Employees der Datenbank Northwind gespeichert sind. Zum Behandeln des Datenzugriffs auf die Seite konfigurieren Sie ein SQL-Datenquellen-Steuerelement.

So können Sie eine Dateneingabeseite erstellen und ein DetailsView-Steuerelement konfigurieren

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

   Das Dialogfeld Neues Element hinzufügen wird angezeigt.

2. Klicken Sie unter Von Visual Studio installierte Vorlagen auf Web Form, und geben Sie im Feld Name dann EditEmployees.aspx ein.

3. Klicken Sie auf Hinzufügen.

4. Öffnen Sie die Seite EditEmployees.aspx.

5. Wechseln Sie in die Entwurfsansicht.

6. Geben Sie Edit Employees ein, wählen Sie den Text aus, und formatieren Sie dann den Text als Überschrift.

7. Ziehen Sie in der Toolbox aus der Gruppe Daten ein DetailsView-Steuerelement auf die Seite.

8. Klicken Sie mit der rechten Maustaste auf das DetailsView-Steuerelement, klicken Sie auf Eigenschaften, und legen Sie dann AllowPaging auf true fest.

   Damit können Sie einen Bildlauf durch die einzelnen Mitarbeitereinträge durchführen, wenn diese angezeigt werden.

Der nächste Schritt besteht darin, ein Datenquellen-Steuerelement zu erstellen und zu konfigurieren, mit dem Sie die Datenbank abfragen können. Es gibt mehrere Möglichkeiten, ein Datenquellen-Steuerelement zu erstellen. Sie können beispielsweise Datenelemente aus dem Server-Explorer in den Datenbank-Explorer auf die Seite ziehen. In dieser exemplarischen Vorgehensweise beginnen Sie mit dem DetailsView-Steuerelement. Anschließend konfigurieren Sie dort das Datenquellen-Steuerelement.

So konfigurieren Sie ein Datenquellen-Steuerelement

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

2. Klicken Sie im Menü DetailsView-Aufgaben im Feld Datenquelle auswählen auf <Neue Datenquelle>.

   Das Dialogfeld Assistent zum Konfigurieren von Datenquellen wird angezeigt.

3. Klicken Sie unter Datenquellentyp wählen auf Datenbank.

4. Behalten Sie den Standardnamen SqlDataSource1 bei, und klicken Sie dann auf OK.

   Der Assistent zum Konfigurieren von Datenquellen zeigt die Seite Verbindung auswählen an.

5. Geben Sie im Feld Über welche Datenverbindung soll die Anwendung eine Verbindung mit der Datenbank herstellen? die Verbindung ein, die Sie in "So stellen Sie eine Verbindung zu SQL Server her" erstellt haben, und klicken Sie dann auf Weiter.

   Der Assistent zeigt eine Seite an, auf der Sie die Verbindungszeichenfolge in einer Konfigurationsdatei speichern können. Das Speichern der Verbindungszeichenfolge in der Konfigurationsdatei hat zwei Vorteile:

   • Es ist sicherer als das Speichern in der Seite.

   • Sie können die gleiche Verbindungszeichenfolge in mehreren Seiten verwenden.

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

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

7. Wählen Sie auf der Seite Die Select-Anweisung konfigurieren die Option Spalten von Tabelle oder Ansicht angeben aus, und klicken Sie dann im Feld Name auf Employees.

8. Aktivieren Sie unter Spalten die Kontrollkästchen EmployeeID, LastName, FirstName und HireDate, und klicken Sie dann auf Weiter.

9. Klicken Sie auf Testabfrage, um die Daten in der Vorschau anzuzeigen, und klicken Sie dann auf Fertig stellen.

Sie können jetzt die Anzeigeseite für die Mitarbeiterdatensätze testen.

So testen Sie die Anzeige der Mitarbeiterdatensätze

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

   Der erste Mitarbeiterdatensatz wird im DetailsView-Steuerelement angezeigt.

2. Klicken Sie auf die Seitenzahlverknüpfungen, damit zusätzliche Mitarbeiterdatensätze angezeigt werden.

3. Schließen Sie den Browser.

Ermöglichen des Bearbeitens in einem GridView-Steuerelement

Momentan können Sie Mitarbeiterdatensätze zwar anzeigen, aber nicht bearbeiten. In diesem Abschnitt fügen Sie ein GridView-Steuerelement hinzu und konfigurieren es so, dass Sie einzelne Datensätze bearbeiten können.

Hinweis:
Im GridView-Steuerelement wird eine Liste von Datensätzen angezeigt, die Sie bearbeiten können. Sie können sie jedoch nicht einfügen. Später in dieser exemplarischen Vorgehensweise verwenden Sie das DetailsView-Steuerelement, mit dem Sie neue Datensätze hinzufügen können.

Wenn Sie die Bearbeitung unterstützen möchten, konfigurieren Sie das zuvor von Ihnen erstellte Datenquellen-Steuerelement (SqlDataSource1) mit SQL-Anweisungen, durch die Aktualisierungen ausgeführt werden.

So fügen Sie ein GridView-Steuerelement hinzu und ermöglichen das Bearbeiten

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

2. Klicken Sie mit der rechten Maustaste auf das GridView-Steuerelement, klicken Sie auf Smarttag anzeigen, und klicken Sie dann im Menü GridView-Aufgaben im Feld Datenquelle auswählen auf SqlDataSource1.

3. Klicken Sie im Menü GridView-Aufgaben auf Datenquelle konfigurieren.

4. Klicken Sie auf Weiter, um zur Seite Die Select-Anweisung konfigurieren des Assistenten zu gelangen.

5. Klicken Sie auf der Seite Die Select-Anweisung konfigurieren auf Erweitert, aktivieren Sie das Kontrollkästchen INSERT-, UPDATE- und DELETE-Anweisungen generieren, und klicken Sie dann auf OK.

   Dadurch werden die Insert-, Update- und Delete-Anweisungen für das SqlDataSource1-Steuerelement auf der Basis der vorher von Ihnen konfigurierten Select-Anweisung generiert.

   Hinweis:
   Alternativ können Sie die Anweisungen manuell generieren, indem Sie Benutzerdefinierte SQL-Anweisung oder gespeicherte Prozedur angeben auswählen und SQL-Abfragen eingeben.

6. Klicken Sie auf Weiter und anschließend auf Fertig stellen.

   Das SqlDataSource-Steuerelement wird jetzt mit zusätzlichen SQL-Anweisungen konfiguriert.

   Hinweis:
   Sie können die durch den Assistenten generierten Anweisungen überprüfen, indem Sie das SqlDataSource-Steuerelement auswählen und dort die Eigenschaften DeleteQuery, InsertQuery und UpdateQuery anzeigen. Sie können die aktualisierten Steuerelementeigenschaften auch anzeigen, indem Sie zur Quellansicht wechseln und das Markup des Steuerelements überprüfen.

7. Aktivieren Sie im Menü GridView-Aufgaben die Kontrollkästchen Paging aktivieren und Bearbeiten aktivieren.

   Sicherheitshinweis:

   Benutzereingaben auf einer ASP.NET-Webseite können möglicherweise schädliche Clientskripts enthalten. Standardmäßig wird die Benutzereingabe von ASP.NET-Webseiten überprüft, damit die Eingabe keine Skript- oder HTML-Elemente enthält. Solange die Validierung aktiviert ist, müssen Sie Benutzereingaben nicht explizit auf Skript- oder HTML-Elemente überprüfen. Weitere Informationen finden Sie unter Übersicht über Skriptangriffe.

Sie können jetzt die Bearbeitung von Mitarbeiterdatensätzen testen.

So testen Sie die Bearbeitung im GridView-Steuerelement

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

   Das GridView-Steuerelement wird mit den Daten in Textfeldern angezeigt.

2. Wählen Sie im GridView-Steuerelement eine Zeile aus, und klicken Sie auf Bearbeiten.

3. Nehmen Sie eine Änderung am Datensatz vor, und klicken Sie dann auf Aktualisieren.

   Die aktualisierten Daten werden jetzt sowohl im GridView-Steuerelement als auch im DetailsView-Steuerelement angezeigt.

4. Schließen Sie den Browser.

Ermöglichen des Bearbeitens, Löschens und Einfügens mit einem DetailsView-Steuerelement

Mit dem GridView-Steuerelement können Sie zwar Datensätze bearbeiten, aber keine Daten einfügen. In diesem Abschnitt ändern Sie das DetailsView-Steuerelement so, dass Sie die Datensätze einzeln anzeigen können. Sie können aber auch Datensätze löschen, einfügen und aktualisieren.

So verwenden Sie ein DetailsView-Steuerelement und ermöglichen das Löschen, Einfügen und Aktualisieren

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

2. Aktivieren Sie im Menü DetailsView-Aufgaben die Kontrollkästchen Einfügen aktivieren, Bearbeiten aktivieren und Löschen aktivieren.

   Als Sie zuvor in dieser exemplarischen Vorgehensweise das DetailsView-Steuerelement verwendeten, standen die Optionen zum Aktiveren von Bearbeiten, Einfügen und Löschen nicht zur Verfügung. Das liegt daran, dass das SqlDataSource1-Steuerelement, an das das DetailsView-Steuerelement gebunden ist, nicht über die erforderlichen SQL-Anweisungen verfügt. Da Sie jetzt das Datenquellen-Steuerelement so konfiguriert haben, dass Aktualisierungsanweisungen enthalten sind, stehen die Aktualisierungsoptionen für das DetailsView-Steuerelement zur Verfügung.

Sie können jetzt das Löschen, Einfügen und Aktualisieren im DetailsView-Steuerelement testen.

So testen Sie das Aktualisieren, Einfügen und Löschen im DetailsView-Steuerelement

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

   Im DetailsView-Steuerelement wird ein Mitarbeiterdatensatz angezeigt.

2. Klicken Sie im DetailsView-Steuerelement auf Bearbeiten.

   Im DetailsView-Steuerelement werden jetzt die Daten in Textfeldern angezeigt.

3. Nehmen Sie eine Änderung am Datensatz vor, und klicken Sie dann auf Aktualisieren.

   Der aktualisierte Datensatz wird im Steuerelement angezeigt.

4. Klicken Sie im DetailsView-Steuerelement auf Neu.

   Im Steuerelement werden jetzt leere Textfelder in den einzelnen Spalten angezeigt.

5. Geben Sie Werte für die einzelnen Spalten ein.

   Die Tabelle Employees enthält eine Schlüsselspalte mit automatischer Inkrementierung. Der Wert für EmployeeID wird daher beim Speichern des Datensatzes automatisch zugewiesen.

6. Klicken Sie abschließend auf Einfügen.

   Der neue Datensatz wird als letzter Datensatz hinzugefügt.

   Hinweis:
   In dieser exemplarischen Vorgehensweise werden durch das Einfügen eines neuen Datensatzes in der Tabelle Employees keine Fehler generiert. Wenn Sie jedoch mit Produktionsdaten arbeiten, können für die Tabellen Beschränkungen gelten (beispielsweise eine Fremdschlüsselbeschränkung), auf die Sie beim Konfigurieren des DetailsView-Steuerelements achten müssen.

7. Verwenden Sie Paging im DetailsView-Steuerelement, um zum letzten Datensatz zu navigieren, und klicken Sie dann auf Löschen.

   Der neue Datensatz wird entfernt.

   Hinweis:
   Wie beim Einfügen von Daten müssen Sie sich immer über die Beschränkungen im Klaren sein, die für eine Datenzeile gelten, wenn Sie ein DetailsView-Steuerelement konfigurieren, um Löschungen zu ermöglichen.

Nächste Schritte

In dieser exemplarischen Vorgehensweise wurden die Grundlagen der Erstellung einer Webseite veranschaulicht, auf der Benutzer Datensätze ändern können. Darüber hinaus bieten ASP.NET-Webseiten weitere Möglichkeiten für den Umgang mit Daten. Beispielsweise können Sie folgende Aufgaben ausführen:

• Arbeiten mit Datensätzen in verknüpften Tabellen. Ausführliche Informationen finden Sie unter Exemplarische Vorgehensweise: Erstellen von Master-Detail-Webseiten in Visual Studio.

• Verwenden einer Komponente der mittleren Ebene für den Datenzugriff. Ausführliche Informationen finden Sie unter Exemplarische Vorgehensweise: Datenbindung an ein benutzerdefiniertes Geschäftsobjekt.

• Verwenden anderer Verfahren zum Konfigurieren des Datenzugriffs auf einer Webseite. Ausführliche Informationen finden Sie unter Exemplarische Vorgehensweise: Grundlegender Datenzugriff auf Webseiten.

Siehe auch

Aufgaben

Exemplarische Vorgehensweise: Erstellen einer Webseite zum Anzeigen von Access-Datenbankdaten

Konzepte

Übersicht über Datenquellensteuerelemente

Binden an Daten mit einem Datenquellensteuerelement