PagedList kullanarak verileri sayfalama

Verileri sayfalamak iyidir :D Giriş için cümle bulamıyorum resmen, neyse siz girdik sayın :)

Sağa sola bulaşmadan Nuget Gallery den PagedList.Mvc paketini projemize ekliyoruz. Nasıl ekliyoruz sorusunun cevabını burada bulabilirsiniz. PagedList açık kaynak bir proje, github sayfasına buradan ulaşabilirsiniz.


Okumaya devam et PagedList kullanarak verileri sayfalama

Ajax ile daha fazla kayıt göster olayı (Load More Data)

Yine kullanımını ilk olarak Facebook ve Twitter’ dan gördüğümüz bu olayın temel mantığını bildiğimiz sayfalama oluşturuyor. Neden bu şekilde bir sayfalama kullanmak gerekiyor isterseniz bunlara bir bakalım.

  1. Sayfa komple yenilenmeyeceğinden daha işlevsel. Örneğin; kullanıcı video izlerken altında ki yorumları sayfa sayfa dolaşmak isterse, video yarıda kesilmeyecektir.
  2. Sayfanın sadece ilgili yerini, ilgili kayıtlar kadar güncelleyeceğimizden daha performanslı. Bu performans sunucu tarafında; daha az sistem kaynağı tüketimi, kullanıcı tarafında ise; sayfanın yüklenme süresi olarak gözlenebilir. Özetlersek sunucudan yapılan isteği minimize etmiş oluyoruz.

Çektiğim videoların birinde dile getirdiğim bir konu vardı, yukarıda ki maddeleri görünce yazılı olarak da eklemek istedim. Anlık çok fazla kullanıcıya, çok fazla isteğe cevap verme durumunda olan siteler ajaxı bizim kara kaşımıza yada şekilli olsun afilli olsun diye kullanmıyor. Örneğin Facebook her işlemde sayfayı yeniden yüklemeye kalkarsa altından kalkılamaz bir yükle karşı karşıya kalır. Anlık Facebook’ a yazılan yorum, mesaj yada benzeri girdileri düşündüğümüzde ajaxın hava yastığı görevi gördüğünü hayal etmek güç olmasa gerek. Özetlemek gerekirse, ajax yaklaşımı şekilden ibaret değildir ;) Konumuza geri dönelim.

Okumaya devam et Ajax ile daha fazla kayıt göster olayı (Load More Data)

GridView ile çalışmak ve püf noktaları

Uzun bir aradan sonra kontrollerimizi tanımaya kaldığımız yerden devam ediyoruz. Ana hatlarıyla anlatmaya çalışacağım kontrol namı diğer GridView1 :) Çok fazla detaya girmeden en sık kullanılan özelliklerini ve jQuery ile birlikte neler yapabileceğimize vakit kaybetmeden bir göz atalım.

GridView, bir veri kaynağından gelen veriyi ekrana liste şeklinde basan kontrolümüz. Bir çok yerde kullandığımız bu kontrolde, sayfalama ve sıralama işlemlerini rahatlıkla yapabiliyoruz. Okumaya devam et GridView ile çalışmak ve püf noktaları

Datalist ile kayıtları kolay bir şekilde sayfalama.

DataGrid ile sayfalama işlemini 2 satır kodla yapabilirken bu durum DataList için biraz farklı. Birden fazla sayfalama şekli bulunuyor. İnternette en basit şekilde nasıl
yapılabilirin yollarını ararken şunu gördüm, kabaca iki şekil bulunuyor. Birincisi PagedDataSource nesnesini kullanarak sayfalama yapmak, diğeride benim izlediğim yol tarzı yöntemler.
Araştırmalarımda üçüncü bir yola rastlamadım.

Gelelim mekanızmamıza, başlıkta kolay ifadesinin geçmesinin sebebini açıklayayım hemen. Eğer araştırma yaparsanız bu teknikte genelde birden fazla method kullanılıyor,
bir methotda toplam kayıt sayısı bulunuyor, (düşünün datalist içinde sayfalayacığınız bilglerin gösterimi için kullanacağınız sql cümlenizin hem burada hemde verilerin listeleneceği yerde aynı olması gerekirki buda ek külfet demek.) diğerinde sayfalama işlemleri yapılıyor vb..
Ben burda tek method altında tüm sayfalama işlemlerini toplamaya çalıştım.
Direk kodları burdan kopyala yapıştır yaparak, sadece tablo adını be veritabanınıza bağlantı cümlenizi değiştirerek kullanabilirsiniz. Sayfalamamız göze hoş gelsin diye
birazcık sitil ayarlarını değiştiriyoruz. Kodlarla ilgili açıklamaları karşılarına dilimin döndüğü kadar yazmaya çalıştım. Umarım işinize yarar.
Başka yazıda görüşmek üzere hoşçakalın.

Tasarım kısmımız;

.sayfalama a{
    display:block;
    float:left;
    border:1px solid #ededed;
    padding:5px;
    width:15px;
    text-decoration:none;
    font-weight:bold;
    background-color:#f2f2f2;
    margin:2px;
    text-align:center;
    color:Black;
}
.sayfalama a:hover{
    border:1px solid #c0c0c0
}
.sayfalama .aktif{
    display:block;
    float:left;
    border:1px solid #ededed;
    padding:5px;
    width:15px;
    text-decoration:none;
    font-weight:bold;
    background-color:#da010d;
    margin:2px;
    text-align:center;
    color:white;
}
[/html]
<asp:DataList ID="DataList1" runat="server"></asp:DataList>
<div class="sayfalama">
    <asp:Label runat="server" ID="sayfalar"></asp:Label>
</div>
<asp:Label runat="server" ID="kayitbulunamadi"></asp:Label>

Kod kısmımız;

   protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataBind();
        }
    }
 

    private void DataBind()
    {
        SqlConnection conn = new SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings["baglanti"].ToString());
        //ben burda web.config içindeki sql bağlantısı cümlesini kullanıyorum.
        SqlDataAdapter objDA = new SqlDataAdapter("Select * From TabloAdi", conn);
        DataSet objDS = new DataSet();

        //Değişkenlerimiz
        int goruntulenecekKayitSayisi=5; //bir sayfadaki kayıt sayısı
        int toplamKayitSayisi=0; //Tablomuzdaki toplam kayıt sayısı
        int toplamSayfaSayisi = 0; //Toplam sayfa sayısı
        int ilkKayit = 0; //Listelemeye başlanılacak kayıt sayısı
        int sayfa; //Sayfamız

        string adresEk = Request.QueryString.ToString(); //Burada QueryStringle tarayıcıdaki adresi alıyoruz.
        												//Amacamız şu diyelimki sayfanızda değişken querystringler var, yani Sayfamiz.aspx?Islem=Deneme&Kat=3
        												//Burdaki değişkenleri aynen alıp sayfa numaramızı replace ediyoruz ve herzaman sabit bir adres elde etmiş oluyoruz.
        												//Sayfamiz.aspx?Islem=Deneme&Kat=3&Sayfa=1 , Sayfamiz.aspx?Islem=Deneme&Kat=3&Sayfa=2
        												//Sayfamiz.aspx?Islem=BaskaBisiy&Kat=1&Sayfa=1, Sayfamiz.aspx?Islem=BaskaBisiy&Kat=1&Sayfa=2 gibi..
        												//Bu sayede kodlarda hiç bir değişiklik yapmadan DataList nesnesinin olduğu yerde bu mekanızmayı kullanabilirsiniz.

        try // bu blokda eğer QueryString deki Sayfa karşısıa sayıdan başka bir değer girilirse, sayfada hata oluşmadan sayfa değişkenimize 1 değerini atıyoruz.
        {
            sayfa = Convert.ToInt32(Request.QueryString["Sayfa"]);
        }
        catch
        {
            sayfa = 1;
        }

        if (sayfa == 0) { sayfa = 1; } 

        objDA.Fill(objDS);
        toplamKayitSayisi = objDS.Tables[0].Rows.Count;
        objDS = null;
        objDS = new DataSet();
        //burdkai dikkat edilecek nokta, önce toplam kayıt sayımızı ilgili değişkene atıyor ve datasesi temizliyor, tekrar yeniden oluşturuyoruz.

        //Toplam sayfa sayısını buluyoruz.
        //Burdaki olayı çok kaba tabirle özetliyeyim, örneğin Tablomuzda 9 kayıt var ve biz bu kayıtları sayfa başına 2 olarak göstermek istiyoruz.
        //Bu durumda 9/2=4,5 çıkıyor yani 4 sayfa ! aşşağıda bu tip durumlarda görüntüleyeceğimiz kayit sayımıza 1 ekleyip 5 sayfa olmasını sağlıyoruz.
        // Buradaki % işareti Mod anlamına geliyor.
        if (toplamKayitSayisi % goruntulenecekKayitSayisi == 0)
        {
            toplamSayfaSayisi = toplamKayitSayisi / goruntulenecekKayitSayisi;
        }
        else
        {
            toplamSayfaSayisi = toplamKayitSayisi / goruntulenecekKayitSayisi + 1;
        }

        //Toplam sayfa sayısı kadar ekrana sayfa numaralarını basıyoruz.
        adresEk = adresEk.Replace("&Sayfa="+sayfa,""); //yukarıda açıklamasını yapmıştık.

        for (int i = 1; i <= toplamSayfaSayisi; i++) //toplamSayfaSayisi kadar döngümüzü kurup, ekrana çıktıyı basıyoruz.
        {
            if (i == sayfa) //Eğer bulunduğumuz sayfadaysak bunu belirtiyoruz. Burda a tagını kaldırıp span kullanıyorumki tıklanamasın.
            {
                sayfalar.Text += "" + i + "";
            }
            else
            {
                sayfalar.Text += "" + i + "";
            }
        }

        ilkKayit = (sayfa * goruntulenecekKayitSayisi) - goruntulenecekKayitSayisi; // ilk kayıt için hesaplamamızı yapıyoruz.

        objDA.Fill(objDS, ilkKayit, goruntulenecekKayitSayisi, "TabloAdi");
        DataList1.DataSource = objDS.Tables[0].DefaultView;
        DataList1.DataBind();
        conn.Close();
        objDA.Dispose();
        objDS.Dispose();

        if (DataList1.Items.Count == 0) // Eğer kayıt yoksa uyarı veriyoruz.
        {
            kayitbulunamadi.Text = "Kayıt bulunamadı";
        }
    }
[/html]