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.


Mekanızma şu şekilde çalışıyor. Ekranda listelediğimiz kayıtlardan sonuncusunun id sini post edip, bu id den küçük olan son 2 kaydı ekrana basıyoruz.

<script type="text/javascript">
    $(function () {
        sonId(null);
        $('.daha').live("click", function () {
            var id = $(this).attr("id");
            var t = $(this);

            t.before("<img src=\"@Url.Content("~/content/images/yukleniyor.gif")\" class=\"yukleniyor\" title=\"Yükleniyor, lütfen bekleyin..\" />");
            t.hide();

            $.ajax({
                type: "POST",
                url: "@Url.Content("~/home/getir/")",
                data: "SonId=" + id,
                cache: false,
                success: function (data) {
                    if (data.sonId == -1) {
                        t.before("<span>Tüm kayıtlar bunlar.</span>");
                        $(".yukleniyor").remove();
                        t.remove();
                        return;
                    }
                    $.each(data.m,function(i, item){
                        $("#liste").append("<li id=\""+item.id+"\" class=\"hide\"><h5>"+item.baslik+"</h5><p>"+item.icerik+"</p></li>");
                        $("#liste li:last").fadeIn("slow");
                    });

                    sonId(data.sonId);
                    $(".yukleniyor").remove();
                    t.show();
                }
            });
            return false;
        });

        function sonId(gelen) {
            var id;
            if (gelen == null) {
                id = $("#liste li:first").attr("id");
            }
            else {
                id = gelen;
            }
            $(".daha").attr("id", id);
        }
    });
</script>

<ul id="liste">
    @foreach (var item in Model)
    {
        <li id="@item.id"><h5>@item.baslik</h5><p>@item.icerik</p></li>
    }
</ul>

<a href="#" class="daha">daha fazla</a>

Home kontrolümüzdeki getir adında ki aksiyonumuz;

  public ActionResult Getir()
        {
            //System.Threading.Thread.Sleep(2000); // yükleniyor mesajını görmek için biraz bekleme yapıyoruz ;)

            int sonId = Convert.ToInt32(Request.Form["SonId"]);

            var result = context.mesajs.Where(x=>x.id<sonId).OrderByDescending(x=>x.id).Skip(_skip).Take(_take);

            if (result.Count() == 0)
            {
                return Json(new { sonId = -1}, JsonRequestBehavior.AllowGet);
            }

            return Json(new { m = result, sonId = result.First().id }, JsonRequestBehavior.AllowGet);
        }

Bu örneği php, asp yada farklı bir dillede gerçekleştirebilirsiniz. Ben örneği asp.net de yapıyorum diye illa asp.net de olacak diye bir şart yok yani ;) Projenin çalışır haline buradan bakabilir, buradan da indirebilirsiniz.

  • Bayram Boynukara

    Merhaba Abdullah abi, bu Load More Data Örneği MVC de yapılmış sanırım normal asp.net’te nasıl yapabilirim yada elinde varmı daha önce yaptığın bir örneği?

    • apoStyLEE

      Merhaba, bunu kendinde yapabilirsin. Sadece geriye json data döndüreceksin, bunun içinde newton json u kullana bilirsin.

  • MMH

    indireceğimiz linkte hata var sanırım

    • apoStyLEE

      Teşekkürler, adresi düzelttim, şimdi indirebilirsiniz.

  • turan

    Bunun klasik asp için olanını arıyorum yardımcı olabilirmisiniz

  • Serdar

    burada daha fazla butonu yerine scrool bar kaydırıldıkça verileri nasıl yükletiriz

  • Fatma Güzel

    ApoStylee yapmış olduğunuz örnek için çok teşekkür ederim.
    Arkadaşımızın dediği gibi daha fazla butonu yerine scrool bar kaydırıldıkça verileri nasıl yükletiriz.
    Twiter tarzı süper olur aslında bir yardımcı olursanız çok seviniriz.

  • Hakan

    Apostylee örnek için çok teşekkür ederiz.Yalnız arkadaşların dediği gibi facebook ve twitter tarzı sayfalama mantığınıda gösterseniz süper olacak.Yardımcı olursanız çok seviniriz

  • Yunus Emre

    Merhaba, sayfa açıldığında örnek çalışıyor, gerçekten hiç bir problem yok ama başka bir sayfaya gidip tekrar aynı sayfaya geldiğimde çalışmıyor ? bunun sebebi ne olabilir ? teşekkürler

  • eyüp

    bunun asp versiyonunu da yapabilirmisiniz çok lazım çok yardımcı olursunuz