C# - DataList kontrol használata

forráskód letöltése
A DataList kontrolt felhasználva könnyedén készíthetünk web oldalainkra különféle formázott listákat, felsorolásokat, melyekhez szinte bármilyen adatforrást használhatunk, legyen az adatbázis lekérdezés eredménye, saját adataink egy tömbben, stb.
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>