Sdílet prostřednictvím

Exemplarische Vorgehensweise: Anzeigen formatierter Daten in Webseiten mit dem FormView-Webserversteuerelement

  • Článek

Aktualisiert: November 2007

ASP.NET enthält verschiedene Steuerelemente, mit denen Sie Datensätze anzeigen und bearbeiten können. In dieser exemplarischen Vorgehensweise arbeiten Sie mit dem FormView-Steuerelement, das jeweils mit einem einzelnen Datensatz arbeitet. Das primäre Feature des FormView-Steuerelements ist, dass es Ihnen ermöglicht, das Layout eines Datensatzes über die Definition von Vorlagen selbst zu erstellen. Wenn Sie mit Vorlagen arbeiten, können Sie das Layout und die Darstellung von Daten in dem Steuerelement vollständig steuern. Das FormView-Steuerelement unterstützt auch Aktualisierungen, z. B. das Bearbeiten, Einfügen und Löschen von Datensätzen. Wenn die Datenquelle dem FormView-Steuerelement mehr als einen Datensatz bereitstellt, können Sie mit diesem Steuerelement einen Bildlauf durch die einzelnen Datensätze durchführen.

3fs4k4w4.alert_note(de-de,VS.90).gifHinweis:

Sie können auch einzelne Datensätze mit dem DetailsView-Steuerelement bearbeiten. Dieses stellt vordefinierte Layouts für die Daten bereit. Weitere Informationen finden Sie unter Übersicht über das DetailsView-Webserversteuerelement.

Zu den Aufgaben in dieser exemplarischen Vorgehensweise gehören:

  • Erstellen einer Seite zum Anzeigen von Master-Detail-Informationen.

  • Verwenden eines FormView-Steuerelements zum Erstellen eines Freiformlayouts für einen Datensatz.

  • Konfigurieren des FormView-Steuerelements, um eine Bearbeitung zu ermöglichen.

Vorbereitungsmaßnahmen

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

  • Microsoft Visual Web Developer.

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

    3fs4k4w4.alert_note(de-de,VS.90).gifHinweis:

    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. Weitere Informationen finden Sie unter "Microsoft Data Access Components (MDAC) Installation" in der MSDN Library.

Erstellen der Website

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. Geben Sie im Feld Speicherort den Namen des Ordners ein, in dem Sie die Seiten der Website speichern möchten.

    Geben Sie z. B. den Ordnernamen C:\WebSites\FormViewData 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.

Verwenden einer Dropdownliste als Master

In diesem Teil der exemplarischen Vorgehensweise fügen Sie einer Seite eine Dropdownliste hinzu und füllen diese mit einer Liste von Produktnamen. Wenn Benutzer ein Produkt auswählen, werden auf der Seite die Details für das Produkt in einem FormView-Steuerelement angezeigt.

So erstellen und füllen Sie eine Dropdownliste

  1. Wechseln Sie zur Seite Default.aspx, oder öffnen Sie sie. Wenn Sie mit einer Website arbeiten, die Sie bereits erstellt haben, fügen Sie eine Seite hinzu oder öffnen Sie eine Seite, mit der Sie in dieser exemplarischen Vorgehensweise arbeiten können.

  2. Wechseln Sie in die Entwurfsansicht.

  3. Geben Sie Display Product Information in der Seite ein.

  4. Ziehen Sie aus der Gruppe Standard der Toolbox ein DropDownList-Steuerelement auf die Seite.

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

  6. Aktivieren Sie im Menü DropDownList-Aufgaben das Kontrollkästchen AutoPostBack aktivieren.

  7. Klicken Sie auf Datenquelle auswählen, um den Assistent zum Konfigurieren von Datenquellen zu öffnen.

  8. Klicken Sie in der Liste Datenquelle wählen auf <Neue Datenquelle>.

  9. Klicken Sie auf Datenbank.

    Dies gibt an, dass Sie Daten aus einer Datenbank abrufen möchten, die SQL-Anweisungen unterstützt.

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

  10. Klicken Sie auf OK.

    Der Assistent zeigt eine Seite an, auf der Sie eine Verbindung auswählen können.

  11. Klicken Sie auf die Schaltfläche Neue Verbindung.

    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.

  12. Gehen Sie im Dialogfeld Verbindung hinzufügen wie folgt vor:

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

    2. 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. Aktivieren Sie das Kontrollkästchen Kennwort speichern, wenn Sie ein Kennwort eingegeben haben.

    3. Wählen Sie die Schaltfläche Datenbanknamen auswählen oder eingeben aus, und geben Sie dann Northwind ein.

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

    Sie kehren zum Assistenten zurück, und die Verbindungsinformationen werden eingetragen.

  13. Klicken Sie auf Weiter.

  14. Vergewissern Sie sich, dass das Kontrollkästchen Ja, Verbindung speichern unter aktiviert ist, und klicken Sie dann auf Weiter. (Sie können den Namen der Standardverbindungszeichenfolge 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 auf Spalten von Tabelle oder Ansicht angeben.

  16. Klicken Sie in der Liste Name auf Products.

  17. Unter Spalten wählen Sie ProductID und ProductName aus.

  18. Klicken Sie auf Weiter.

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

  20. Klicken Sie auf Fertig stellen.

    Sie kehren zum Assistenten zurück.

  21. Klicken Sie in der Liste Datenfeld zur Anzeige in DropDownList auswählen auf ProductName.

  22. In der Liste Datenfeld als Wert von DropDownList auswählen wählen Sie ProductID aus.

    Dadurch geben Sie an, dass, wenn ein Element ausgewählt wird, das Feld ProductID als Wert des Elements zurückgegeben wird.

  23. Klicken Sie auf OK.

Testen Sie die Dropdownliste, bevor Sie fortfahren.

So testen Sie die Dropdownliste

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

  2. Wenn die Seite angezeigt wird, überprüfen Sie die Dropdownliste.

  3. Wählen Sie einen Produktnamen aus, um sicherzustellen, dass die Liste ein Postback ausführt.

Hinzufügen eines FormView-Steuerelements

Sie fügen jetzt ein FormView-Steuerelement zum Anzeigen von Produktdetails hinzu. Das FormView-Steuerelement ruft seine Daten aus einem zweiten Datenquellen-Steuerelement ab, das Sie der Seite hinzufügen. Das zweite Datenquellen-Steuerelement enthält eine parametrisierte Abfrage, die den Produktdatensatz für das momentan im DropDownList-Steuerelement ausgewählte Element abruft.

So fügen Sie ein FormView-Steuerelement hinzu

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

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

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

    Das Dialogfeld Assistent zum Konfigurieren von Datenquellen wird angezeigt.

  4. Klicken Sie auf Datenbank.

    Das FormView-Steuerelement ruft Daten aus der gleichen Tabelle ab wie das DropDownList-Steuerelement.

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

  5. Klicken Sie auf OK.

    Der Assistent zum Konfigurieren von Datenquellen wird gestartet.

  6. Wählen Sie aus der Liste Über welche Datenverbindung soll die Anwendung eine Verbindung mit der Datenbank herstellen? die Verbindung aus, die Sie früher in dieser exemplarischen Vorgehensweise erstellt und gespeichert haben.

  7. Klicken Sie auf Weiter.

    Der Assistent zeigt eine Seite an, auf der Sie eine SQL-Anweisung erstellen können.

  8. Wählen Sie aus der Liste Name unter Spalten von Tabelle oder Ansicht angeben den Eintrag Products aus.

  9. Im Feld Spalten wählen Sie ProductID, ProductName und UnitPrice aus.

  10. Klicken Sie auf die Schaltfläche WHERE.

    Das Dialogfeld WHERE-Klausel hinzufügen wird angezeigt.

  11. Wählen Sie aus der Liste Spalte den Eintrag ProductID aus.

  12. Wählen Sie in der Liste Operator den Eintrag = aus.

  13. Wählen Sie aus der Liste Quelle den Eintrag Steuerelement aus.

  14. Wählen Sie unter Parametereigenschaften in der Liste Steuerelement-ID den Eintrag DropDownList1 aus.

    Durch die letzten beiden Schritte wird angegeben, dass die Abfrage den Suchwert für die Produkt-ID aus dem DropDownList-Steuerelement abruft, das Sie zuvor hinzugefügt haben.

  15. Klicken Sie auf Hinzufügen.

  16. Klicken Sie auf OK, um das Dialogfeld WHERE-Klausel hinzufügen zu schließen.

  17. Klicken Sie auf Erweitert.

    Das Dialogfeld Erweiterte SQL-Generierungsoptionen wird angezeigt.

  18. Aktivieren Sie das Kontrollkästchen INSERT-, UPDATE- und DELETE-Anweisungen generieren.

    Diese Option veranlasst den Assistenten, SQL-Aktualisierungsanweisungen basierend auf der von Ihnen konfigurierten Select-Anweisung zu erstellen. Später in dieser exemplarischen Vorgehensweise verwenden Sie das FormView-Steuerelement, um Datensätze zu bearbeiten und einzufügen. Dazu müssen für das Datenquellen-Steuerelement Aktualisierungsanweisungen zur Verfügung stehen.

  19. Klicken Sie auf OK.

  20. Klicken Sie auf Weiter.

  21. Klicken Sie in der Seitenvorschau auf Testabfrage.

    Der Assistent zeigt ein Dialogfeld an, in dem Sie zur Eingabe eines in der WHERE-Klausel zu verwendenden Werts aufgefordert werden.

  22. Geben Sie 4 in das Feld Wert ein, und klicken Sie dann auf OK.

    Die Produktinformationen werden angezeigt.

  23. Klicken Sie auf Fertig stellen.

Anpassen des Layouts im FormView-Steuerelement

Sie können das FormView-Steuerelement verwenden, um das Layout des darin angezeigten Datensatzes anzupassen. In diesem Abschnitt der exemplarischen Vorgehensweise passen Sie das Datensatzlayout an, indem Sie eine Vorlage bearbeiten. Für das Layout verwenden Sie eine HTML-Tabelle.

So formatieren Sie das Layout

  1. Klicken Sie auf das FormView-Steuerelement, um es auszuwählen, und ziehen Sie dann den Größenziehpunkt auf der rechten Seite des Steuerelements, um das Steuerelement auf die Breite der aktuellen Seite zu bringen.

  2. Ziehen Sie den Größenziehpunkt an der Unterkante des Steuerelements, um die Höhe des Steuerelements auf etwa 400 Pixel zu ändern. (Die genaue Höhe ist nicht wichtig.)

  3. Klicken Sie mit der rechten Maustaste auf das Steuerelement, klicken Sie auf Vorlage bearbeiten, und klicken Sie dann auf ItemTemplate.

    Das Steuerelement wird im Elementvorlagen-Bearbeitungsmodus erneut angezeigt. Die Elementvorlage enthält den statischen Text und die Steuerelemente, die verwendet werden, um bei der Ausführung der Seite den Datensatz anzuzeigen. Visual Web Developer füllt normalerweise die Elementvorlage für jede Datenspalte in der Datenquelle mit einem datengebundenen Label-Steuerelement. Zusätzlich generiert Visual Web Developer für jede Bezeichnung statischen Text, der als Beschriftung fungiert.

    Die Vorlage wird auch mit drei LinkButton-Steuerelementen generiert, die den Text Bearbeiten, Löschen und Neu enthalten.

  4. Setzen Sie die Einfügemarke an den Beginn der Elementvorlage, drücken Sie mehrmals die EINGABETASTE, um Platz zu schaffen, und geben Sie dann am Beginn der Vorlage Product Details als Überschrift ein.

  5. Setzen Sie den Cursor unter die Steuerelemente und den statischen Text, und klicken Sie im Menü Tabelle auf Tabelle einfügen.

    Sie erstellen eine HTML-Tabelle als Container für den Text und die Steuerelemente.

  6. Legen Sie im Dialogfeld Tabelle einfügen die Option Zeilen auf 4 und die Option Spalten auf 2 fest.

  7. Klicken Sie auf OK, um das Dialogfeld Tabelle einfügen zu schließen.

  8. Markieren Sie alle Zellen der Tabelle, und wählen Sie anschließend im Menü Tabelle den Punkt Zellformatierung aus.

    Das Dialogfeld Zelleneigenschaften wird angezeigt.

  9. Legen Sie die Breite auf 35 Pixel (px) und die Höhe auf 30 Pixel (px) fest.

  10. Klicken Sie auf OK, um das Dialogfeld Zelleneigenschaften zu schließen.

  11. Ziehen Sie das ProductIdLabel-Steuerelement in die oberste Zelle auf der rechten Seite.

  12. Ziehen Sie das ProductNameLabel-Steuerelement in die zweite Zelle auf der rechten Seite.

  13. Ziehen Sie das UnitPriceLabel-Steuerelement in die dritte Zelle auf der rechten Seite.

  14. Geben Sie in der linken Spalte statischen Text ein, der als Beschriftung für die Label-Steuerelemente fungiert. Geben Sie z. B. in der Zelle neben dem ProductIdLabel-Steuerelement ID ein. Sie können einen beliebigen Beschriftungstext eingeben.

  15. Klicken Sie mit der rechten Maustaste auf die linke Spalte, klicken Sie auf Auswählen, und klicken Sie dann auf Spalte.

  16. Legen Sie im Eigenschaftenfenster Ausrichten auf Rechts fest, damit der Beschriftungstext rechtsbündig wird.

  17. Wählen Sie die rechte Spalte aus, und ziehen Sie an deren rechtem Rand, damit die Tabelle breit genug ist, dass in ihr auch lange Produktnamen angezeigt werden können.

  18. Wählen Sie den von Visual Web Developer generierten Text aus (z. B. den Text ProductID), und löschen Sie ihn.

  19. Klicken Sie mit der rechten Maustaste auf die Titelleiste des FormView-Steuerelements, und klicken Sie auf Vorlagenbearbeitung beenden.

    Der Vorlagen-Editor wird geschlossen, und das Steuerelement wird mit dem Layout angezeigt, das Sie erstellt haben.

Testen des FormView-Steuerelements

Sie können das Layout jetzt testen.

So testen Sie das FormView-Steuerelement

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

  2. Klicken Sie im DropDownList-Steuerelement auf einen Produktnamen.

    Im FormView-Steuerelement werden Details zu diesem Produkt angezeigt.

  3. Wählen Sie ein anderes Produkt aus, und überprüfen Sie, dass im FormView-Steuerelement die Produktdetails angezeigt werden.

  4. Schließen Sie den Browser.

Hinzufügen der Funktionen zum Bearbeiten und Einfügen zum FormView-Steuerelement

Im FormView-Steuerelement können einzelne Datensätze angezeigt werden. Es unterstützt aber auch das Bearbeiten, Löschen und Einfügen.

In diesem Teil der exemplarischen Vorgehensweise fügen Sie die Funktion zum Bearbeiten des aktuell angezeigten Datensatzes hinzu. Wenn Sie den Datensatz bearbeiten möchten, definieren Sie eine andere Vorlage, die Textfelder (und potenziell andere Steuerelemente) enthält.

So fügen Sie dem FormView-Steuerelement Funktionen zum Bearbeiten hinzu

  1. Klicken Sie mit der rechten Maustaste auf das FormView-Steuerelement, klicken Sie auf Vorlage bearbeiten, und klicken Sie auf EditItemTemplate.

    Der Vorlagen-Editor wird angezeigt und in diesem die EditItemTemplate-Eigenschaft, mit der das Layout der Datensätze definiert wird, die sich im Bearbeitungsmodus befinden. Visual Web Developer füllt die Bearbeitungsvorlage mit einem TextBox-Steuerelement für jede Datenspalte, die keine Schlüsselspalte ist, und fügt statischen Text für Beschriftungen hinzu. Dies entspricht dem Verfahren, mit dem die Elementvorlage generiert wurde, jedoch mit dem Unterschied, dass Visual Web Developer in der Bearbeitungsvorlage Textfelder generiert.

    Wie schon zuvor wird die Vorlage mit den LinkButton-Steuerelementen Aktualisieren und Abbrechen generiert, mit denen Änderungen während der Bearbeitung gespeichert oder verworfen werden können.

  2. Fügen Sie optional eine Layouttabelle hinzu, und ordnen Sie die Steuerelemente so an, wie dies zuvor in dieser exemplarischen Vorgehensweise beim Arbeiten mit der Elementvorlage erfolgt ist.

  3. Klicken Sie mit der rechten Maustaste auf das FormView-Steuerelement, klicken Sie auf Vorlage bearbeiten, und klicken Sie dann auf InsertItemTemplate.

    Wie bei der EditItemTemplate-Eigenschaft erstellt Visual Web Developer automatisch ein Vorlagenlayout für Bezeichnungen und TextBox-Steuerelemente. Die Steuerelemente werden angezeigt, wenn Benutzer einen neuen Datensatz in die Produkttabelle einfügen möchten. Die Vorlage wird auch bei den LinkButton-Steuerelementen Einfügen und Abbrechen generiert.

  4. Fügen Sie optional eine Layouttabelle hinzu, und ordnen Sie die Steuerelemente so an, wie Sie dies beim Arbeiten mit der Bearbeitungselementvorlage getan haben.

  5. Klicken Sie mit der rechten Maustaste auf das FormView-Steuerelement, und klicken Sie auf Vorlagenbearbeitung beenden.

    3fs4k4w4.alert_security(de-de,VS.90).gifSicherheitshinweis:

    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.

Testen der Funktionen zum Bearbeiten und Einfügen

Sie können jetzt die Funktionen zum Bearbeiten und Einfügen testen.

So testen Sie die Bearbeitungsfunktionen des FormView-Steuerelements

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

  2. Wählen Sie im DropDownList-Steuerelement ein Produkt aus.

    Die Produktdetails werden im FormView-Steuerelement angezeigt.

  3. Klicken Sie auf Bearbeiten.

    Das FormView-Steuerelement wechselt in den Bearbeitungsmodus.

  4. Nehmen Sie eine Änderung am Produktnamen oder am Einzelpreis vor.

  5. Klicken Sie auf Aktualisieren.

    Der Datensatz wird gespeichert, und das FormView-Steuerelement wechselt in den Anzeigemodus. Die Änderung wird in der Anzeige reflektiert.

  6. Wählen Sie ein anderes Produkt aus.

  7. Klicken Sie auf Bearbeiten.

  8. Nehmen Sie eine Änderung am Produktnamen vor.

  9. Klicken Sie auf Abbrechen.

    Überprüfen Sie, ob die Änderung nicht gespeichert wurde.

So testen Sie die Einfügefunktionen des FormView-Steuerelements

  1. Klicken Sie im FormView-Steuerelement auf Neu.

    Das FormView-Steuerelement wechselt in den Einfügemodus. Dabei werden zwei leere Textfelder angezeigt.

  2. Geben Sie einen neuen Produktnamen und einen Preis ein, und klicken Sie dann auf Einfügen.

    Der Datensatz wird in der Datenbank gespeichert, und das FormView-Steuerelement wechselt in die Anzeigeansicht (ItemTemplate).

    3fs4k4w4.alert_note(de-de,VS.90).gifHinweis:

    Der neue Datensatz wird in der Dropdownliste nicht angezeigt. Sie fügen diese Funktion im nächsten Abschnitt hinzu.

Erneutes Anzeigen von aktualisierten Produktnamen in der Dropdownliste

Auf dieser Seite können Sie jetzt Datensätze in der Datenbanktabelle Products anzeigen, bearbeiten oder löschen. Die Dropdownliste wird aber noch nicht mit den Änderungen synchronisiert, die Sie im FormView-Steuerelement vornehmen. Wenn Sie beispielsweise einen neuen Produktdatensatz einfügen, wird der neue Datensatz erst in der Dropdownliste angezeigt, wenn Sie die Seite schließen und erneut öffnen. Außerdem wird die Seite am Anfang mit dem ersten Datensatz in der Produkttabelle angezeigt. Dies entspricht möglicherweise nicht Ihren Anforderungen.

Sie können Code hinzufügen, um diese kleineren Probleme zu beheben. In diesem Abschnitt der exemplarischen Vorgehensweise führen Sie Folgendes aus:

  • Aktualisieren der Dropdownliste, wenn Benutzer einen Datensatz bearbeiten oder einfügen.

  • Hinzufügen des Texts "(Select)" zur Dropdownliste, wenn die Seite das erste Mal angezeigt wird, und Entfernen des Texts, wenn der Benutzer seine erste Auswahl getroffen hat.

So aktualisieren Sie die Dropdownliste, wenn Datensätze bearbeitet oder eingefügt werden

  1. Wählen Sie in der Entwurfsansicht der Seite das FormView-Steuerelement aus.

  2. Klicken Sie im Eigenschaftenfenster auf die Schaltfläche Ereignisse, um eine Liste von Ereignissen für das FormView-Steuerelement anzuzeigen.

  3. Doppelklicken Sie auf das Feld ItemInserted.

    Visual Web Developer wechselt in die Codebearbeitungsansicht und erstellt einen Handler für das ItemInserted-Ereignis.

  4. Fügen Sie dem Ereignishandler den folgenden hervorgehobenen Code hinzu.

    Protected Sub FormView1_ItemInserted(ByVal sender As Object, _
   ByVal e As System.Web.UI.WebControls.FormViewInsertedEventArgs) _
   Handles FormView1.ItemInserted
      DropDownList1.DataBind()
End Sub

    [C#]

    protected void FormView1_ItemInserted(object sender, 
        FormViewInsertedEventArgs e)
{
    DropDownList1.DataBind();
}

    Der Code wird ausgeführt, nachdem der neue Datensatz eingefügt wurde. Die Dropdownliste wird erneut an die Produkttabelle gebunden. Dies führt zu einer Aktualisierung des Inhalts der Liste.

  5. Wechseln Sie in die Entwurfsansicht. (Wenn Sie mit einer Code-Behind-Seite arbeiten, schalten Sie zur Seite Default.aspx um, und wechseln Sie danach in die Entwurfsansicht.)

  6. Klicken Sie im Eigenschaftenfenster auf die Schaltfläche Ereignisse, um eine Liste von Ereignissen für das FormView-Steuerelement anzuzeigen.

  7. Doppelklicken Sie auf das Feld ItemUpdated.

    Visual Web Developer wechselt in die Codebearbeitungsansicht und erstellt einen Ereignishandler für das ItemUpdated-Ereignis.

  8. Fügen Sie den folgenden hervorgehobenen Code hinzu.

    Protected Sub FormView1_ItemUpdated(ByVal sender As Object, _
   ByVal e As System.Web.UI.WebControls.FormViewUpdatedEventArgs) _
   Handles FormView1.ItemUpdated
      DropDownList1.DataBind()
End Sub

    [C#]

    protected void FormView1_ItemUpdated(object sender, 
    FormViewUpdatedEventArgs e)
{
    DropDownList1.DataBind();
}

    Der Code wird ausgeführt, nachdem der Datensatz aktualisiert wurde. Die Dropdownliste wird erneut an die Produkttabelle gebunden. Dies führt zu einer Aktualisierung des Inhalts der Liste.

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

  10. Geben Sie den Produktnamen eines Datensatzes ein, klicken Sie auf Aktualisieren, und überprüfen Sie dann die Dropdownliste, um sich zu vergewissern, dass der aktualisierte Name angezeigt wird.

  11. Fügen Sie einen neuen Produktdatensatz ein, klicken Sie auf Einfügen, und überprüfen Sie dann die Dropdownliste, um sich zu vergewissern, dass der Liste der neue Name hinzugefügt wurde.

Im abschließenden Schritt müssen Sie die Dropdownliste so ändern, dass "(Select)" angezeigt wird und dass das FormView-Steuerelement nur angezeigt wird, wenn Benutzer eine Auswahl getroffen haben.

So fügen Sie dem DropDownList-Steuerelement einen Auswahleintrag hinzu

  1. Doppelklicken Sie in der Entwurfsansicht auf einen leeren Teil der Seite.

    Visual Web Developer erstellt einen Ereignishandler für das Load-Ereignis der Seite.

  2. Fügen Sie im Handler folgenden hervorgehobenen Code hinzu:

    [Visual Basic]

    Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then        FormView1.Visible = False    End If
End Sub

    [C#]

    protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        FormView1.Visible = false;
    }
}

    Der Code wird beim Ausführen der Seite ausgeführt. Dabei wird zuerst getestet, ob es sich um ein Postback handelt. Sollte das nicht der Fall sein, wird die Seite das erste Mal ausgeführt. Wenn es sich nicht um ein Postback handelt, wird das FormView-Steuerelement durch den Code ausgeblendet, da es nur angezeigt werden soll, wenn der Benutzer explizit einen Datensatz zum Ansehen oder Bearbeiten ausgewählt hat.

  3. Wählen Sie in der Entwurfsansicht der Seite das DropDownList-Steuerelement aus.

  4. Klicken Sie im Eigenschaftenfenster im Feld Elemente auf das Auslassungszeichen (...).

    Das Dialogfeld ListItem-Auflistungs-Editor wird angezeigt.

  5. Klicken Sie auf Hinzufügen, um ein neues Element zu erstellen.

  6. Geben Sie unter ListItem-Eigenschaften im Feld Text den Text (Select) ein.

  7. Klicken Sie auf OK, um das Dialogfeld ListItem-Auflistungs-Editor zu schließen.

  8. Legen Sie im Feld Eigenschaften AppendDataBoundItems auf true fest.

    Wenn die Dropdownliste während der Datenbindung gefüllt wird, werden die Produktinformationen dem von Ihnen definierten (Select)-Element hinzugefügt.

  9. Klicken Sie im Eigenschaftenfenster auf die Schaltfläche Ereignisse, um eine Liste von Ereignissen für das DropDownList-Steuerelement anzuzeigen.

  10. Doppelklicken Sie auf das Feld SelectedIndexChanged.

  11. Fügen Sie den folgenden hervorgehobenen Code hinzu.

    [Visual Basic]

    Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender _
    As Object, ByVal e As System.EventArgs) _
    Handles DropDownList1.SelectedIndexChanged
        If DropDownList1.Items(0).Text = "(Select)" Then            DropDownList1.Items.RemoveAt(0)        End If        FormView1.Visible = True
End Sub

    [C#]

    protected void DropDownList1_SelectedIndexChanged(object sender, 
    EventArgs e)
{
    if(DropDownList1.Items[0].Text == "(Select)")    {        DropDownList1.Items.RemoveAt(0);    }    FormView1.Visible = true;
}

    Der Code wird ausgeführt, wenn Benutzer ein Element im DropDownList-Steuerelement auswählen. Nachdem sichergestellt wurde, dass das zuvor hinzugefügte "(Select)"-Element vorhanden ist, wird dieses entfernt, da Benutzer nicht mehr zur Auswahl eines Elements aufgefordert werden müssen, nachdem sie erstmals ein Element ausgewählt haben. Durch den Code wird auch das FormView-Steuerelement angezeigt (nicht mehr ausgeblendet), sodass Benutzern der von ihnen ausgewählte Datensatz angezeigt wird.

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

    Auf der Seite wird nur die Dropdownliste angezeigt, wobei das Wort (Select) angezeigt wird.

  13. Wählen Sie ein Element in der Liste aus.

    Das Element wird im FormView-Steuerelement angezeigt.

  14. Überprüfen Sie die Dropdownliste, und beachten Sie, dass sich das Wort (Select) nicht mehr in der Liste befindet.

Nächste Schritte

In dieser exemplarischen Vorgehensweise wurden Ihnen die grundlegenden Schritte zur Verwendung eines FormView-Steuerelements zum Anzeigen und Bearbeiten einzelner Datensätze mit einem benutzerdefinierten Layout veranschaulicht. Mit dem FormView-Steuerelement können Sie auch eine anspruchsvollere Formatierung ausführen, als Sie dies in dieser exemplarischen Vorgehensweise getan haben. Außerdem können Sie Vorlagen für andere Modi, einschließlich Auswahlmodus und Einfügemodus, sowie für Header und Footer erstellen, die zusammen mit dem Datensatz angezeigt werden. Andere Szenarien, in denen die FormView verwendet werden kann, finden Sie unter:

Erstellen von Vorlagen für das FormView-Webserversteuerelement

Ändern von Daten mithilfe eines FormView-Webserversteuerelements

Siehe auch

Konzepte

Übersicht über das FormView-Webserversteuerelement

Referenz

Übersicht über das DetailsView-Webserversteuerelement