Using Repeater Control ASP.NET

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.

Capture

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.

Capture

Capture

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.

Capture

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>

Capture

Juga dengan menambahkan SeperatorTemplate seperti berikut.

   1: <SeparatorTemplate>
   2:                 <tr>
   3:                     <td colspan="4">
   4:                         &nbsp;
   5:                     </td>
   6:                 </tr>
   7:             </SeparatorTemplate>
Capture

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

Comments

Twitter Trackbacks for Using Repeater Control ASP.NET - Dani R Taufani - Microsoft User Group Indonesia [mugi.or.id] on Topsy.com wrote Twitter Trackbacks for Using Repeater Control ASP.NET - Dani R Taufani - Microsoft User Group Indonesia [mugi.or.id] on Topsy.com
on 08-30-2010 1:17

Pingback from  Twitter Trackbacks for                 Using Repeater Control ASP.NET - Dani R Taufani - Microsoft User Group Indonesia         [mugi.or.id]        on Topsy.com