3. Verwenden Sie die Repeater-Komponente, um den Datensatz anzuzeigen
Verwandte Einführung
Es gibt verschiedene Möglichkeiten, Daten in ASP.NET anzuzeigen, unter denen Repeater eine weitere vorhandene Komponente ist. DataGrid zeigt Daten immer in einer „Tabelle“ an. Wenn wir Daten freier anzeigen möchten, werden wir auf jeden Fall das Repeater-Steuerelement verwenden.
Es definiert das Datenausgabeformat in Form einer Vorlage.
SCHRITT 1. Erstellen Sie eine Seite. Wir können eine Repeater-Komponente zum Anzeigen von Daten erstellen, indem wir die Originalseite ändern. Benennen Sie Location1.htm in Location1.aspx um. Löschen Sie den ursprünglichen Teil der Seite und erstellen Sie einen Datensatz wie im vorherigen Kapitel, wobei Sie Region_IDenterValue=1 filtern. Lassen Sie uns das Repeater-Steuerelement verwenden, um dynamische Seiten zu erstellen.
jUm Vorlagen zum Definieren des Ausgabeformats zu verwenden, erstellen Sie zunächst eine Tabelle. Wir können es auf der Seite AnwendungàDatenbanken sehen
Die Struktur der Datenbank.
[Abbildung 3-1 Datenbankstruktur]
Entwerfen Sie basierend auf der Struktur der Datenbank die folgenden Tabellen.
[Abbildung 3-2 Vorlagendiagramm]
kDie Daten müssen an die folgende Tabelle gebunden werden. Ziehen Sie das Datenelement aus „Bindungen“ im Anwendungsfenster an seine Position.
[Abbildung 3-3 Dialogfeld „Bindung“]
Nach der Datenbindung erhalten Sie die folgende Seite:
[Abbildung 3-4 Seite nach der Datenbindung]
Es fühlt sich ein bisschen wie ein Déjà-vu an, da Dreamwaver MX die UltraDev-Tradition der Hervorhebung von Daten fortsetzt. ③ Die Datendarstellungsform kann auch im Bindungsdialogfeld ausgewählt werden. Nach dem Klicken auf das Datenelement auf der Seite kann die Datendarstellungsform für die entsprechenden Daten in der Bindung ausgewählt werden.
[Abbildung 3-5 Datendarstellungsformular]
Wenn Sie diese Tabelle als Vorlage für die Anzeige aller Datenelemente verwenden möchten, müssen Sie die gesamte Tabelle auswählen. Klicken Sie im Bereich „Anwendung“ im Element „Serververhalten“ auf das „+“ und wählen Sie das Element „Region wiederholen“ aus
[Abbildung 3-6 Wiederholungsbereich auswählen] [Abbildung 3-7 Wiederholungsmethode auswählen]
Bestimmen Sie unter Wiederholungsbereich die Methode, die Sie wiederholen möchten, und klicken Sie auf OK. Jetzt können Sie „F12“ drücken, um eine Vorschau der Seite anzuzeigen.
SCHRITT 2 Analysieren Sie den Code (Hinweis: Um den Code anzuzeigen, haben alle folgenden Codes Leerzeichen nach „<“ und vor „>“. Wir entschuldigen uns für die Unannehmlichkeiten!)
< ASP:Repeater runat="server" DataSource='< %# DataSet1.DefaultView % >' >
<ItemTemplate>
<Tabellenbreite="75%" border="0" >
<tr>
< td width="18%" >Standortname< /td >
< td colspan="3" > < %# DataSet1.FieldValue("LOCATION_NAME", Container) % > </ /td >
< /tr >
<tr>
< td >Stadt< /td >
< td width="35%" > < %# DataSet1.FieldValue("CITY", Container) % > </ /td >
< td width="19%" >Adresse< /td >
< td width="28%" > < %# DataSet1.FieldValue("ADDRESS", Container) % > </ /td >
< /tr >
<tr>
< td >Staat</ /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY", Container) % > < /td >
< td >Code< /td >
< td > < %# DataSet1.FieldValue("CODE", Container) % > < /td >
< /tr >
<tr>
< td >Telefon< /td >
< td > < %# DataSet1.FieldValue("TELEPHONE", Container) % > < /td >
< td >Fax< /td >
< td > < %# DataSet1.FieldValue("FAX", Container) % > < /td >
< /tr >
< /table >
< /ItemTemplate >
< /ASP:Repeater >
ASP.net zeigt alle Daten wiederholt an, indem eine ItemTemple-Vorlage erstellt wird. Wenn Sie also den Repeater-Stil festlegen möchten, können Sie dies tun, indem Sie die Vorlage festlegen.
Wir können auch andere Vorlagen hinzufügen, um den gewünschten Effekt zu erzielen.
AlternatingItemTemplate: Implementiert anzeigeübergreifende Daten. Datenübergreifend mit der Vorlage der ursprünglichen ItemTemplate anzeigen
SeparatorTemplate: Trennzeichenvorlage. Kann zum Trennen von Datenzeilen verwendet werden.
HeaderTemplate: Header-Vorlage. Oben mit allen Daten angezeigt.
FooterTemplate: Fußzeilenvorlage. Unten mit allen Daten angezeigt.
Die Designform ist die gleiche wie bei ItemTemplate. Umranden Sie einfach den Teil, den Sie als Vorlage verwenden möchten, mit Markierungen.
Es gibt Verknüpfungen zum Einfügen von Code über Dreamwaver MX. Klicken Sie im Bedienfeld „Einfügen“ auf die Registerkarte „ASP.NET“ und dann auf „ Wenn Sie eine Markierung hinzufügen, wird das Dialogfeld zum Hinzufügen von Markierungen angezeigt. Wählen Sie das Vorlagenprojekt in ASP.NET-Tags aus. Anschließend können Sie den Code auswählen, den Sie hinzufügen möchten. Dreamwaver MX fügt den Code an der Position ein, an der sich Ihr ursprünglicher Eingabecursor befand.
[Abbildung 2-1 Dialogfeld „Markierung hinzufügen“]
Im Folgenden finden Sie den Code für AlternatingItemTemplate, SepartorTemplate, HeaderTemplate und FooterTemplate, der in < ASP:Repeater > < /ASP:Repeater > eingefügt werden kann.
< headertemplate >< font color="#666666" size="4" >Alle
Standort< /font >< /headertemplate >
<AlternatingItemTemplate>
< table width="75%" border="0" bgcolor="#CCCCCC" >
<tr>
< td width="17%" >Standortname< /td >
< td colspan="3" bgcolor="#CCCCCC" >
< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >
</ /td >
< /tr >
<tr>
< td >Stadt< /td >
< td width="34%" > < %# DataSet1.FieldValue("CITY", Container) % > </ /td >
< td width="24%" >Adresse< /td >
< td width="25%" > < %# DataSet1.FieldValue("ADDRESS", Container) % > </ /td >
< /tr >
<tr>
< td >Staat</ /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY", Container) % > < /td >
< td >Code< /td >
< td > < %# DataSet1.FieldValue("CODE", Container) % > < /td >
< /tr >
<tr>
< td >Telefon< /td >
< td > < %# DataSet1.FieldValue("TELEPHONE", Container) % > < /td >
< td >Fax< /td >
< td > < %# DataSet1.FieldValue("FAX", Container) % > < /td >
< /tr >
< /table >
< /AlternatingItemTemplate >
< Separatortemplate >< hr width="70%" align="left" >
< /separatortemplate >
< footertemplate >< font color="#666666" size="4" >Ende< /font >< /footertemplate >
Wenn IIS den Code analysiert, platziert es die Vorlage basierend auf den Schlüsselwörtern an der relativen Position und erhält die ursprünglich angeforderte Seite.
Die vom obigen Programm generierte Seite sieht wie folgt aus:
[Abbildung 2-1 Letzte Seite]
Die Repeater-Komponente kann eine freiere Seite erstellen, aber jede Zeile kann nur einen Datensatz anzeigen. Wenn Sie eine freiere Seite erstellen möchten, gehen wir zum nächsten Abschnitt und verwenden das DataList-Steuerelement zum Anzeigen von Daten.