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.