Pada Visual Studio telah tersedia pada toolbox tab Data control. Pada Data control berisi control-control yang dapat kita gunakan untuk menampilkan, menambah, mengedit, mengupdate & menghapus data.
Pada tutorial ini kita akan membahas mengenai Repeater control. Repeater control memungkinkan Anda untuk membuat template, template tersebut digunakan untuk menentukan letak content-nya. Berikut template-template yang terdapat pada repeater control:
ItemTemplate - Digunakan untuk element yang dirender sekali per baris data. AlternatingItemTemplate – Digunakan untuk element yang dirender setiap baris data lainnya. Hal ini memungkinkan Anda untuk warna background alternatif, misalnya. HeaderTemplate – Digunakan untuk element yang ingin dirender satu kali sebelum bagian ItemTemplate Anda. FooterTemplate – Digunakan untuk element yang ingin dirender sekali setelah bagian ItemTemplate Anda. SeperatorTemplate – Digunakan untuk memisahkan setiap baris, seperti line break atau horisontal line.
Selanjutnya kita akan mencoba membuat repeater control di ASP.NET. Sebelumnya kita harus menyiapkan data yang akan ditampilkan ke website dan juga DataSource-nya. Untuk datasource tersedia beberapa pilihan sepert AccessDataSource, EntityDataSource, LinqDataSource, ObjectDataSource,SqlDataSource, SiteMapDataSource dan XmldataSource.
Pada tutorial ini saya menggunakan database Mahasiswa dan LINQ to SQL untuk datasource-nya.
Tambahkan LinqDataSource kedalam file aspx.
1: <asp:LinqDataSource ID="dsMahasiswa" runat="server">
2: </asp:LinqDataSource>
Setelah Database dan Datasource tersedia, tambahkan code berikut.
1: <asp:Repeater ID="rptMahasiswa" runat="server">
2: <HeaderTemplate>
3: <table cellpadding="2" cellspacing="0" border="1">
4: <tr>
5: <th>
6: NIM
7: </th>
8: <th>
9: Nama
10: </th>
11: <th>
12: Alamat
13: </th>
14: <th>
15: Kelas
16: </th>
17: </tr>
18: </HeaderTemplate>
19: <ItemTemplate>
20: <tr>
21: <td>
22: <%# DataBinder.Eval(Container.DataItem, "NIM") %>
23: </td>
24: <td>
25: <%# DataBinder.Eval(Container.DataItem, "Nama") %>
26: </td>
27: <td>
28: <%# DataBinder.Eval(Container.DataItem, "Alamat") %>
29: </td>
30: <td>
31: <%# DataBinder.Eval(Container.DataItem, "Kelas") %>
32: </td>
33: </tr>
34: </ItemTemplate>
35: <FooterTemplate>
36: </table>
37: </FooterTemplate>
Pada code behind tambahkan code berikut. Saya menggunakan OrderBy untuk mengurutkan data berdasarkan NIM.
1: protected void Page_Load(object sender, EventArgs e)
2: {
3: MahasiswaDataContext db = new MahasiswaDataContext();
4: rptMahasiswa.DataSource = db.Mahasiswas.OrderBy(n => n.NIM);
5: rptMahasiswa.DataBind();
6: }
Jika sudah, klik Start Debugging (F5), maka akan menghasilkan seperti berikut.
Selain cara diatas kita juga bisa merender data dengan langkah-langkah berikut.
1. Tambahkan Import directive namespace
1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DemoRepeaterControl._Default" %>
2: <%@ Import Namespace="DemoRepeaterControl" %>
2. Ubah code ItemTemplate, seperti berikut.
1: <ItemTemplate>
2: <tr>
3: <td>
4: <%# ((Mahasiswa)Container.DataItem).NIM %>
5: </td>
6: <td>
7: <%# ((Mahasiswa)Container.DataItem).Nama %>
8: </td>
9: <td>
10: <%# ((Mahasiswa)Container.DataItem).Alamat %>
11: </td>
12: <td>
13: <%# ((Mahasiswa)Container.DataItem).Kelas %>
14: </td>
15: </tr>
16: </ItemTemplate>
Jika sudah, klik Start Debugging (F5), untuk melihat hasilnya.
Bagaimana jika kita ingin menampilkan data itemnya dengan menggunakan Literal control?
1. Pertama kita tambahkan literal controlnya.
1: <ItemTemplate>
2: <tr>
3: <td>
4: <asp:Literal ID="ltrNim" runat="server"></asp:Literal>
5: </td>
6: <td>
7: <asp:Literal ID="ltrNama" runat="server"></asp:Literal>
8: </td>
9: <td>
10: <asp:Literal ID="ltrAlamat" runat="server"></asp:Literal>
11: </td>
12: <td>
13: <asp:Literal ID="ltrKelas" runat="server"></asp:Literal>
14: </td>
15: </tr>
16: </ItemTemplate>
2. Kemudian buat sebuah event ItemDataBound pada repeater.
1: <asp:Repeater ID="rptMahasiswa" runat="server"
2: onitemdatabound="rptMahasiswa_ItemDataBound">
3. Tambahkan method berikut pada code behind anda.
1: protected void rptMahasiswa_ItemDataBound(object sender, RepeaterItemEventArgs e)
2: {
3: Literal ltrNim = e.Item.FindControl("ltrNim") as Literal;
4: Literal ltrNama = e.Item.FindControl("ltrNama") as Literal;
5: Literal ltrAlamat = e.Item.FindControl("ltrAlamat") as Literal;
6: Literal ltrKelas = e.Item.FindControl("ltrKelas") as Literal;
7:
8: if (ltrNim is Literal)
9: {
10: Mahasiswa mhs = e.Item.DataItem as Mahasiswa;
11:
12: ltrNim.Text = mhs.NIM;
13: ltrNama.Text = mhs.Nama;
14: ltrAlamat.Text = mhs.Alamat;
15: ltrKelas.Text = mhs.Kelas;
16: }
17: }
Anda juga dapat menambahkan AlternatingItemTemplate seperti berikut.
1: <AlternatingItemTemplate>
2: <tr style="background-color:Gray">
3: <td>
4: <asp:Literal ID="ltrNim" runat="server"></asp:Literal>
5: </td>
6: <td>
7: <asp:Literal ID="ltrNama" runat="server"></asp:Literal>
8: </td>
9: <td>
10: <asp:Literal ID="ltrAlamat" runat="server"></asp:Literal>
11: </td>
12: <td>
13: <asp:Literal ID="ltrKelas" runat="server"></asp:Literal>
14: </td>
15: </tr>
16: </AlternatingItemTemplate>
Juga dengan menambahkan SeperatorTemplate seperti berikut.
1: <SeparatorTemplate>
2: <tr>
3: <td colspan="4">
4:
5: </td>
6: </tr>
7: </SeparatorTemplate>
Summary
Referensi mengenai penggunaan repeater control dapat anda temukan juga di MSDN http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.repeater.aspx
Source code tutorial ini dapat anda download di http://www.mediafire.com/?s7bdav1yf4f0bbi
P.S: In addition to blogging, I have recently been using Twitter to-do quick posts and share links. You can follow me on Twitter @danitaufani
Posted
Aug 30 2010, 12:37 AM
by
Dani R Taufani