Kontrol Repeater – Mengenal ASP.NET Bagian 3.6

February 16th 2010

Repeater kontrol yang digunakan untuk menampilkan daftar ulang item yang terikat untuk kontrol.

Mengikat sebuah DataSet ke Repeater Control

Repeater kontrol yang digunakan untuk menampilkan daftar ulang item yang terikat untuk kontrol. Repeater kontrol yang dapat terikat pada tabel database, file XML, atau daftar item lain. Di sini kita akan memperlihatkan cara untuk mengikat sebuah file XML ke Repeater kontrol.

Kita akan menggunakan file XML berikut contoh kami ( “cdcatalog.xml”):

<?xml version="1.0" encoding="ISO-8859-1"?>

 <catalog>
 <cd>
 <title>Empire Burlesque</title>
 <artist>Bob Dylan</artist>
 <country>USA</country>
 <company>Columbia</company>
 <price>10.90</price>
 <year>1985</year>
 </cd>
 <cd>
 <title>Hide your heart</title>
 <artist>Bonnie Tyler</artist>
 <country>UK</country>
 <company>CBS Records</company>
 <price>9.90</price>
 <year>1988</year>
 </cd>
 <cd>
 <title>Greatest Hits</title>
 <artist>Dolly Parton</artist>
 <country>USA</country>
 <company>RCA</company>
 <price>9.90</price>
 <year>1982</year>
 </cd>
 <cd>
 <title>Still got the blues</title>
 <artist>Gary Moore</artist>
 <country>UK</country>
 <company>Virgin records</company>
 <price>10.20</price>
 <year>1990</year>
 </cd>
 <cd>
 <title>Eros</title>
 <artist>Eros Ramazzotti</artist>
 <country>EU</country>
 <company>BMG</company>
 <price>9.90</price>
 <year>1997</year>
 </cd>
 </catalog>

Pertama, impor “System.Data” namespace. Namespace ini kita perlu untuk bekerja dengan objek DataSet. Sertakan direktif berikut pada bagian atas sebuah. Aspx halaman:

<%@ Import Namespace="System.Data" %>

Kemudian, ciptakan sebuah DataSet untuk load file XML dan file XML ke dalam DataSet saat halaman pertama loaded:

<script runat="server">
 sub Page_Load
 if Not Page.IsPostBack then
 dim mycdcatalog=New DataSet
 mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
 end if
 end sub

Lalu kita menciptakan kontrol Repeater dalam. Halaman aspx. Isi dari elemen yang diberikan <HeaderTemplate> pertama dan hanya sekali dalam output, maka isi elemen <ItemTemplate> akan diulang untuk setiap “catatan” dalam DataSet, dan terakhir, isi unsur <FooterTemplate> diberikan kali dalam output:

<html>
 <body>

 <form runat="server">
 <asp:Repeater id="cdcatalog" runat="server">

 <HeaderTemplate>
 ...
 </HeaderTemplate>

 <ItemTemplate>
 ...
 </ItemTemplate>

 <FooterTemplate>
 ...
 </FooterTemplate>

 </asp:Repeater>
 </form>

 </body>
 </html>

Lalu kita tambahkan script yang menciptakan mengikat DataSet dan DataSet ke mycdcatalog Repeater kontrol. Kami juga mengisi Repeater control dengan tag HTML dan mengikat data item ke sel-sel di bagian dengan <ItemTemplate> <% # Container.DataItem ( “fieldName”)%> Metode:

<%@ Import Namespace="System.Data" %>

 <script runat="server">
 sub Page_Load
 if Not Page.IsPostBack then
 dim mycdcatalog=New DataSet
 mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
 cdcatalog.DataSource=mycdcatalog
 cdcatalog.DataBind()
 end if
 end sub
 </script>

 <html>
 <body>

 <form runat="server">
 <asp:Repeater id="cdcatalog" runat="server">

 <HeaderTemplate>
 <table border="1" width="100%">
 <tr>
 <th>Title</th>
 <th>Artist</th>
 <th>Country</th>
 <th>Company</th>
 <th>Price</th>
 <th>Year</th>
 </tr>
 </HeaderTemplate>

 <ItemTemplate>
 <tr>
 <td><%#Container.DataItem("title")%></td>
 <td><%#Container.DataItem("artist")%></td>
 <td><%#Container.DataItem("country")%></td>
 <td><%#Container.DataItem("company")%></td>
 <td><%#Container.DataItem("price")%></td>
 <td><%#Container.DataItem("year")%></td>
 </tr>
 </ItemTemplate>

 <FooterTemplate>
 </table>
 </FooterTemplate>

 </asp:Repeater>
 </form>

 </body>
 </html>

Menggunakan <AlternatingItemTemplate>

Anda dapat menambahkan elemen <AlternatingItemTemplate> setelah elemen <ItemTemplate> untuk menggambarkan kemunculan bolak-baris output. Pada contoh berikut saling baris dalam tabel akan ditampilkan dalam warna abu-abu terang:

<%@ Import Namespace="System.Data" %>

 <script runat="server">
 sub Page_Load
 if Not Page.IsPostBack then
 dim mycdcatalog=New DataSet
 mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
 cdcatalog.DataSource=mycdcatalog
 cdcatalog.DataBind()
 end if
 end sub
 </script>

 <html>
 <body>

 <form runat="server">
 <asp:Repeater id="cdcatalog" runat="server">

 <HeaderTemplate>
 <table border="1" width="100%">
 <tr>
 <th>Title</th>
 <th>Artist</th>
 <th>Country</th>
 <th>Company</th>
 <th>Price</th>
 <th>Year</th>
 </tr>
 </HeaderTemplate>

 <ItemTemplate>
 <tr>
 <td><%#Container.DataItem("title")%></td>
 <td><%#Container.DataItem("artist")%></td>
 <td><%#Container.DataItem("country")%></td>
 <td><%#Container.DataItem("company")%></td>
 <td><%#Container.DataItem("price")%></td>
 <td><%#Container.DataItem("year")%></td>
 </tr>
 </ItemTemplate>

 <AlternatingItemTemplate>
 <tr bgcolor="#e8e8e8">
 <td><%#Container.DataItem("title")%></td>
 <td><%#Container.DataItem("artist")%></td>
 <td><%#Container.DataItem("country")%></td>
 <td><%#Container.DataItem("company")%></td>
 <td><%#Container.DataItem("price")%></td>
 <td><%#Container.DataItem("year")%></td>
 </tr>
 </AlternatingItemTemplate>

 <FooterTemplate>
 </table>
 </FooterTemplate>

 </asp:Repeater>
 </form>

 </body>
 </html>

Menggunakan <SeparatorTemplate>
<SeparatorTemplate> Elemen yang dapat digunakan untuk menggambarkan sebuah pemisah antara setiap record. Contoh berikut menyisipkan garis horizontal di antara setiap baris tabel:

<%@ Import Namespace="System.Data" %>

 <script runat="server">
 sub Page_Load
 if Not Page.IsPostBack then
 dim mycdcatalog=New DataSet
 mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
 cdcatalog.DataSource=mycdcatalog
 cdcatalog.DataBind()
 end if
 end sub
 </script>

 <html>
 <body>

 <form runat="server">
 <asp:Repeater id="cdcatalog" runat="server">

 <HeaderTemplate>
 <table border="0" width="100%">
 <tr>
 <th>Title</th>
 <th>Artist</th>
 <th>Country</th>
 <th>Company</th>
 <th>Price</th>
 <th>Year</th>
 </tr>
 </HeaderTemplate>

 <ItemTemplate>
 <tr>
 <td><%#Container.DataItem("title")%></td>
 <td><%#Container.DataItem("artist")%></td>
 <td><%#Container.DataItem("country")%></td>
 <td><%#Container.DataItem("company")%></td>
 <td><%#Container.DataItem("price")%></td>
 <td><%#Container.DataItem("year")%></td>
 </tr>
 </ItemTemplate>

 <SeparatorTemplate>
 <tr>
 <td colspan="6"><hr /></td>
 </tr>
 </SeparatorTemplate>

 <FooterTemplate>
 </table>
 </FooterTemplate>

 </asp:Repeater>
 </form>

 </body>
 </html>

Contoh running program: