Veysel Uğur KIZMAZ

Asp.Net Repeater Kontrolü ile Sayfalama (Paging)

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

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 { get; set; }
  4.     public double UrunFiyat { get; set; }
  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 { get; set; }
  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
Bilgisayar Mühendisi
veysel@ugurkizmaz.com
www.ugurkizmaz.com