Freigeben über

Exemplarische Vorgehensweise: Anzeigen einer Dropdownliste während das Bearbeitens im GridView-Webserver-Steuerelement

  • Artikel

Aktualisiert: November 2007

Standardmäßig werden im GridView-Steuerelement Textfelder zum Bearbeiten angezeigt. Sie können die in die GridView-ASP.NET-Steuerelemente integrierten erweiterten Funktionen verwenden, um der Bearbeitungsanzeige eine Dropdownliste hinzuzufügen. Dies kann auf einem Web Form erfolgen, ohne dass Code hinter das Formular geschrieben werden muss. In dieser exemplarischen Vorgehensweise werden u. a. folgende Aufgaben veranschaulicht:

  • Konfigurieren eines GridView-Steuerelements zum Anzeigen von SQL-Daten

  • Anzeigen von Daten im GridView-Steuerelement

  • Anzeigen einer Dropdownliste während des Bearbeitens im GridView-Steuerelement

Vorbereitungsmaßnahmen

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

  • Microsoft Visual Web Developer (Visual Studio).

  • SQL Server Express Edition. Sie können auch eine SQL Server-Installation verwenden, jedoch müssen Sie an einigen Prozeduren kleine Anpassungen vornehmen.

  • Die auf dem Computer installierte Beispieldatenbank Northwind. Informationen über das Herunterladen und Installieren der SQL Server-Beispieldatenbank Northwind finden Sie auf der Microsoft SQL Server-Website unter Installing Sample Databases.

    Hinweis:

    Es gibt viele alternative Methoden, um eine Verbindung zur Datenbank Northwind herzustellen.

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 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\DropDownEdit ein.

  5. Klicken Sie in der Liste Sprachen 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.

Herstellen einer Verbindung mit einer SQL-Datenquelle

Zunächst müssen Sie eine Verbindung zur Datenbank Northwind herstellen.

So stellen Sie eine Verbindung mit SQL Server her

  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 nicht Microsoft SQL Server-Datenbankdatei (SqlClient) angezeigt wird, klicken Sie auf Ändern, und wählen Sie im Dialogfeld Datenquelle wechselnMicrosoft SQL Server-Datenbankdatei (SqlClient) 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 nicht sichtbar ist, klicken Sie im Menü Ansicht auf Datenbank-Explorer.

  2. Geben Sie im Feld Name der Datenbankdatei den Speicherort ein, an dem Sie die Beispieldatenbank Northwind installiert haben, oder suchen Sie nach dem Speicherort.

  3. Wählen Sie die Datenbankdatei Northwnd.mdf aus, und klicken Sie auf Öffnen.

  4. Aktivieren Sie das Kontrollkästchen Kennwort speichern.

  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.

Konfigurieren eines GridView-Steuerelements zum Anzeigen von Datenbankdaten

In diesem Teil der exemplarischen Vorgehensweise füllen Sie das Raster dynamisch mit Daten auf.

So aktivieren Sie die einfache Sortierung

  1. Wechseln Sie zur Datei Default.aspx, oder öffnen Sie sie.

  2. Wechseln Sie in die Entwurfsansicht.

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

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

    Der Assistent zum Konfigurieren von Datenquellen wird angezeigt.

  5. Klicken Sie auf Datenbank.

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

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

  7. Klicken Sie auf OK.

    Der Assistent zum Konfigurieren der Datenquelle wird angezeigt.

  8. 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 auf der Seite.

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

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

  10. Klicken Sie unter Spalten von Tabelle oder Ansicht angeben im Feld Name auf Employees.

  11. Aktivieren Sie unter Spalten die Kontrollkästchen EmployeeId, LastName, FirstName, HireDate und City.

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

    Hinweis:

    Mit dem Assistenten können Sie Auswahlkriterien (WHERE-Klauseln) und andere SQL-Abfrageoptionen angeben. Für diese exemplarische Vorgehensweise erstellen Sie eine einfache Anweisung ohne Auswahloptionen oder Sortieroptionen.

  12. Klicken Sie 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.

  13. Klicken Sie auf Weiter.

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

  15. Klicken Sie auf Fertig stellen.

  16. Klicken Sie mit der rechten Maustaste auf das GridView-Steuerelement, und wählen Sie dann Smarttag anzeigen aus. Wählen Sie im Menü GridView-Aufgaben das Feld Bearbeiten aktivieren aus.

Sie können die Seite jetzt testen.

So testen Sie die Seite

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

    Im GridView-Steuerelement werden die Spalten EmployeeId, LastName, FirstName, HireDate und City angezeigt.

  2. Klicken Sie auf den Link Bearbeiten neben einer Zeile.

    In der zum Bearbeiten ausgewählten Zeile werden die Spalten LastName, FirstName, HireDate und City als bearbeitbare Textfelder angezeigt. EmployeeId wird nicht in einem Textfeld angezeigt, da es ein nicht bearbeitbares Schlüsselfeld ist.

  3. Ändern Sie ein Feld, z. B. LastName, und klicken Sie auf Aktualisieren.

    Im GridView-Steuerelement werden die Spalten EmployeeId, LastName, FirstName, HireDate und City angezeigt, wobei LastName den aktualisierten neuen Wert aufweist.

  4. Schließen Sie den Browser.

Anzeigen einer Dropdownliste während des Bearbeitens im GridView-Steuerelement

In diesem Teil der exemplarischen Vorgehensweise können Sie eine Dropdownliste hinzufügen, aus der Sie während des Bearbeitens der Zeilen im Raster auswählen können.

So zeigen Sie eine Dropdownliste während des Bearbeitens an

  1. Ziehen Sie aus dem Knoten Daten der Toolbox ein SqlDataSource-Steuerelement auf die Seite.

    Ein neues Datenquellen-Steuerelement mit dem Namen SqlDataSource2 wird erstellt.

  2. Wählen Sie im Menü SqlDataSource-Aufgaben den Eintrag Datenquelle konfigurieren aus.

  3. Geben Sie im Feld Über welche Datenverbindung soll die Anwendung eine Verbindung mit der Datenbank herstellen? die zuvor erstellte Verbindung ein.

  4. Klicken Sie auf Weiter.

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

  6. Wählen Sie nur die Spalte City aus, und aktivieren Sie dann das Kontrollkästchen Nur eindeutige Zeilen zurückgeben. Klicken Sie auf Weiter.

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

  8. Klicken Sie mit der rechten Maustaste auf das GridView-Steuerelement, und wählen Sie dann Smarttag anzeigen aus. Wählen Sie im Menü GridView-Aufgaben den Eintrag Spalten bearbeiten aus.

  9. Wählen Sie im Dialogfeld Felder aus der Liste Ausgewählte Felder die Option City aus.

  10. Klicken Sie auf den Link Dieses Feld in ein TemplateField konvertieren.

  11. Klicken Sie auf OK, um das Dialogfeld Felder zu schließen.

  12. Klicken Sie mit der rechten Maustaste auf das GridView-Steuerelement, und wählen Sie dann Smarttag anzeigen aus. Wählen Sie im Menü GridView-Aufgaben den Eintrag Vorlagen bearbeiten aus.

  13. Wählen Sie EditItemTemplate in der Dropdownliste Anzeige aus.

  14. Klicken Sie mit der rechten Maustaste auf das TextBox-Standardsteuerelement in der Vorlage, und wählen Sie Löschen aus, um es zu entfernen.

  15. Ziehen Sie aus der Registerkarte Standard der Toolbox ein DropDownList-Steuerelement in die Vorlage.

  16. Klicken Sie mit der rechten Maustaste auf das DropDownList-Steuerelement, und wählen Sie dann Smarttag anzeigen aus. Wählen Sie im Menü DropDownList-Aufgaben den Eintrag Datenquelle auswählen aus.

  17. Wählen Sie SqlDataSource2 aus.

  18. Klicken Sie auf OK.

  19. Wählen Sie im Menü DropDownList-Aufgaben den Eintrag Datenbindungen bearbeiten aus. Die SelectedValue-Eigenschaft des DropDownList-Steuerelements wird im Dialogfeld DataBindings ausgewählt.

  20. Klicken Sie auf das Optionsfeld Feldbindung, und wählen Sie für Gebunden an den Eintrag City aus.

  21. Aktivieren Sie das Kontrollkästchen Bidirektionale Datenbindung.

  22. Klicken Sie auf OK.

  23. Klicken Sie mit der rechten Maustaste auf das GridView-Steuerelement, und wählen Sie dann Smarttag anzeigen aus. Klicken Sie im Menü GridView-Aufgaben auf Vorlagenbearbeitung beenden.

    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 Skripts oder HTML-Elemente überprüfen. Weitere Informationen finden Sie unter Übersicht über Skriptangriffe.

Sie können die Seite jetzt testen.

So testen Sie die Seite

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

    Im GridView-Steuerelement werden die Spalten EmployeeId, LastName, FirstName, HireDate und City angezeigt.

  2. Klicken Sie auf den Link Bearbeiten neben einer Zeile.

    Der aktuelle City-Wert ist in der Dropdownliste vorausgewählt.

    Wählen Sie aus der Dropdownliste einen anderen City-Wert aus, und klicken Sie auf Aktualisieren.

    Das Feld City wird mit dem in der Dropdownliste ausgewählten Wert aktualisiert.

Nächste Schritte

In dieser exemplarischen Vorgehensweise wird erläutert, wie Sie eine Dropdown-Liste anzeigen, in die Werte aus derselben Spalte eingetragen werden wie der an das Steuerelement gebundenen Spalte. Es gibt jedoch zahlreiche alternative Methoden, um Werte in eine Dropdown-Liste zu laden. Im Beispiel für DataItem erfahren Sie, wie Sie Werte aus einer anderen Tabelle in eine Dropdown-Liste laden.

Siehe auch

Aufgaben

Exemplarische Vorgehensweise: Grundlegender Datenzugriff auf Webseiten

Gewusst wie: Sichern von Verbindungszeichenfolgen bei der Verwendung von Datenquellensteuerelementen

Referenz

Übersicht über das GridView-Webserversteuerelement

DataItem