mehmetduran.com - Paylaşmak Güzeldir...
Jquery ve Ajax ile Dataları Sayfalama İşlemi
Bu yazımda jquery ve ajax ile verileri nasıl sayfalayabileceğimizi göstereceğim. Bu örnekle beraber jquery ve ajax uygulamalarında url verisinde parametre kullanmayı göreceğiz. Zira sayfalama işleminde de bu parametre olayını kullanacağız. Parametre ile tıpkı Querystring mantığı ile çalışacağız. Sayfa bilgilerini bu parametre ile alıp datalarımızı çekeceğiz. Bunun için kodlarımıza bakacak olursak:

Sayfamızın arka planında kullancağımız kodlar şöyle olacak:

    OleDbConnection baglanti;
    protected override void OnLoad(EventArgs e)
    {
        baglanti = new OleDbConnection("provider=microsoft.jet.oledb.4.0; data source=" + Server.MapPath("~/isimler2.mdb"));
        OleDbCommand komut = new OleDbCommand("select count(*) from isimler", baglanti);
        baglanti.Open();
        int data_sayisi = (int)komut.ExecuteScalar();
        baglanti.Close();
        linkler.InnerHtml = linkleri_al(data_sayisi);
        base.OnLoad(e);
    }
 
    public string linkleri_al(int adet)
    {
        string sonuc = "";
        if (adet % sayfalama_adeti == 0) { adet = adet / sayfalama_adeti; }
        else if (adet % sayfalama_adeti != 0) { adet = ((adet / sayfalama_adeti) + 1); }
        for (int i = 1; i <= adet; i++)
        {
            sonuc += "<a class='link' onclick='al(" + i + ")'></a>"
        }
        return sonuc;
    }
 
    public int sayfalama_adeti = 4; // sayfalama adeti
 
    [System.Web.Services.WebMethod]
    public static string getir()
    {
        int sayfalama_adeti = 4; // sayfalama adeti
 
        string url = HttpContext.Current.Request.RawUrl;
        // url cıktısı ajax metodunda istek yapılan url
        // burada örnek olarak şöyle:Data.aspx/getir?sayfa="+sayfa
        string[] dizi = url.Split('=');
        // url den sayfa bilgisini alıyoruz.
        int sayfa = int.Parse(dizi[1]);
 
        OleDbConnection baglanti = new OleDbConnection("provider=microsoft.jet.oledb.4.0; data source=" + HttpContext.Current.Server.MapPath("~/isimler2.mdb"));
        OleDbDataAdapter adaptor = new OleDbDataAdapter("select * from isimler", baglanti);
        DataSet ds = new DataSet();
        //sayfa bilgisine göre datamızı çekiyoruz.
        adaptor.Fill(ds, sayfa * sayfalama_adeti - sayfalama_adeti, sayfalama_adeti, "tablo");
 
        GridView gl = new GridView();
        gl.DataSource = ds;
        gl.DataBind();
 
        StringWriter sw = new StringWriter();
        HtmlTextWriter ht = new HtmlTextWriter(sw);
        gl.RenderControl(ht);
        return sw.ToString();
    }


Jquery kodlarımız şöyle olacak:

//verileri sayfalayarak çekecek olan fonksiyonumuz
    function al(sayfa){
        $.ajax({
          type: "POST",
          url: "Data.aspx/getir?sayfa="+sayfa,
          data: "{}",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function(msg){
                $("#data").html(msg.d);
            }
        });
    }
    $(document).ready(function(){
        al(1); //sayfa yüklenirken birinci sayfada gelecek verileri yüklüyoruz.
    });

Kontrolleri ve datayı yükleyeceğimiz html kodlarımız ise şöyle olacak:

<div id="data"></div> <div><span id="linkler" runat="server"></span></div>

Kodlarını paylaştığım örnekte access veritabanındaki verileri sayfalama işlemi yaparak çekiyoruz. Sayfalama işlemini de ajax işlemini yapan ve sayfa parametresi olan javascript fonksiyonu ile yapıyorum. Bu metod ile hangi sayfanın ve hangi datanın yükleneceğini belirliyorum. Bu fonksiyonu ise sayfa yüklenirken hesaplama yaptığım ve bu hesaba göre oluşturduğum linklerde çağırıyorum. Bu linkler ile hangi saynın ve hangi datanın çekilceğini belirliyorum. Bana göre gayet anlaşılır. Sizler yazacağınız daha basit kodlarla bu tür işlemleri daha basit şekilde yapabilirsiniz.

Yaptığım uygulamayı yan tarafta test edebilirsiniz.
Örnek uygulamayı da buradan indirebilirsiniz.

İyi Çalışmalar!
Mehmet Duran 28 Eylül Pazar 2008 18 4252 4,3
Ajax Asp.net Veritabanı jQuery Jquery Programlama Webmethod Sayfalama JSON
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Asp.net ile ve Jquery Ajax ile Kur (Döviz) Bilgilerini Alma Jquery ve Ajax ile Hazırladığım Takvim Jquery ile Treeview Uygulamam Asal Sayı Programı Jquery ile Asp.net Sayfasına Ajax İsteğinde Bulunma
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Eyp 01 Ekim Çarşamba 2008 18:08 #1
Static metod içinde asp.net kontrollerini kullanamıyoruz. GridView gl = new GridView(); gl.DataSource = ds; gl.DataBind(); StringWriter sw = new StringWriter(); HtmlTextWriter ht = new HtmlTextWriter(sw); gl.RenderControl(ht); return sw.ToString(); Bu şekilde gridi yükleyip String olarak göndermek yerine grid e erişip Bind işlemi yapamazmıyız daha pratik yolu yok mu. Birde [WebMethod] Static bir methodun Atrributesi mi olmak zorunda.
Eyp 01 Ekim Çarşamba 2008 18:11 #2
Asp.net ile Jquery kullanımı ile ilgili daha fazla örneği nereden bulabiliriz. Sizin makaleleriniz gayet aydnlatıcı ancak değişik örnekleri incelemek istiyorum
Mehmet Duran 01 Ekim Çarşamba 2008 19:06 #3
Merhabalar. Jquery ile static method kullanmalıyız. Dinamik olarak kontrollere ulaşmak istiyorsak kullanıcı kontrolleri kullanabiliriz. Ancak yine onunda html çıktısını elde edeceğiz. Ama kontrollere ulaşabiliyoruz. Buradaki yazı işini görebilir. Kaynak olarak .net ile ilgili bi yer yok. Sadece nette gördüğüm uygulamaları kendim yapmaya çalışıyorum.
Sercan 29 Ekim Çarşamba 2008 20:09 #4
Selam verdiğiniz uygulama cok güzel ellerinize sağlık fakat aynı işlemi asp yapmak mümkün mü ?
Mehmet Duran 29 Ekim Çarşamba 2008 21:55 #5
Merhaba. Bu işlemi fonksiyonlar ile yapıyorum. Yani bu fonksiyonları yazabileceğeniz her programlama dili ile bu ve bu tür uygulamaları yapabilirsiniz. Ancak ben bu uygulamayı yapacak kadar asp bilmiyorum.
merhaba 02 Şubat Pazartesi 2009 11:48 #6
merhabalar arkadaşlar ben özel bir soru soracağım size bir sayfa hazırlayacağım aspx + c# ile admin panelinden haberi veritabanına kaydettim bu veri tabanına kaydettiğim haberleri anasayfada ilk 5`ini göstertmek istiyorum haberin başlığına geldiğimde sol tarafta haberin resmide gözüksün haber sayfalarındaki gibi nasıl yapabilirim söylermisiniz arkadaşlar birde örnek yaparsanız çok lazım`da arkadaşlar
Mehmet Duran 02 Şubat Pazartesi 2009 11:52 #7
Merhaba. Yapmak istediğin çok zor birşey değil. Sadece veritabanından son 5 veriyi çekeceksin. Bunu yapmak kolay. Kullanıdğın veritabanlarına göre sorguları var. Manşet sistemine gelince de sitemde ve internette birçok örnek var. Bunlardan birini kullanbilirsin. Data kontrolü olarak Repeater kullanmanı tavsiye ederim.
İyi Çalışmalar!
isimsiz 14 Haziran Pazar 2009 04:10 #8
güzel bi iş anacak cs de veriyi HttpContext.Current.Request.Params["sayfa"].ToString(); şeklinde alabilirsiniz. form dan veriler cekilecekse data: $(`#form1`).serialize() öneririm.
deniz 02 Ağustos Pazar 2009 17:17 #9
merhaba.Ana sayfanızda 6 tane konu listettiriyorsunuz Ornegin 2. sayfaya tıkladıgımız zaman farklı bir sayfada 7 ile 12 arasındaki konuları bind edebiliyorsunuz Ben bunu bir türlü yapamadım.GridView yada Datalist ile aynı sayfada sayfalama yapılıyor .Ama ben farklı bir sayfada geri kalanını bind etmek istiyorum.Link ile dinamik olarak sayfa olusturabiliyorum.Yani buradaki sorguyu bir türlü yapamadım.Bu konuda bilgilendirirseniz sevinirim.Konu baslıgıyla alakasız oldu kusura bakmayın
deniz 02 Ağustos Pazar 2009 17:24 #10
Bir şey daha; örneğin facebooktaki gibi hersayfada bir resim ve o resime ait yorumlar var.Bir sayfaya tıkladığımızda başka bir sayfanın url kısmına photoid yi bind edip ona göre yorumları çekiyor. Buna benzer bir sayfalama nasıl yapılır??Biraz fazla soru srdum ama bir türlü isin icinden cıkamadım :)
Mehmet Duran 02 Ağustos Pazar 2009 23:39 #11
Merhaba. Bunun için kullandığın veritabanına göre sayfalama yapman gerekir ve bu konuda hem mysql için hem de ms sql için yazım var. Mysql için buradaki, ms sql için ise buradaki yazım örnek olabilir. Diğer konuda ise öncelikle Facebook'un kendine özel bir dili olduğunu belirteyim. Dediğin gibi bir örnek için farklı yöntemler geliştirilebilir. Url'den bilgi alıp, buna göre işlem yapmak için querystring mantığını incelemeni öneririm. Sitemde de bu konuda birkaç örnek mevcut.
Beko 01 Eylül Salı 2009 14:20 #12
merhaba, öncelikle sitenizi çok beğendim ve listeme ekledim. Benim Sorum: Asp ve Access ile bu sayfalamayı nasıl kullanabilirim, sitenize bu şekilde bir örnek ekleyebilir misiniz? veya bu şekilde bir örnek linki de olabilir. Saygılar.
Mehmet Duran 01 Eylül Salı 2009 22:44 #13
Asp ile çok fazla uygulama geliştirmiyorum. Ancak bu türlü bir işlem için bir metot yazmak yaterli olur. Bu metoda url'den veya başka bir kontrolden gelecek olan aktif sayfa numarasını parametre olarak göndermek ve bu değere göre de gerekli işlemleri yapmak yeterli olur. Şu anda bir örnek yapmam zor.
osman 11 Şubat Perşembe 2010 17:02 #14
kullanamadım sayfada kodlar tamam veritabanı bağlantısını yaptım sayfa çalışıyor fakat boş geliyor "Data.aspx/getir?sayfa="+sayfa, ayrıca bunu da anlamadım hazır kodları varsa link verebilirmisiniz
Mehmet Duran 11 Şubat Perşembe 2010 22:43 #15
Yazımın son bölümünde örneğin linki var. İndirip incelyebilirsin.
serkan 13 Mayıs Perşembe 2010 11:17 #16
Merhaba,Ben bu uygulamayı masterpage li bir projede yapıyorum. Sorunum şu masterpage de jquery scriptini kullandıyorum, kategori sayfamda ise bu kodları uyguladım. base.OnLoad(e); buraya geldiğinde tekrar pageload kodu çalışıyor, getir metfoduna hiç girmiyor, base.onload(e) kodunu kaldırırsam bu seferde linkler doluyor, datalist gelmiyor.Sayfa kaynağını görüntülediğimde jquery scripti ve masterda kullandığım script kodları görünüyor. Kategori.aspx scripti görünmüyor.
serkan 13 Mayıs Perşembe 2010 12:36 #17
success: function(msg){ $("#data").html(msg.d); } burada error : da unfined mesajı alıyorum, nden olabilir.Linkler geliyor gerçi hep 5 link geliyor ya, data dolmuyor, sizin örenkteki Gridview'i Datalist olarak değiştirdiğimde, data boş geliyor.
Mehmet Duran 14 Mayıs Cuma 2010 00:20 #18
Merhaba. Öncelikle bu örneği çok çok önce yaptığımı ve oldukça amatör olduğunu söyleyim. Ancak işin mantığını kavramak ve daha iyisini geliştirmek için iyi bir örnek sayılır. Burada sayfaları ayrı oluşturup verileri ayrıca çeken bir yapı var. Ancak buna gerek kalmadan hem sayfaları hem de verileri kontrol içinde oluşturup, kontrolü render ettiğimizde tüm verileri topluca alırsak daha kolay bir kullanım olur. Buradaki bahsettiğin sıkıntı hatırladığım kadarıyla GridView'ın databind edildiğinde otomatik olarak verileri listelemesinin datalist kontrolünde olmamasından kaynaklanıyor. Yani datalist databind edildiğinde verileri listelemesi için itemtemplate bölümünün belirlenmesi gerekiyor. Ancak belirttiğim gibi bu biraz kullanışsız bir yöntem. Bunun yerine UserControl kullanıp, bu kontrolleri Ajax işlemlerinde render etmeyi denemelisin. Bu konuda sitemde birçok yazı ve örnek mevcut.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Hizmet amaçlı işler başarıya, kar amaçlı olanlar ise başarısızlığa yöneliktir.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009