Programmieren lernen in ASP.NET mit C#

Programmieren lernen in ASP.NET mit C# von Patrick A. Lorenz, Christoph A. Müller 1. Auflage Hanser München 2003 Verlag C.H. Beck im Internet: www.beck.de ISBN 978 3 446 22311 0 Zu Inhaltsverzeichnis schnell und portofrei erhältlich bei beck-shop.de DIE FACHBUCHHANDLUNG

CARL HANSER VERLAG Patrick A. Lorenz, Christoph A. Müller Programmieren lernen in ASP.NET mit C# 3-446-22311-8 www.hanser.de

Lektion 9 Visualisierung von Daten 219 Abbildung 9.5 Das Ergebnis der beiden Methoden ist identisch. Das Data Binding mit den drei anderen Listen-Controls funktioniert analog zur ListBox. Zusätzliche Beispiele für die DropDownList, die CheckBoxList und die RadioButtonList finden Sie auf der Buch-CD. Alle Server Controls, die das Data Binding unterstützen, haben eine DataSource- Eigenschaft und eine DataBind-Methode. Manche Controls haben noch zusätzliche Eigenschaften, wie DataTextField und DataValueField beim ListBox-Control, um bestimmte Felder in der Datenquelle zu referenzieren. Es ist nicht nur möglich, einen Data Reader als Datenquelle zu nutzen, auch Collections wie zum Beispiel die ArrayList können als Datenquelle dienen. Aber auch komplexe Objekte wie DataTable-Objekte aus DataSets lassen sich nutzen. Mehr über diese bisher unbekannten Klassen lernen Sie in der nächsten Lektion. Außerdem ist es möglich, jedes Objekt, das eine der Schnittstellen IEnumerable, ICollection oder IListSource implementiert, als Datenquelle zu nutzen. 9.2 Komplexe Darstellung Die hier vorgestellten Controls dienen der komplexeren Darstellung von Daten. Die Ausgabe dieser Objekte wird über so genannte Templates (englisch: Vorlage) bestimmt. Es handelt sich dabei um spezielle Abschnitte innerhalb der Definition eines Controls, in denen man den HTML-Code für ihre verschiedenen Zustände definieren kann. Diese Vorlagen werden im Zuge der Datenbindung gefüllt und so oft wie notwendig wiederholt.

220 9.2 Komplexe Darstellung 9.2.1 Repeater Der Repeater ist ein recht einfaches Control. Ein Repeater selbst hat keine Standardausgabe. Diese wird vollständig über Vorlagen bestimmt. Das Control gibt für jeden Eintrag einer Datenquelle den in der Vorlage definierten HTML-Code aus. <asp:repeater id="repeater1" runat="server"> <HeaderTemplate></HeaderTemplate> <ItemTemplate></ItemTemplate> <AlternatingItemTemplate></AlternatingItemTemplate> <SeparatorTemplate></SeparatorTemplate> <FooterTemplate></FooterTemplate> <asp:repeater> Die Definition eines Repeater-Controls erfolgt über <asp:repeater>. Darin lassen sich verschiedenste Vorlagen erstellen. Über das HeaderTemplate und Footer- Template kann man eine Ausgabe bestimmen, welche nur einmal am Anfang und einmal am Ende der Gesamtausgabe erscheint. Das ItemTemplate und AlternatingItemTemplate bestimmt die Ausgabe für die einzelnen Einträge in der Liste. Ist ein AlternatingItemTemplate angegeben, wird nach jedem ausgegebenen Eintrag zwischen Item- und AlternatingItemTemplate abgewechselt, also alterniert. Das SeparatorTemplate bestimmt die Ausgabe zwischen jedem Eintrag. Von all diesen Vorlagen ist das ItemTemplate Pflicht. Alle anderen sind optional. Das folgende Beispiel listet alle Benutzer aus der Datenbank über einen Repeater auf. Hierbei wird dem Control der Data Reader als Datenquelle angegeben und danach die DataBind-Methode aufgerufen. Das wirklich Spannende passiert in den Vorlagen. Im HeaderTemplate wird ein Absatz mit dem Text Das ist der Header der Liste definiert. Dadurch, dass das HeaderTemplate nur einmal am Anfang der Liste ausgegeben wird, kann man es auch dazu nutzen, um zum Beispiel Tags, welche eine Liste einleiten, auszugeben. Hier wird das mit dem HTML-Tag <ul> gemacht. Das Gleiche gilt auch für das FooterTemplate. Das ItemTemplate definiert ein <li> und verwendet danach die Data Binding- Syntax, um an dieser Stelle den Vornamen und Nachnamen auszugeben. Die Eigenschaft Container.DataItem enthält dabei den jeweiligen Eintrag in der Datenquelle. In diesem Fall ist das der aktuelle Datensatz des Data Reader-Objekts. Die Abbildung zeigt die Ausgabe des Repeaters.

Lektion 9 Visualisierung von Daten 221 Listing 9.7 Repeater1.aspx <%@ Page Language="C#" %> <%@ import Namespace="System.Data.OleDb" %> <script runat="server"> void Page_Load(Object sender, EventArgs e) if(!ispostback) OleDbConnection connection = new OleDbConnection( "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Server.MapPath("db1.mdb")); connection.open(); OleDbCommand mycommand = new OleDbCommand( "SELECT Vorname, Nachname FROM Benutzer", connection); OleDbDataReader reader = mycommand.executereader(); Repeater1.DataSource = reader; Repeater1.DataBind(); reader.close(); connection.close(); </script>... <form runat="server"> <asp:repeater id="repeater1" runat="server"> <HeaderTemplate> <p>das ist der Header der Liste</p> <ul> </HeaderTemplate> <ItemTemplate> <li><%# DataBinder.Eval(Container.DataItem, "Vorname") %> <%# DataBinder.Eval(Container.DataItem, "Nachname") %></li> </ItemTemplate> <FooterTemplate> </ul> <p>das ist der Footer der Liste</p> </FooterTemplate> </asp:repeater> </form>

222 9.2 Komplexe Darstellung Abbildung 9.6 Die Ausgabe des Repeaters. Nachfolgend sehen Sie die HTML-Ausgabe des Repeater-Controls im Browser. Das HeaderTemplate und FooterTemplate wurde nur einmal generiert. Für jeden Eintrag in der Datenquelle wurde das ItemTemplate ausgegeben. <p>das ist der Header der Liste</p> <ul> <li>christoph Müller</li> <li>patrick Lorenz</li> <li>romina Müller</li> <li>vorname1 Nachname1</li> </ul> <p>das ist der Footer der Liste</p> 9.2.2 DataList Die DataList ist dem Repeater ähnlich. Sie bietet zusätzlich noch Möglichkeiten, Einträge auszuwählen und zu editieren. Außerdem kann sie die Einträge tabellarisch darstellen. Auch bei der DataList wird die Ausgabe mittels Vorlagen festgelegt. Hinzu kommt die Möglichkeit, für die einzelnen Bereiche der DataList Formatierungen beziehungsweise Styles zu vergeben.

Lektion 9 Visualisierung von Daten 223 <asp:datalist id="datalist1" runat="server"> <AlternatingItemStyle /> <EditItemStyle /> <FooterStyle /> <HeaderStyle /> <ItemStyle /> <SelectedItemStyle /> <HeaderTemplate></HeaderTemplate> <ItemTemplate></ItemTemplate> <AlternatingItemTemplate></AlternatingItemTemplate> <EditItemTemplate></EditItemTemplate> <SelectedItemTemplate></SelectedItemTemplate> <SeparatorTemplate></SeparatorTemplate> <FooterTemplate></FooterTemplate> </asp:datalist> Eine DataList wird über <asp:datalist> definiert. Zusätzlich zu den Vorlagentypen des Repeater-Controls bietet die DataList zwei Typen SelectedItem- Template und EditItemTemplate. Hierüber kann man die Ausgabe eines Eintrags im ausgewählten Zustand und im Bearbeitungsmodus bestimmen. Über die jeweiligen Style-Tags, wie das ItemStyle-Tag, kann man das Aussehen der Einträge beeinflussen. Das Listing gibt in einem DataList-Control alle Benutzer aus der Datenbank aus und ermöglicht das Auswählen von Einträgen. Auch hier wird wieder ein Data Reader an die DataList gebunden. Über die verschiedenen Style-Tags wird das Aussehen der DataList etwas verändert. Zum Beispiel wird die Hintergrundfarbe eines ausgewählten Eintrags auf hellgrün gestellt. Ansonsten ähnelt die Vorlagendefinition der des Repeater-Controls. Abbildung 9.7 Die gefüllte DataList mit ausgewähltem Eintrag.

224 9.2 Komplexe Darstellung Im ItemTemplate wird ein Button definiert, über den ein Eintrag ausgewählt wird. Um auf das Click-Ereignis des Button-Objekts zu reagieren, sieht das DataList- Control das Ereignis ItemCommand vor. Sobald man auf den Button klickt, wird die Ereignisbehandlungsmethode DataList1_ItemCommand aufgerufen. Darin wird die SelectedIndex-Eigenschaft der DataList auf den Index des angeklickten Eintrags gesetzt. Diesen Index erhält man über die Eigenschaft Item.ItemIndex der übergebenen Ereignisargumente. Listing 9.8 DataList1.aspx <%@ Page Language="C#" %> <%@ import Namespace="System.Data.OleDb" %> <script runat="server"> void Page_Load(Object sender, EventArgs e) if(!ispostback) OleDbConnection connection = new OleDbConnection( "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Server.MapPath("db1.mdb")); connection.open(); OleDbCommand mycommand = new OleDbCommand( "SELECT Vorname, Nachname FROM Benutzer", connection); OleDbDataReader reader = mycommand.executereader(); DataList1.DataSource = reader; DataList1.DataBind(); reader.close(); connection.close(); void DataList1_ItemCommand(Object source, DataListCommandEventArgs e) DataList1.SelectedIndex = e.item.itemindex; </script> <html> <head> </head> <body> <form runat="server"> <asp:datalist id="datalist1" runat="server"

Lektion 9 Visualisierung von Daten 225 OnItemCommand="DataList1_ItemCommand"> <FooterStyle backcolor="silver"></footerstyle> <HeaderStyle font-bold="true" backcolor="#e0e0e0"></headerstyle> <SelectedItemStyle backcolor="#c0ffc0"></selecteditemstyle> <ItemTemplate> <asp:button runat="server" Text="Auswählen"></asp:Button> <%# DataBinder.Eval(Container.DataItem, "Vorname") %> <%# DataBinder.Eval(Container.DataItem, "Nachname") %> </ItemTemplate> <HeaderTemplate> Das ist der Header der Liste </HeaderTemplate> <FooterTemplate> Das ist der Footer der Liste </FooterTemplate> </asp:datalist> </form> </body> </html> 9.2.3 DataGrid Von den hier vorgestellten Controls ist das DataGrid das komplexeste. Es dient ausschließlich dem Ausgeben von tabellarischen Inhalten. Dabei werden explizit Spalten genutzt. Die Darstellung erfolgt also in einer Art Raster. Das Control ist nicht nur in der Lage, Einträge zu editieren, sondern verfügt zusätzlich über Sortier- und Paging-Möglichkeiten zur seitenweisen Darstellung von umfangreichen Daten. Auf diese Funktionen wird in der nächsten Lektion näher eingegangen. Weiter ist es auch hier möglich, die verschiedenen Bereiche des DataGrids mit Styles zu formatieren. <asp:datagrid id="datagrid1" runat="server" > <AlternatingItemStyle /> <EditItemStyle /> <FooterStyle /> <HeaderStyle /> <ItemStyle /> <PagerStyle /> <SelectedItemStyle /> </asp:datagrid>

226 9.2 Komplexe Darstellung Über <asp:datagrid> wird ein DataGrid erstellt. Über die Style-Tags kann das Aussehen der einzelnen Elemente des Controls verändert werden. Diese Style-Tags werden ähnlich verwendet wie die der DataList. Das Beispiel listet über ein DataGrid-Control die Benutzertabelle aus der Datenbank auf. Das Zuweisen der Datenquelle und das Aufrufen der DataBind-Methode geschieht hier analog wie beim Beispiel der Data- List. Innerhalb des DataGrid-Tags wird über die Style-Tags das Aussehen des Controls bestimmt. Beim DataGrid ist in seiner einfachsten Form keine Spaltendefinition nötig. Das Objekt liest selbstständig die in der Datenquelle enthaltenen Felder aus und erhält somit die zu generierenden Spalten. Die Abbildung zeigt die erzeugte Tabelle. Listing 9.9 DataGrid1.aspx <%@ Page Language="C#" %> <%@ import Namespace="System.Data.OleDb" %> <script runat="server"> void Page_Load(Object sender, EventArgs e) if(!ispostback) OleDbConnection connection = new OleDbConnection( "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Server.MapPath("db1.mdb")); connection.open(); OleDbCommand mycommand = new OleDbCommand( "SELECT Vorname, Nachname FROM Benutzer", connection); OleDbDataReader reader = mycommand.executereader(); DataGrid1.DataSource = reader; DataGrid1.DataBind(); reader.close(); connection.close(); </script> <html> <head> </head> <body> <form runat="server"> <asp:datagrid id="datagrid1" runat="server">