DreamwaverMX und ASP.NET(4)
Autor：Eve Cole
Aktualisierungszeit：2009-05-31 21:06:17
4. Verwenden Sie die DataList-Komponente, um den Datensatz anzuzeigen
Verwandte Einführung:
DataList ist ein erweitertes Repeater-Steuerelement. Zusätzlich zu den ursprünglichen Funktionen von Repeater kann es auch die Anzahl der in einer einzelnen Zeile angezeigten Daten (RepeatColumn), die ausgewählte Vorlage (SelectedItemTemple) und die bearbeitete Elementvorlage (EditTemplate) festlegen. DataList ordnet die Ausgabedaten jedoch in einer Tabelle an und gibt sie aus, während Repeater der Definition der Vorlage treuer bleibt und keine HTML-Tags hinzufügt. (Hinweis: Um den Code anzuzeigen, haben alle folgenden Codes Leerzeichen nach „<“ und vor „>“. Wir entschuldigen uns für die Unannehmlichkeiten!)
SCHRITT 1Seite erstellen
Die Seite, die wir erstellen möchten, sieht wie unten gezeigt aus. Wenn wir auf den Hyperlink „Details“ klicken, werden die detaillierten Informationen angezeigt, wie im ersten Element gezeigt. Wenn Sie auf „Schließen“ klicken, werden die Details geschlossen und in ihrem ursprünglichen Aussehen wiederhergestellt.
[Abbildung 1-1 Seitendemonstration]
Wählen Sie zunächst die Daten aus, die Sie anzeigen möchten. Um die Daten von Europa (d. h. Region_ID=3) anzuzeigen, können wir in den Datensatzeinstellungen die Daten von Region_ID=3 filtern.
[Abbildung 1-2 Datenscreening]
Verwenden Sie das Datalist-Steuerelement, um eine Seite zu erstellen, auf der Daten kurz angezeigt werden. Lassen Sie uns zunächst eine Seite ohne Daten erstellen. Wählen Sie dann im Anwendungsfenster „Serververhalten“ aus. Klicken Sie auf „+“ und wählen Sie DataList aus.
[Abbildung 1-3 DataList-Auswahlseite]
Im daraufhin angezeigten Dialogfeld können wir bei Bedarf Seitenvorlagen hinzufügen.
u Header: Header-Vorlage
u Item: Datenelementvorlage
u Alternatives Element: Cross-Display-Vorlage
u Element bearbeiten: Vorlage ändern ((wird standardmäßig nicht angezeigt, muss über die Ereignisantwort angezeigt werden)
u Ausgewähltes Element: Die nach der Auswahl angezeigte Vorlage (sie muss auch durch die Ereignisantwort angezeigt werden)
u Trennzeichen: separate Vorlage
u Fußzeile: Vorlage für die Tabellenunterseite
[Abbildung 1-4 Dialogfeld „Datenliste bearbeiten“]
Wir können die erforderliche Vorlage erstellen, indem wir HTML-Code zum Inhalt hinzufügen, und wir können auch klicken
Klicken Sie auf die Schaltfläche, um Datenelemente hinzuzufügen. Nachdem Sie auf die Schaltfläche geklickt haben, wird das Dialogfeld „Datenelement“ angezeigt, in dem Sie die erforderlichen Daten auswählen können. Und fügen Sie es in das Eingabefeld „Inhalt“ ein
< %# DataBinder.Eval(Container.DataItem, "data item") % >
Der Code dient zur Anzeige der Daten.
[Abbildung 1-5 Hinzufügen von Datenelementen]
Um den Vorschaueffekt zu erzielen, fügen Sie zunächst den Code „Standortname“ zur Kopfzeile hinzu. Wird zur Anzeige des Titels verwendet. Code zum Artikel hinzufügen:
< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >, verwenden Sie Location_name als Titel jedes Elements.
Fügen Sie Code zum alternativen Artikel hinzu
< fontcolor="#0000FF" >< %#DataSet1.FieldValue("LOCATION_NAME",Container)% >< /font >
Zeigen Sie Daten in verschiedenen Schriftfarben an.
Obwohl das ausgewählte Element nicht sofort angezeigt werden kann, sollten wir uns auch den Code für einen späteren Aufruf notieren. wie folgt:
Adresse:
< %# DataSet1.FieldValue("ADDRESS", Container) % >
<BR>
Stadt:
< %# DataSet1.FieldValue("CITY", Container) % >
<BR>
Telefon:
< %# DataSet1.FieldValue("TELEPHONE", Container) % >
<BR>
Klicken Sie auf OK und zeigen Sie dann eine Vorschau der Seite an. Das Bild unten zeigt den Effekt des obigen Codes. Wir werden den Effekt der Anzeige des ausgewählten Elements gleich implementieren.
[Abbildung 1-6 erste Vorschau]
Ein Unterschied zwischen DataList und Repeater besteht darin, dass Sie eine einzelne Zeile für die Anzeige mehrerer Daten festlegen können, was im DataList-Bearbeitungsfenster festgelegt werden kann.
[Abbildung 1-7 Einrichten einer einzelnen Zeile zur Anzeige mehrerer Daten]
Wenn Sie die Option „Zeilenumbrüche verwenden“ auswählen, wird lediglich ein <BR>-Tag verwendet, um die Daten zu trennen. Wählen Sie „Tabelle verwenden“, um die Ausgabe in Tabellenform vorzunehmen. Sie können die Anzahl der in einer einzelnen Zeile angezeigten Daten bestimmen, indem Sie „Tabellenspalten“ festlegen.
SCHRITT2 Code schreiben
Das ausgewählte Element muss über Ereignisse angezeigt werden, daher müssen wir eine Schaltfläche erstellen, um das Ereignis zu starten.
j Fügen Sie LinkButton hinzu, um Ereignisse zu generieren. Bewegen Sie den Cursor im Quellcodefenster zwischen <ItemTemplate> und </ItemTemplate> und klicken Sie auf weitere Tags
Wählen Sie im Popup-Dialogfeld das asp:LinkButton-Steuerelement aus.
[Abbildung 2-1 Dialogfeld „Tag-Auswahl“]
Legen Sie im Dialogfeld „LinkButton bearbeiten“ die Eigenschaften des LinkButtons fest. Geben Sie den Namen:Detail in das ID-Eingabefeld ein.
Geben Sie „Detail“ in den Befehlsnamen für den Befehl ein, der das Ereignis generiert, und geben Sie „Detail“ in das Textdialogfeld ein (wird angezeigt).
[Abbildung 2-2 LinkButton-Bearbeitungsfeld]
Wählen Sie dann im Layout die gewünschte Farbe aus und klicken Sie auf OK, um Code zu generieren.
< asp:LinkButton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:LinkButton >
Um diesen Effekt in der Cross-Darstellung zu erzielen, müssen wir den gleichen Code in <AlternatingItemTemplate> und </AlternatingItemTemplate> einfügen.
Gleichzeitig muss zum Schließen der Popup-Auswahlvorlage auch ein Befehl generiert werden, sodass ein weiterer Linkbutton hinzugefügt werden muss. Dazu muss Code in <SelectedItemTemplate></SelectedItemTemplate> eingefügt werden:
< asp:LinkButton BackColor="#FFFFFF" CommandName="Close" ForeColor="#000000" ID="Close" runat="server" Text="Close" >< /asp:LinkButton >
kMit dem Befehl müssen wir auch ein Programm verwenden, um den Befehl zu interpretieren. Tatsächlich ist der Prozess nicht kompliziert und es muss nur eine kleine Menge Code hinzugefügt werden. Fügen Sie den folgenden Code in < head ></ /head > hinzu:
<script language="VB" runat="server" >
Sub DataList_ItemCommand(Sender als Objekt, e als DataListCommandEventArgs)
Wenn e.CommandSource.CommandName="Detail" Dann
DataList1.SelectedIndex=e.Item.ItemIndex
ElseIf e.CommandSource.CommandName="Close" Then
DataList1.SelectedIndex=-1
Ende wenn
DataList1.DataBind()
Sub beenden
</ /script >
Das Programm kann den Befehl (CommandName) erhalten, wenn Sie auf den LinkButton klicken, um das auszuführende Programm zu bestimmen. Wenn die SelectedIndex-Eigenschaft der DataList auf e.Item.ItemIndex gesetzt ist, wird die SelectedItemTemplate-Seite geöffnet. Wenn der Befehl „Close“ lautet und die SelectedIndex-Eigenschaft der DataList auf -1 festgelegt ist (d. h., es ist kein Datenelement ausgewählt), verwendet die DataList die Elementvorlage „ItemTemplate“, um dieses Datenelement anzuzeigen.
Fügen Sie außerdem den Codeausschnitt in < asp:DataList > hinzu
OnItemCommand="DataList_ItemCommand"
Um die Beziehung mit dem Programmsegment DataList_ItemCommand zu deklarieren.
Drücken Sie „F12“, um eine Vorschau anzuzeigen. Auf der Seite wird dann der erwartete Effekt angezeigt.
[Abbildung 2-3 Endgültige Vorschauversion]
Im Anhang finden Sie den Quellcode des Hauptprogrammabschnitts:
Sub DataList_ItemCommand(Sender als Objekt, e als DataListCommandEventArgs)
Wenn e.CommandSource.CommandName="Detail" Dann
DataList1.SelectedIndex=e.Item.ItemIndex
ElseIf e.CommandSource.CommandName="Close" Then
DataList1.SelectedIndex=-1
Ende wenn
DataList1.DataBind()
Sub beenden
< form runat="server" >
< asp:DataList id="DataList1"
runat="server"
RepeatColumns="1"
RepeatDirection="Vertical"
RepeatLayout="Flow"
DataSource="< %# DataSet1.DefaultView % >"
OnItemCommand="DataList_ItemCommand" >
<HeaderTemplate>
Standortname < /HeaderTemplate >
<ItemTemplate>
< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >
< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >
< /ItemTemplate >
< AlternatingItemTemplate >< Schriftfarbe="#0000FF" >
< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >
< /font >
< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >< /AlternatingItemTemplate >
<SelectedItemTemplate>Adresse:
< %# DataSet1.FieldValue("ADDRESS", Container) % >
<BR>
Stadt:
< %# DataSet1.FieldValue("CITY", Container) % >
<BR>
Telefon:
< %# DataSet1.FieldValue("TELEPHONE", Container) % >
<BR>
< asp:LinkButton BackColor="#FFFFFF" CommandName="Close" ForeColor="#000000" ID="Close" runat="server" Text="Close" >< /asp:LinkButton >
< /SelectedItemTemplate >
< /asp:DataList >
< /form>
DataList verfügt auch über eine Vorlage zum Bearbeiten von Elementen, die hauptsächlich für Datenaktualisierungen verwendet wird. Dieses Buch wird in einem späteren Abschnitt vorgestellt.
