"/>"/>
Yazılım Dilleri
Asp.Net 4.5 Kitabı
Skip Navigation Links

Asp.Net Repeater Kontrolü ile Sayfalama (Paging)

Asp.Net Repeater Kontrolü ile sayfalama (Paging) işleminin nasıl yapıldığını inceleyelim.

Bu makalemizde Asp.Net Repeater kontrolünde sayfalama işlemiyle ilgili bir örnek uygulama yapacağız.

Uygulamamızda 5 adet ürümünüz olacak ve bu ürünleri her sayfada 2 ürün olacak şekilde listeleyip İLERİ ve GERİ butonlarıyla önceki ve sonraki sayfalara ulaşarak inceleyeceğiz.
 
Yeni bir Asp.Net Web Application oluşturalım ve bu uygulamamıza ürünler için kullanacağımız ürün modelimizi (Urun.cs sınıfı) ekliyoruz.
 
Urun.cs
 
  1. public class Urun
  2. {
  3.     public string UrunAd { getset; }
  4.     public double UrunFiyat { getset; }
  5. }
Hazırlanan ürünleri ekranda göstermek için Default.aspx dosyamızda daha önceki uygulamalarda yaptığımız işlemleri uyguluyoruz.
 
Default.aspx
 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Paging.aspx.cs" Inherits="AspNetRepeaterControl.Paging" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <title></title>
  8. </head>
  9. <body>
  10.     <form id="form1" runat="server">
  11.         <div style ="font-family:Trebuchet MS; font-size:10pt">
  12.             <asp:Repeater ID="Repeater1" runat="server">
  13.                 <HeaderTemplate>
  14.                     <div style="width:600px; height:20px; background-color:Yellow; color:Red; text-align:center; font-weight:bold">
  15.                         Başlık
  16.                     </div>
  17.                 </HeaderTemplate>
  18.                 <ItemTemplate>
  19.                     <div style="width:600px; height:20px;">
  20.                         <div style="width:150px; height:100%; float:left; font-weight:bold; background-color:Red; color:Yellow;">
  21.                             <%#DataBinder.Eval(Container.DataItem,"UrunAd") %>
  22.                         </div>
  23.                         <div style="width:450px; height:100%; float:left; background-color:Red; color:Yellow;">
  24.                             <b>:</b> <%#DataBinder.Eval(Container.DataItem,"UrunFiyat") %> TL
  25.                         </div>
  26.                     <//div>
  27.                 </ItemTemplate>
  28.                 <AlternatingItemTemplate>
  29.                     <div style="width:600px; height:20px;">
  30.                         <div style="width:150px; height:100%; float:left; font-weight:bold; background-color:Yellow; color:Red;">
  31.                             <%#DataBinder.Eval(Container.DataItem,"UrunAd") %>
  32.                         </div>
  33.                         <div style="width:450px; height:100%; float:left; background-color:Yellow; color:Red;">
  34.                             <b>:</b> <%#DataBinder.Eval(Container.DataItem,"UrunFiyat") %> TL
  35.                         </div>
  36.                     <//div>
  37.                 </AlternatingItemTemplate>
  38.                 <FooterTemplate>
  39.                     <div style="width:600px; height:20px; background-color:Black; color:White; text-align:center; font-weight:bold">
  40.                         Kayıt Sonu
  41.                     </div>
  42.                 </FooterTemplate>
  43.             </asp:Repeater>
  44.             <div style="width:600px; height:20px;">
  45.                 <div style="width:50px; height:100%; float:left">
  46.                     <asp:Button ID="btGeri" runat="server" Text="GERİ" Width="50px"
  47.                         onclick="btGeri_Click" />
  48.                 </div>
  49.                 <div style="width:500px; height:100%; float:left; text-align:center">
  50.                     <asp:Label ID="lbSayfaBilgi" runat="server" Text=" "></asp:Label>
  51.                 </div>
  52.                 <div style="width:50px; height:100%; float:left">
  53.                     <asp:Button ID="btIleri" runat="server" Text="İLERİ" Width="50px"
  54.                         onclick="btIleri_Click" />
  55.                 </div>
  56.             </div>
  57.         </div>
  58.     </form>
  59. </body>
  60. </html>
Repeater’dan sonra yeni bir div oluşturup bu div içinde İLERİ ve GERİ butonlarını yerleştiriyoruz. Butonların ortasına da bulunduğumuz sayfa bilgilerini yerleştireceğimiz LABEL’ı yerleştiriyoruz.
 
Şimdi Default.aspx.cs dosyasına gidelim ve verimizi alıp sayfalayıp ekranda gösterelim.
 
Default.aspx.cs
 
  1. public partial class Paging : System.Web.UI.Page
  2.     {
  3.         private int SayfaNumarasi
  4.         {
  5.             get
  6.             {
  7.                 if (ViewState["SayfaNumarasi"] != null)
  8.                     return Convert.ToInt32(ViewState["SayfaNumarasi"]);
  9.                 return 0;
  10.             }
  11.             set
  12.             {
  13.                 ViewState["SayfaNumarasi"] = value;
  14.             }
  15.         }
  16.         private int SayfaAdedi
  17.         {
  18.             get
  19.             {
  20.                 if (ViewState["SayfaAdedi"] != null)
  21.                     return Convert.ToInt32(ViewState["SayfaAdedi"]);
  22.                 return 0;
  23.             }
  24.             set { ViewState["SayfaAdedi"] = value; }
  25.         }
  26.         public PagedDataSource SayfadakiVeri { getset; }
  27.  
  28.         private List<Urun> urunler = new List<Urun>
  29.             {
  30.                 new Urun{UrunAd = "Kola",UrunFiyat = 2},
  31.                 new Urun{UrunAd = "Meyve Suyu",UrunFiyat = 1},
  32.                 new Urun{UrunAd = "Gazoz",UrunFiyat = 1},
  33.                 new Urun{UrunAd = "Su",UrunFiyat = 0.5},
  34.                 new Urun{UrunAd = "Süt", UrunFiyat = 1.5}
  35.             };
  36.  
  37.         protected void Page_Load(object sender, EventArgs e)
  38.         {
  39.             if (!IsPostBack)
  40.             {
  41.                 SayfaKaydiniGetir();
  42.             } 
  43.         }
  44.         private void SayfaKaydiniGetir()
  45.         {
  46.             SayfadakiVeri = new PagedDataSource()
  47.                 {
  48.                     DataSource = urunler,
  49.                     AllowPaging = true,
  50.                     PageSize = 2,
  51.                     CurrentPageIndex = SayfaNumarasi
  52.                 };
  53.             //
  54.             Repeater1.DataSource = SayfadakiVeri;
  55.             Repeater1.DataBind();
  56.  
  57.             SayfaAdedi = SayfadakiVeri.PageCount - 1;
  58.             //
  59.             lbSayfaBilgi.Text = "Sayfa " + (SayfadakiVeri.CurrentPageIndex + 1) + "/" + SayfadakiVeri.PageCount + " - Kayıt Sayısı " + (SayfadakiVeri.DataSourceCount);
  60.             //
  61.             btGeri.Enabled = !SayfadakiVeri.IsFirstPage;
  62.             btIleri.Enabled = !SayfadakiVeri.IsLastPage;
  63.  
  64.         }
  65.  
  66.         protected void btGeri_Click(object sender, EventArgs e)
  67.         {
  68.             SayfaNumarasi -= 1;
  69.             SayfaKaydiniGetir();
  70.         }
  71.  
  72.         protected void btIleri_Click(object sender, EventArgs e)
  73.         {
  74.             SayfaNumarasi += 1;
  75.             SayfaKaydiniGetir();
  76.         }
  77.  
  78.     }
 
 
Kodumuzu inceleyelim:
 
1. SayfaNumasi : Kaçıncı sayfada olduğumuzu tutan özelliğimiz
 
2. SayfaAdedi : Toplamda kaç sayfamız olduğunu tutan özelliğimiz
 
3. SayfadakiVeri : PagedDataSource türündeki özelliğimiz, verilerimizi sayfalamamızı ve “şu sayfadaki veriyi ver” işlemini sağlamaktadır. Page_Load methodunda bu özelliğe hangi sayfanın verisinin gösterileceği değeri atanmıştır:
 
- Veri kaynağı (DataSource) = urunler,
- Sayfalama yapılacak mı (AllowPaging) = true,
- Sayfadaki eleamn sayısı (PageSize) = 2,
- Şu anda bulunulan sayfa numarası (CurrentPageIndex) = SayfaNumarasi
 
4. urunler : Ekranda göstereceğimiz ürünlerimiz.
 
5. Page_Load methodunda Repeater1’in DataSource’u (veri kaynağı) = SayfadakiVeri olarak gösterilmiştir. Bunun nedeni, tüm verimizi değil, sayfada alacağımız (bulunulan sayfanın)  veri gösterilecektir.
 
6. Label’a sayfa ve kayıt sayısını yazdırıyoruz. Burada,

- CurrentPageIndex ile hangi sayfada olduğumuzu,
- DataSourceCount ile toplam kaç kaydımızın olduğunu,
- PageCount ile toplam sayfa sayımızı
 
alıyoruz.
 
7. btIleri’nin Enable özelliğini, şu an son sayfada isek false, değilsek true olacak şekilde ayarlıyoruz.
 
8. btGeri’nin Enable özelliğini, şu an ilk sayfada isek false, değilsek true olacak şekilde ayarlıyoruz.
 
9. btIleri_Click() eventında, sayfa numaramızı 1 artırıp SayfaKaydiniGetir() methodu ile SayfadakiVeri değerimizi yeniden dolduruyoruz.
 
10. btIGeri_Click() eventında, sayfa numaramızı 1 azaltıp SayfaKaydiniGetir() methodu ile SayfadakiVeri değerimizi yeniden dolduruyoruz.
 
Projemizi çalıştıralım.
 
 
İleri butonuna basalım.
 
 
Tekrar ileri butonuna basalım.
 
 
 
 
 
Veysel Uğur KIZMAZ
 

Yorumlar (4)

  1. Avatar
    anlaşılmıyor

    31.07.2012

    merhaba hocam çok karışık olmuş. anlaşılması çok zor

  2. Avatar
    Bally

    04.02.2013

    ilk yapanlar için çok zor ama detaylı olmuş

  3. Avatar
    billy shawn

    28.02.2013

    çalışıyor demişsin ama bu kodlar bozuk dostum

  4. Avatar
    Veysel Uğur KIZMAZ

    28.02.2013

    @billyShawn form içerisindeki kodlari çalistirinca alinan ekran görüntüsü onlar zaten. Çalismazsa zaten yayinlamam makaleyi. Yanlis yaptigin bir yer vardir. Dikkatli kopyala yapistir, çalisir ;)

Yorum Yap

Mail listesine katılmak için tıklayınız

Hakkımdaki son bilgilere anlık erişmek için mail listesine katılabilirsiniz.