Posted in ASP.NET on Maret 21, 2008|
1 Comment »
REPEATER DI ASP.NET
Dalam ASP.NET ada sebuah object server control yang bernama Repeater yang fungsinya adalah menampilkan data
baik itu yang berasal dari Table ataupun View di Database untuk di Show di layar, fungsi Repeater ini berguna bila
kita ingin menampilkan data di layar secara berulang dalam bentuk label, textbox, dropdownlist dsb.
disini saya akan mempergunakan tabel mDataSiswa, berikut ini adalah tampilan web formnya :
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”frmRepeater.aspx.cs” Inherits=”frmRepeater” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>Untitled Page</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ style=”width: 100%”>
<tr>
<td style=”width: 10%”>
Contoh penggunaan Repeater</td>
<td style=”width: 90%”>
<asp:Repeater ID=”Repeater1″ runat=”server”>
<HeaderTemplate>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ style=”width:100%”>
<tr>
<th>
<asp:Label ID=”lblNIS” Text=”NIS” runat=”server” Width=”100px”></asp:Label>
</th>
<th>
<asp:Label ID=”lblNamaSiswa” Text=”Nama Siswa” runat=”server” Width=”150px”></asp:Label>
</th>
<th>
<asp:Label ID=”lblAlamat” Text=”Alamat” runat=”server” Width=”200px”></asp:Label>
</th>
<th>
<asp:Label ID=”lblTelepon” Text=”Telepon” runat=”server” Width=”100px”></asp:Label>
</th>
<th>
<asp:Label ID=”lblJenisKelamin” Text=”JenisKelamin” runat=”server” Width=”50px”></asp:Label>
</th>
<th>
<asp:Label ID=”lblNamaOrtu” Text=”Nama Ortu” runat=”server” Width=”150px”></asp:Label>
</th>
<th>
<asp:Label ID=”lblPekerjaan” Text=”Pekerjaan” runat=”server” Width=”150px”></asp:Label>
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td style=”width:100px” align=”center”>
<%# DataBinder.Eval(Container.DataItem,”NIS”) %>
</td>
<td style=”width:150px” align=”center”>
<%# DataBinder.Eval(Container.DataItem, “NamaSiswa”) %>
</td>
<td style=”width:200px” align=”center”>
<%# DataBinder.Eval(Container.DataItem, “Alamat”) %>
</td>
<td style=”width:100px” align=”center”>
<%# DataBinder.Eval(Container.DataItem, “Telepon”) %>
</td>
<td style=”width:50px” align=”center”>
<%# DataBinder.Eval(Container.DataItem, “JenisKelamin”) %>
</td>
<td style=”width:150px” align=”center”>
<%# DataBinder.Eval(Container.DataItem, “NamaOrtu”) %>
</td>
<td style=”width:150px” align=”center”>
<%# DataBinder.Eval(Container.DataItem, “Pekerjaan”) %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
disini kita memakai object repeater dengan tag <asp:Repeater ID=”Repeater1″ runat=”server”>
<HeaderTemplate>
<Table> adalah tag awal membuat table
<Tr> adalah tabel Row yaitu row yang ada di dalam tabel
<Th> adalah tabel header yaitu tulisa yang ada di bagian paling atas tabel
di antara tag <th></th> kita bisa memberikan object label,textbox dsb untuk di tampilkan keterangan dari column yang di buat
</HeaderTemplate>
<ItemTemplate>
<td> adalah tabel data yaitu tempat di mana data di tiap column di tampilkan
<%# DataBinder.Eval(Container.DataItem,”NIS”) %> adalah perintah ASP.NET yang mana di column tersebut akan di tampilkan NIS dari Tabel mDataSiswa
</ItemTemplate>
<FooterTemplate>
pada bagian ini adalah bagian paling bawah dari Template Repeater dan kita harus beri tag </table> bila tidak maka perintah HTML akan Invalid dan
berakibat repeater tidak benar dalam melakukan pengulangan membaca data.
</FooterTemplate>
Sedangkan perintah di Code behindnya adalah sbb:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class frmRepeater : System.Web.UI.Page
{
private string csql;
private cnConnection cn = new cnConnection();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
LoadRepeater();
}
}
private void LoadRepeater()
{
csql = “Select * from mDataSiswa”;
DataTable dt = cn.getDataset(csql, “mDataSiswa”).Tables[0];
Repeater1.DataSource = dt;
Repeater1.DataBind();
}
}
Disini tabel mDataSiswa di simpan di Object dt (DataTable) yang selanjutnya object dt tersebut akan di gunakan oleh
object Repeater dengan nama Repeater1
Read Full Post »