2. Verwenden Sie die ASP.NET-Komponente DataGrid, um Daten anzuzeigen
Einführung in den zugehörigen Inhalt:
ASP.NET enthält viele Webkomponenten, um den Prozess der Bearbeitung von Webseiten zu beschleunigen. Lassen Sie uns am Beispiel von global, einem Tutorial, das mit Dreamwaver MX geliefert wird, zeigen, wie diese Komponente zum Anzeigen von Daten in der Datenbank verwendet wird.
1. Datenbankverknüpfung und Anzeige von Daten mit DataGrid
Die Datenbank global.mdb dieser Instanz befindet sich in den Assets im Webseitenverzeichnis. Unser Zweck besteht darin, die Daten verschiedener Regionen basierend auf dem Wert von Region_id in der Standorttabelle in dieser Datenbank auszugeben. (Sie können Access verwenden, um diese Datenbank zu öffnen)
Wir können die Datei „location3.htm“ in „location3.aspx“ umbenennen (das Suffix der Webfensterdatei von ASP.NET lautet „aspx“) und sie dann bearbeiten.
[Abbildung 2-1 Seiten, die geändert werden müssen]
Löschen wir den einfachen statischen Teil in der Mitte und verwenden wir das DataGrid von ASP.NET, um seine Funktionalität zu implementieren.
[Abbildung 2-2 Den statischen Teil der Seite löschen]
Der nächste Schritt besteht darin, eine Verknüpfung zur Datenbank herzustellen. Klicken Sie rechts auf das Anwendungsfeld, wählen Sie Datenbank aus und klicken Sie auf das Pluszeichen.
Wählen Sie OLE DB-Verbindung.
[Abbildung 2-3 Anwendungsfenster]
Rufen Sie dann das Dialogfeld „OLE DB-Verbindung“ auf. Hier können Sie den Linkdatenbankcode handschriftlich schreiben oder den Code automatisch generieren. Benennen Sie den Speicherort für den Verbindungsnamen, klicken Sie auf „Erstellen“, und der Code wird automatisch durch den Assistenten generiert.
[Abbildung 2-4 Dialogfeld „OLE DB-Verbindung“]
Wählen Sie nach dem Aufrufen der Seite „Datenlink-Eigenschaften“ den Anbieter aus, um die Datenbank-Engine festzulegen.
Das Erstaunliche daran ist, dass es 21 Datenbankverbindungsmethoden unterstützt, darunter SQL Server, Oracle usw.
[Abbildung 2-5 Von der Datenbank-Engine bereitgestellte Seite]
Dies ist einer der großartigen Vorteile von .NET, da es mehrere Datenbanken unterstützt. Es verwendet ADO.NET. Nach einer Weile wird die Verbindungszeichenfolge, die wir mit diesem Assistenten generieren, gemäß ADO.NET geschrieben.
Da es sich bei der Datenbank, zu der wir eine Verknüpfung herstellen möchten, um eine Access2000-Datenbank handelt, wählen wir den Microsoft Jet 4.0 OLE DB-Anbieter aus und klicken auf „Weiter“.
Klicken Sie auf die Schaltfläche neben 1. Wählen Sie einen Datenbanknamen aus oder geben Sie einen ein, um die Datenbank auszuwählen, mit der Sie eine Verknüpfung herstellen möchten.
Abbrechen Benutzername und Passwort in 2. Geben Sie Informationen ein, um sich bei der Datenbank anzumelden
[Abbildung 2-6 Einstellungslink]
Legen Sie Leseberechtigungen unter „Erweitert“ fest. Wählen Sie „Lesen“, „ReadWrite“, „Write“ und klicken Sie auf „OK“.
[Abbildung 2-7 Berechtigungen festlegen]
Fügen Sie einen Verbindungsnamen hinzu und klicken Sie auf Testen, um die Datenbankverknüpfung zu testen. Wenn die Datenbankverknüpfung erfolgreich ist, klicken Sie auf OK. Glückwunsch,
Sie haben die Datenbank mit Ihrer Site verknüpft. Der nächste Schritt sollte darin bestehen, es mithilfe von DataGrid anzuzeigen
Wählen Sie außerdem im Bereich „Anwendung“ die Option „Serververhalten“ aus.
Schließen Sie zunächst die Einstellungen ab, klicken Sie auf „Bereitstellen“, und das Programm stellt die Site automatisch bereit und kopiert die Ordner „DreamweaverCtrls.dll“, „web.config“ und „_mmServerScripts“ in das Site-Verzeichnis. Dabei handelt es sich um erforderliche Dateien, um Dreamweaver MX zum Erstellen von ASP.net-Webseiten zu verwenden.
[Abbildung 2-8 Bereitstellungsstandort]
Gleichzeitig müssen Sie zunächst einen bin-Ordner im Stammverzeichnis der Website erstellen und die Datei DreamweaverCtrls.dll in diesen Ordner kopieren.
Klicken Sie auf das +-Zeichen, um zunächst ein neues DataSet zu erstellen.
[Abbildung 2-9 Datensatz hinzufügen]
„Verbindung“ dient zur Auswahl der Datenquelle, „Tabelle“ dient zur Auswahl der Tabelle, „Spalte“ dient zur Auswahl des Elements und „Filter“ dient zum Filtern der Daten. Da auf dieser Seite Daten aus Europa angezeigt werden, ist der eingegebene Wert=3 festgelegt. Bei einem Fehler wird „Gehe zu“ verwendet, um die Seite zu verwalten, zu der gesprungen wird, wenn beim Lesen von Daten ein Fehler auftritt.
[Abbildung 2-10 Erstellen eines Datensatzes]
Nachdem Sie das DataSet erfolgreich erstellt haben, können Sie das DataGrid erstellen. Klicken Sie auf das +-Zeichen und wählen Sie DataGrid aus
[Abbildung 2-11 DataGrid hinzufügen]
Wählen Sie den erforderlichen Datensatz unter „Datensatz“ aus, legen Sie fest, ob die Paging-Anzeige verwendet werden soll, und legen Sie fest, wie viele Datensätze pro Seite beim Paging angezeigt werden sollen. Legen Sie die Navigationsleistenmethode unter „Navigation“ fest und fügen Sie angezeigte Elemente in „Spalten“ hinzu oder löschen Sie sie.
[Abbildung 2-12 DataGrid einstellen]
Klicken Sie auf Bearbeiten, um den Titel der Kopfzeile festzulegen. Nachdem Sie den Titel eingegeben haben, klicken Sie zur Bestätigung auf OK.
[Abbildung 2-13 Einstellungstitel]
Klicken Sie auf OK, um das DataGrid hinzuzufügen.
[Abbildung 2-14 Vorschauseite]
Auf der Vorschauseite sehen Sie einen Bereich, in dem ein DataGrid hinzugefügt wurde. Drücken Sie F12, um eine Vorschau der Seite anzuzeigen.
Unten ist die Seite nach dem Ausführen.
[Abbildung 2-15 Seite nach dem Ausführen]
2.Ändern Sie die Eigenschaften von DataGrid
Einführung in den zugehörigen Inhalt:
Finden Sie, dass die Farbe nicht besonders hübsch aussieht, wenn Sie diese Komponente sehen? Die DataGrid-Komponente verfügt über viele Eigenschaften, mit denen Sie den Stil des DataGrid ändern können.
Code analysieren
Dies ist der von Dreamwaver MX generierte Code, der basierend auf seinen Eigenschaften geändert werden kann.
PagerStyle-Modus
Sie können das Paging-Anzeigeformat festlegen. NumericPages wird im numerischen Paging angezeigt, und NextPrev wird in den Tags „<“ „>“ angezeigt.
HeaderStyle
Legen Sie den Header-Stil fest. Sie können HorizontalAlign (horizontale Ausrichtung), BackColor (Hintergrundfarbe), ForeColor (Vordergrundfarbe), Font-Name (Schriftart), Font-Bold (ob fett) und Font-Size (Schriftgröße) festlegen.
ItemStyle
Legen Sie den Stil jedes Datenelements fest, wobei die Eigenschaften dieselben wie oben sind
AlternatingItemStyle
Wenn Sie die Farbe von Datenelementen ändern müssen, können Sie dieses Element hinzufügen. Die Eigenschaften sind dieselben wie oben.
Fußzeilenstil
Legen Sie den Fußzeilenstil fest
PagerStyle
Unterer Stil
Dreamwaver MX verfügt außerdem über ein Dialogfeld, mit dem Sie den Stil des DataGrid ändern können.
Wählen Sie das generierte DataGrid aus und klicken Sie im Eigenschaftenfenster auf „Spalten bearbeiten“.
[Abbildung 2-16 Eigenschaftenfenster von DataGrid]
Beim Aufrufen der Attributänderungsseite können wir „+“ und „-“ verwenden, um die gewünschten Spalten zu vergrößern oder zu verkleinern. Gleichzeitig können wir auf „Bearbeiten“ klicken, um die jedem Element entsprechenden Datenelemente sowie den Namen festzulegen Titel. Klicken Sie auf „Spalte ändern“, um den Typ jedes Elements festzulegen, einschließlich Freiform (legen Sie die in jeder Spalte enthaltenen Daten frei fest, und Sie können Ihren eigenen Inhalt hinzufügen), Hyperlink (als Hyperlink festlegen), Bearbeiten, Daten aktualisieren, Abbrechen-Schaltflächen (können). wird zum schnellen Erstellen von Verwaltungsseiten verwendet), Schaltfläche „Löschen“ (Datensätze löschen)
[Abbildung 2-17 DataGrid-Spalteneigenschaft]
[Abbildung 2-18 Attribut „Spaltentyp ändern“]
Ich glaube, dass Sie über diese Eigenschaften das gewünschte DataGrid festlegen können.