C# - Repeater kontroll használata

forráskód letöltése
Ha egy webes alkalmazás egy-egy oldalán előfordul olyan feladatunk, ahol egy adott HTML részt kell rendszeresen megismételnünk, akkor ebben nagy segítséget nyújt a Repeater kontroll.
Van mondjuk egy tömbünk, melyet szeretnénk táblázatban megjeleníteni, ekkor nyilvánvaló, hogy a <tr><td> adat </td></tr> rész az, amit annyiszor kell megismételnünk, ahány eleme van a tömbünknek.
Mellékelt példában három Repeater kontrollt használunk fel a web oldal elkészítéséhez. Ezeknél három különböző módon használjuk azokat. Nézzük sorra:
Első feladat a következő: létrehozunk egy tömböt (ArrayList), melybe felveszünk három web oldal címet. Ezeket szeretnénk egy HTML táblázatban megjeleníteni.
Az új web project megnyitása után tegyünk egy Repeater kontrollt a WebForm1.aspx-re. Váltsunk át HTML nézetre, mivel a többi teendőt ott tudjuk ellátni. Szükségünk lesz a tömbre. Ezt a Page_Load eseménynél hozhatjuk létre és tölthetjük fel. Írjuk be a következő kis scriptet a <HEAD> részbe.
    <script language="C#" runat="server">
       void Page_Load(Object Sender, EventArgs e) { 
          if (!IsPostBack) {
Létrehozunk egy ArrayList objektumot.
             ArrayList al = new ArrayList(); 
Felveszünk néhány web címet.
             al.Add("http://www.Animare.hu");
             al.Add("http://www.SoftwareOnline.hu");
             al.Add("http://www.Delphi6.hu");              
A Repeater-hez a DataSource property-n keresztül tudjuk hozzákapcsolni az adatforrást. Ehhez a property-hez a következő típusú adatokat kapcsolhatjuk:
  • System.Collections.IEnumerable
  • System.Data.DataView
  • System.Collections.ArrayList
  • System.Collections.Hashtable
  • egyéb tömb
             Repeater1.DataSource = al;
             Repeater1.DataBind();
          }
       }
    </script>
Következő lépésként keressük meg a HTML lapon az alábbi bejegyzést, mely a Repeater1 kontroll helyét jelzi.
      <asp:Repeater id="Repeater1" runat="server">
      </asp:Repeater>
Ezt kell kiegészítenünk oly módon, hogy létrejöjjön a kívánt táblázat. A Repeater kontrollnak több vezérlő eleme is van. Ilyen például az <ItemTemplate></ItemTemplate>. Amit ezek közé írunk azt a kódot annyiszor fogja ismételni a Repeater, ahány eleme van a hozzákapcsolt adatforrásnak. Mielőtt ezzel foglalkoznánk, készítsük el táblázat fejlécét.
      <asp:Repeater id="Repeater1" runat="server">
Fejléchez a <HeaderTemplate></HeaderTemplate> párost használhatjuk.
        <HeaderTemplate>
Ezek között megadhatjuk a táblázatunk kezdetén szereplő HTML kódot. A táblázatnak egy oszlopa lesz és annyi sora, ahány eleme van a hozzárendelt adatforrásnak.
          <table cellpadding="5" cellspacing="0">
            <tr>
              <td align="center" class="f9b">
                Web
              </td>
            </tr>
        </HeaderTemplate>
Ha kész a fejléc, akkor jöhet az <ItemTemplate>. Amit ez után írunk az a rész kerül ismétlésre.
        <ItemTemplate>
          <tr>
            <td>
Az ArrayList-ben lévő adatokat úgy tudjuk elérni, hogy a Container objektum DataItem property-jének értékét kiolvassuk és beszúrjuk a HTML kódba. A beszúráshoz a <%# karakterekkel kell kezdenünk és a %> karakterekkel zárnunk a kifejezést.
              <a href="<%# Container.DataItem %>">
                <%# Container.DataItem %>
              </a>
            </td>
          </tr>
        </ItemTemplate>
Hogy a HTML kód helyes legyen a táblázatot le is kell zárnunk a végén. Ehhez adott a <FooterTemplate></FooterTemplate> páros, ahol ezt megtehetjük.
        <FooterTemplate>
          </table>
        </FooterTemplate>
      </asp:Repeater>
Fenti script a következő HTML kódot generálja:
<table cellpadding="5" cellspacing="0">
  <tr><td align="center" class="f9b"> Web </td> </tr>        
  <tr><td><a href="http://www.Animare.hu">http://www.Animare.hu</a></td></tr>        
  <tr><td><a href="http://www.SoftwareOnline.hu">http://www.SoftwareOnline.hu</a></td></tr>        
  <tr><td><a href="http://www.Delphi6.hu">http://www.Delphi6.hu</a></td></tr>        
</table>
Nézzük az oldal második példáját a Repater2 kontrollt. Ezzel a következőt valósítjuk meg: létrehozunk egy DataTable objektumot, melybe adatokat generálunk és ezt szintén egy táblázatban jelenítjük meg. Ezt megismerve már képesek leszünk arra is, hogy egy tetszőleges adatbázisból származó adatokat jelenítsünk meg a Repeater kontrollal, hiszen a DataTable objektum akkor éppúgy használható.
A DataTable létrehozását és az adatok generálását, most szintén a Page_Load eseménynél végezzük el.
             DataTable dt = new DataTable("Teszt");             
Három oszlopot hozunk létre a táblához, három különböző típussal.
             dt.Columns.Add(new DataColumn("IntegerValue", typeof(Int32)));
             dt.Columns.Add(new DataColumn("StringValue", typeof(string)));
             dt.Columns.Add(new DataColumn("DateValue", typeof(DateTime)));
Az adatok feltöltéséhez szükségünk lesz egy DataRow változóra.
             DataRow dr;
             DateTime d = DateTime.Now;
Az adatok feltöltését egy ciklussal végeztetjük el.
             for (int i=1; i<=10; i++) 
             {                
               dr = dt.NewRow();
               dr[0] = i;
               dr[1] = "String " + i.ToString();
               dr[2] = d.AddDays(i);
               dt.Rows.Add(dr);
             }             
Ha kész az adattáblánk, akkor a Repater-hez való hozzárendelést ugyanúgy végezhetjük el, mint az előbb, csak most a tábla DefaultView property-jét használjuk értékadáshoz, mivel ez szolgáltat DataView típust, melyet a Repeater képes kezelni.
             Repeater2.DataSource = dt.DefaultView;
             Repeater2.DataBind();
Ezek után szintén ki kell egészíteni a Repeater2 html kódját. Ezt most hasonlóan tesszük, mint az első példánál.
      <asp:Repeater id="Repeater2" runat="server">
A HeaderTemplate-nél hozzuk létre a táblázat fejlécét, most már három oszloppal.
        <HeaderTemplate>
          <table cellpadding="5" cellspacing="0">
            <tr>
              <td align="center" class="f9b">
                IntegerValue
              </td>
              <td align="center" class="f9b">
                StringValue
              </td>
              <td align="center" class="f9b">
                DateValue
              </td>
            </tr>
        </HeaderTemplate>
Az ItemTemplate-hez kerülnek a tábla sorai.
        <ItemTemplate>
          <tr>
            <td>
Itt az adatokat most nem tudjuk egyszerűen a Container objektum DataItem property-jén keresztül elérni, mivel most nem csak egy adatot tartalmaz, hanem hármat. A számunkra szükséges adat eléréséhez most a DataBinder objektum Eval függvényére van szükségünk. Ennek első paraméterként kell megadni az adatforrást, másodikként a szükséges adat nevét, mely most a táblánk adott oszlopának neve lesz.
              <%# DataBinder.Eval(Container.DataItem, "IntegerValue") %>
            </td>
            <td>
              <%# DataBinder.Eval(Container.DataItem, "StringValue") %>
            </td>
            <td>
              <%# DataBinder.Eval(Container.DataItem, "DateValue") %>
            </td>
          </tr>
        </ItemTemplate>
A FooterTemplate-nél szokás szerint zárjuk a HTML táblázatot.
        <FooterTemplate>
          </table>
        </FooterTemplate>
      </asp:Repeater>
Példánk harmadik részében ismét az elsőként létrehozott ArrayList objektum adatait használjuk fel, most viszont egy másik módszert választunk a Repeater kontrollnál.
Az adat hozzákapcsolását a kontrollhoz a Page_Load-nál végezzük el.
             ArrayList al = new ArrayList(); 
             ... 
             Repeater3.DataSource = al;
             Repeater3.DataBind();
Az adatok megjelenítését most nem táblázatos formában végezzük el, hanem más módon. Van a Repeater kontrollnak egy SeparatorTemplate parancsa is. Itt egy tetszőleges HTML kódot adhatunk meg. Ez a kód kerül bemásolásra minden elem közé, melyet az ItemTemplate-nél adunk meg.
        <asp:Repeater id="Repeater3" runat="server">
Ha tehát elválasztónak egy | karaktert adunk, meg akkor az adatok közé ez kerül be.
          <SeparatorTemplate>
            |
          </SeparatorTemplate>
Az ItemTemplate-nél most ugyanúgy adjuk meg az adatokat, mint az első példánál.
          <ItemTemplate>
            <a href="<%# Container.DataItem %>">
              <%# Container.DataItem %>
            </a>
          </ItemTemplate>
        </asp:Repeater>
Ennek eredménye pedig az alábbi HTML kód lesz:
            <a href="http://www.Animare.hu">http://www.Animare.hu</a>
            |
            <a href="http://www.SoftwareOnline.hu">http://www.SoftwareOnline.hu</a>
            |
            <a href="http://www.Delphi6.hu">http://www.Delphi6.hu</a>
Van még két fontos teendőnk, hogy a fent leírtak hiba nélkül működjenek is. Az egyik, hogy importálnunk kell a System.Data névteret, hogy a DataTable objektum használható legyen. Ezt a HTML oldal elején tudjuk megtenni a következő sor beszúrásával:
<%@ Import namespace="System.Data" %>
A másik teendő, hogy biztosítsuk a Page_Load esemény létrejöttét, mivel ez alapértelmezés szerint letiltott állapotban van. Ehhez a HTML oldalunk legelső sorában lévő AutoEventWireup paramétert kell igaz értékre állítanunk:
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="true" Inherits="RepeaterControl.WebForm1" %>