Az egyszerűség kedvéért készítsünk egy saját listát, felhasználva az ArrayList osztályt, melynek adatait ezután megjelentetjük a DataList kontrol segítségével. Az adataink létrehozásához egy kis script-et szúrunk be a WebForm1.aspx oldal html kódjának fejrészébe.
<script language="C#" runat="server">
Az adatokat a lap betöltődésének eseményekor hoznánk létre, így a Load eseményt használjuk fel.
void Page_Load(Object Sender, EventArgs e) {
if (!IsPostBack) {
Itt létrehozzuk a listát, majd az Add függvények hívásával elhelyezzük benne a szükséges adatokat.
ArrayList al = new ArrayList();
al.Add("http://www.Animare.hu");
al.Add("http://www.SoftwareOnline.hu");
al.Add("http://www.Delphi6.hu");
Ezt a listát ezek után a DataList kontrolhoz kötjük, megadva azt a DataSource property-jén keresztül és meghívva a DataBind függvényét.
DataList1.DataSource = al;
DataList1.DataBind();
}
}
</script>
Ne felejtsük el átírni a HTML kód első sorában lévő AutoEventWireup paraméter értékét igazra, különben nem jön létre a fenti Load esemény.
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="true" Inherits="DataListTest.WebForm1" %>
Ezek után váltsunk vissza a HTML nézetről a Design nézetre a WebForm1.aspx lapon, majd dobjunk egy DataList kontrolt a Toolbox-ról a lapra.
E kontrolnak van néhány hasznos menüpontja, mely egy jobb gombbal történő kattintás után lesz látható. Az Edit template menüpontból három újabb nyílik. Ezeket választva lehetőségünk van a fejléc, lábléc adatok, a tétel adatok és az elválasztó adatok megadására. Válasszuk a Header and Footer Templates menüpontot. Ekkor megjelenik egy táblázat, melynél a HeaderTemplate alatti területen megszerkeszthetjük az adataink fejlécét, míg a FooterTemplate alatti részen a láblécet. E két területen a szerkesztést úgy végezhetjük el, mintha azok önálló web oldalak lennének, vagyis bármit ide tehetünk, akár új kontrolokat is, vagy bármilyen szöveget begépelhetünk, megformázhatjuk azt.
A szerkesztés végeztével válasszuk a jobb gombra megjelenő End Template Editing menüpontot.
Szintén jobb gomb lenyomása és az Auto Format menüpont választásával lehetőségünk van előre beállított sablonok közül választani egyet, mellyel a listánk kinézetét választhatjuk meg.
Az adatok szerkesztését elvégezhetjük másképp is: váltsunk vissza a HTML nézetre és keressük elő a DataList-re hivatkozó részt:
<asp:DataList id="DataList1" style="Z-INDEX: 101; LEFT: 32px; POSITION: absolute; TOP: 40px" runat="server" BorderColor="#DEDFDE" BorderStyle="None" ForeColor="Black" BackColor="White" CellPadding="4" GridLines="Vertical" BorderWidth="1px">
Itt látható, hogy az egyes részekhez tartozó kód <xy> és </xy> címke között kap helyet. Így például a fejléc tartalmát a <HeaderTemplate> címke után adhatjuk meg, míg a lábléc kódja a <FooterTemplate> címke után kerül és így tovább.
<HeaderTemplate>
Web címek
</HeaderTemplate>
<SelectedItemStyle Font-Bold="True" ForeColor="White" BackColor="#CE5D5A"></SelectedItemStyle>
<AlternatingItemStyle BackColor="White"></AlternatingItemStyle>
Lehetőség van arra is, hogy manuálisan finomítsuk a megjelenítendő adat kinézetét. Így például szükség esetén előírhatjuk, hogy jobbra igazítva jelenjen meg az adott kontrol a láblécben:
<FooterTemplate>
<div align="right">
<asp:HyperLink id="HyperLink1" runat="server" NavigateUrl="http://www.SoftwareOnline.hu">Software Online</asp:HyperLink>
</div>
</FooterTemplate>
<ItemStyle BackColor="#F7F7DE"></ItemStyle>
<FooterStyle BackColor="#CCCC99"></FooterStyle>
Nem rendelkeztünk még a legfontosabb részről, melyet az <ItemTemplate> címkénél kell megadni, ami persze nem más, mint az adatok helye:
<ItemTemplate>
<div class="f8">
<%# Container.DataItem %>
</div>
</ItemTemplate>
<HeaderStyle Font-Bold="True" ForeColor="White" BackColor="#6B696B"></HeaderStyle>
</asp:DataList>