Veysel Uğur KIZMAZ

Asp.Net Repeater Control Kullanımı

16.06.2012Okunma Sayısı: 7289Kategori: ASP.NET

 

ASP.Net’te DataTable, List vb. türlerde aldığımız verileri ekranda gösterebilmek için birçok yöntem olmasına rağmen en çok 4 kontrol kullanılmaktadır: GridView, DataList, ListView, Repeater. Bu makalemizde Repeater kontrolünün nasıl kullanıldığını inceleyeceğiz. İlerleyen makalelerimizde bu konuyu daha detaylandıracağız.
 
Repeater, dizaynı tamamen kullanıcı tasarımına bırakılmış ve çooğunlukla Source kodlarıyla işlem yapılan bir akontroldür. Gelen verimizi istediğimiz yere istediğimiz gibi ekleyebiliriz.  GridView’daki gibi tablolara bağımlılık söz konusu değildir.
 
Repeater kontrolü kullanılırken kontrol içindeki şablonlar (template’ler) hazırlanır ve bu template’ler çerçevesinde verilerimiz ekranda gösterilir. Kontrolümüzde 5 çeşit template bulunmaktadır:
 
ItemTemplate
Ekranda göstereceğimiz satırların tasarımını düzenlediğimiz şablondur.
AlternatingItemTemplate
Satırların tasarımlarının farklı olması isteniyorsa bu şablon sayesinde farklı tasaımlar da yapılabilmektedir.
HeaderTemplate
Verilerin üstündeki başlık alanıdır.
FooterTemplate
Verilerin altındaki alandır.
SeparatorTemplate
Her 2 satır arasındaki alanın tasarım şablonudur.
 
Şimdi bu kontrolümüzü bir örnek uygulama üzerinde inceleyelim. Yeni bir ASP.NET Web Application oluşturalım.
 
 
Oluşturduğumuz projede Default.aspx dosyamıza gidelim ve Toolbox’tan Data sekmesi altından Repeater kontrolünü sürükleyip ekrana bırakalım.
 
 
Sürükle bırak işleminden sonra sayfamızın Source kodu aşağıdaki gibi olacaktır.
 
  1. <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
  2.     CodeBehind="Default.aspx.cs" Inherits="AspNetRepeaterControl._Default" %>
  3.  
  4. <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
  5. </asp:Content>
  6. <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  7.     <asp:Repeater ID="Repeater1" runat="server">
  8.     </asp:Repeater>
  9. </asp:Content>
 
 
Ekranda ürünlerimizi listeleyeceğimiz bir yapı oluşturalım. Bunun için öncelikle bir ürün model sınıfı oluşturalım.
 
Urun.cs

 

 
  1. public class Urun
  2. {
  3.     public string UrunAd { get; set; }
  4.     public double UrunFiyat { get; set; }
  5. }

 

Default.aspx sayfamızın Page_Load methoduna gidelim ve ürünlerimi Repeater kontrolümüze bağlayalım.
 
Default.aspx.cs

 

 
  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3.     List<Urun> urunler = new List<Urun>
  4.     {
  5.         new Urun{UrunAd = "Kola",UrunFiyat = 2},
  6.         new Urun{UrunAd = "Meyve Suyu",UrunFiyat = 1},
  7.         new Urun{UrunAd = "Gazoz",UrunFiyat = 1},
  8.         new Urun{UrunAd = "Su",UrunFiyat = 0.5}
  9.    };
  10.     Repeater1.DataSource = urunler;
  11.     Repeater1.DataBind();
  12. }

 

 
Ürünleri Repeater’da göstermek için Source kodumuzda aşağıdaki düzenlemeleri yapalım ve inceleyelim.
 
Default.aspx

 

 
  1. <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
  2.     CodeBehind="Default.aspx.cs" Inherits="AspNetRepeaterControl._Default" %>
  3.  
  4. <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
  5. </asp:Content>
  6. <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  7.     <asp:Repeater ID="Repeater1" runat="server">
  8.         <ItemTemplate>
  9.             <div style="width:400px; height:20px;">
  10.                 <div style="width:150px; height:100%; float:left; font-weight:bold">
  11.                     <%#DataBinder.Eval(Container.DataItem,"UrunAd") %>
  12.                 </div>
  13.                 <div style="width:250px; height:100%; float:left">
  14.                     <b>:</b> <%#DataBinder.Eval(Container.DataItem,"UrunFiyat") %> TL
  15.                 </div>
  16.             <//div>
  17.         </ItemTemplate>
  18.     </asp:Repeater>
  19. </asp:Content>

 

 
1. Repeater’da verilerimizi listeleyeceğimiz ItemTemplate’i oluşturuyoruz.
 
  1. <ItemTemplate>
  2. </ItemTemplate>
2. Ürünlerin ekranda gösterebilmek için DataBinder.Eval methodunu kullanıyoruz. Buradaki Container.DataItem ile DataSource’a eklediğimiz (urunler listesi) veriyi alıyoruz ve ikinci parametrede bu verinin “UrunAd” özelliğini alıyoruz.
 
  1. <%#DataBinder.Eval(Container.DataItem,"UrunAd") %>
 
 
Benzer işlemi UrunFiyat için de gerçekleştiriyoruz.
 
Şimdi projemizi çalıştıralım ve ürünlerimizin gelip gelmediğini görelim.
 
 
Ürünlerimiz ekranda listelenmiştir.
Bir sonraki makalemizde Repeater kontrolünün HeaderTemplate, FooterTemplate ve SeparatorTemplate’lerini inceleyeceğiz.
 
 
 
Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
veysel@ugurkizmaz.com
www.ugurkizmaz.com