Asp.net MVC scroll paging(sayfalama) nasıl yapılır?

Asp.net MVC scroll paging(sayfalama) işlemi günümüzde facebook, twitter, instagram, foursquare birçok sosyal paylaşım sitesinde de kullanılmaktadır. Bu yöntem performans ve kullanım açısından çok kullanışlı ve güzel bir yöntemdir.

Asp.net MVC scroll paging(sayfalama) işlemini şehir ve plaka kodları listeyen bir proje ile örneklendirelim.

Öncelikle MVC projemizde bir Controler oluşturup içersinde iki tane ActionMethod'a ihtiyacımız olacak, örneğimizde HomeController kullanacağız.

HomeController içerisine Index ve Sehirler adında iki tane ActionMethod ekleyip ve geriye List döndürecek bir method oluşturacağız. Ayrıca Listeyeceğimiz şehirleri bir liste oluşturup burada oluşturdum aynı zamanda listeleyeceğimiz veriyi database(veritabanı) çekebilirsiniz.

public class HomeController : Controller
    {
        const int GosterilecekKayitSayisi = 15;

        public ActionResult Index(int? id)
        {
            var sayfa = id ?? 0;

            if (Request.IsAjaxRequest())
            {
                return PartialView("_Sehir", GösterilecekKayitlar(sayfa));
            }

            return View("Index", Tumu().Where(x => x.Id != null).Take(GosterilecekKayitSayisi));
        }

        public ActionResult Sehirler(int? id)
        {
            var sayfa = id ?? 0;

            if (Request.IsAjaxRequest())
            {
                return PartialView("_Sehir", GösterilecekKayitlar(sayfa));
            }

            return View("Index", Tumu().Where(x => x.Id != null).Take(GosterilecekKayitSayisi));
        }

        private List<Sehir> GösterilecekKayitlar(int sayfa = 1)
        {
            var AtlanacakKayitlar = sayfa * GosterilecekKayitSayisi;

            return Tumu().OrderBy(x => x.SehirAdi).Skip(AtlanacakKayitlar).Take(GosterilecekKayitSayisi).ToList();
        }

        public class Sehir
        {
            public int Id { get; set; }
            public string SehirAdi { get; set; }

        }

        public IQueryable<Sehir> Tumu()
        {
            var Sehirs = new List<Sehir>
        {

            new Sehir{Id=01, SehirAdi="Adana" },
            new Sehir{Id=02, SehirAdi="Adıyaman" },
            new Sehir{Id=03, SehirAdi="Afyon" },
            new Sehir{Id=04, SehirAdi="Ağrı" },
            new Sehir{Id=05, SehirAdi="Amasya" },
            new Sehir{Id=06, SehirAdi="Ankara" },
            new Sehir{Id=07, SehirAdi="Antalya" },
            new Sehir{Id=08, SehirAdi="Artvin" },
            new Sehir{Id=09, SehirAdi="Aydın" },
            new Sehir{Id=10, SehirAdi="Balıkesir" },
            new Sehir{Id=11, SehirAdi="Bilecek" },
            new Sehir{Id=12, SehirAdi="Bingöl" },
            new Sehir{Id=13, SehirAdi="Bitlis" },
            new Sehir{Id=14, SehirAdi="Bolu" },
            new Sehir{Id=15, SehirAdi="Burdur" },
            new Sehir{Id=16, SehirAdi="Bursa" },
            new Sehir{Id=17, SehirAdi="Çanakkale" },
            new Sehir{Id=18, SehirAdi="Çankırı" },
            new Sehir{Id=19, SehirAdi="Çorum" },
            new Sehir{Id=20, SehirAdi="Denizli" },
            new Sehir{Id=21, SehirAdi="Diyarbakır" },
            new Sehir{Id=22, SehirAdi="Edirne" },
            new Sehir{Id=23, SehirAdi="Elazığ" },
            new Sehir{Id=24, SehirAdi="Erzincan" },
            new Sehir{Id=25, SehirAdi="Erzurum" },
            new Sehir{Id=26, SehirAdi="Eskişehir" },
            new Sehir{Id=27, SehirAdi="Gaziantep" },
            new Sehir{Id=28, SehirAdi="Giresun" },
            new Sehir{Id=29, SehirAdi="Gümüşhane" },
            new Sehir{Id=30, SehirAdi="Hakkari" },
            new Sehir{Id=31, SehirAdi="Hatay" },
            new Sehir{Id=32, SehirAdi="Isparta" },
            new Sehir{Id=33, SehirAdi="İçel (Mersin)" },
            new Sehir{Id=34, SehirAdi="İstanbul" },
            new Sehir{Id=35, SehirAdi="İzmir" },
            new Sehir{Id=36, SehirAdi="Kars" },
            new Sehir{Id=37, SehirAdi="Kastamonu" },
            new Sehir{Id=38, SehirAdi="Kayseri" },
            new Sehir{Id=39, SehirAdi="Kırklareli" },
            new Sehir{Id=40, SehirAdi="Kırşehir" },
            new Sehir{Id=41, SehirAdi="Kocaeli" },
            new Sehir{Id=42, SehirAdi="Konya" },
            new Sehir{Id=43, SehirAdi="Kütahya" },
            new Sehir{Id=44, SehirAdi="Malatya" },
            new Sehir{Id=45, SehirAdi="Manisa" },
            new Sehir{Id=46, SehirAdi="Kahramanmaraş" },
            new Sehir{Id=47, SehirAdi="Mardin" },
            new Sehir{Id=48, SehirAdi="Muğla" },
            new Sehir{Id=49, SehirAdi="Muş" },
            new Sehir{Id=50, SehirAdi="Nevşehir" },
            new Sehir{Id=51, SehirAdi="Niğde" },
            new Sehir{Id=52, SehirAdi="Ordu" },
            new Sehir{Id=53, SehirAdi="Rize" },
            new Sehir{Id=54, SehirAdi="Sakarya" },
            new Sehir{Id=55, SehirAdi="Samsun" },
            new Sehir{Id=56, SehirAdi="Siirt" },
            new Sehir{Id=57, SehirAdi="Sinop" },
            new Sehir{Id=58, SehirAdi="Sivas" },
            new Sehir{Id=59, SehirAdi="Tekirdağ" },
            new Sehir{Id=60, SehirAdi="Tokat" },
            new Sehir{Id=61, SehirAdi="Trabzon" },
            new Sehir{Id=62, SehirAdi="Tunceli" },
            new Sehir{Id=63, SehirAdi="Şanlıurfa" },
            new Sehir{Id=64, SehirAdi="Uşak" },
            new Sehir{Id=65, SehirAdi="Van" },
            new Sehir{Id=66, SehirAdi="Yozgat" },
            new Sehir{Id=67, SehirAdi="Zonguldak" },
            new Sehir{Id=68, SehirAdi="Aksaray" },
            new Sehir{Id=69, SehirAdi="Bayburt" },
            new Sehir{Id=70, SehirAdi="Karaman" },
            new Sehir{Id=71, SehirAdi="Kırıkkale" },
            new Sehir{Id=72, SehirAdi="Batman" },
            new Sehir{Id=73, SehirAdi="Şırnak" },
            new Sehir{Id=74, SehirAdi="Bartın" },
            new Sehir{Id=75, SehirAdi="Ardahan" },
            new Sehir{Id=76, SehirAdi="Iğdır" },
            new Sehir{Id=77, SehirAdi="Yalova" },
            new Sehir{Id=78, SehirAdi="Karabük" },
            new Sehir{Id=79, SehirAdi="Kilis" },
            new Sehir{Id=80, SehirAdi="Osmaniye" },
            new Sehir{Id=81, SehirAdi="Düzce" },
            
        };
            return Sehirs.AsQueryable<Sehir>();
        }

}

Projemize daha sonra bir tane Partial View ekleyeceğiz. Listeleyeceğimiz veriyi öncelikle _Sehir.cshtml Partial View içerisine aktaracağız.

@foreach (var i in Model)
{   
    <div>
        
        <p><b>Plaka :</b> @i.Id <b>Şehir :</b> @i.SehirAdi </p><br />
        
    </div>
}

HomeController içerisine Index ActionMethod'u için Index.cshtml View'ini oluşturup. İçeriğini aşağıdaki şekilde düzenleyerek kodlarımız

<h2>Şehirler</h2>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () { 
    var page = 0;
    var _inCallback = false;

    function loadSehirler() {
        if (page > -1 && !_inCallback) {
            _inCallback = true;
            page++;
            $('div#loading').html('<p><img src="/Images/loading.gif"></p>');
            $.get("/Home/Sehirler/" + page, function (data) {
                if (data != '') {
                    $("#sehirList").append(data);
                }
                else {
                    page = -1;
                }

                _inCallback = false;
                $('div#loading').empty();
            });
        }
    }

    var dcList = true;

    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            
             loadSehirler();
        }
    });
});
</script>

<div id="sehirList">
    @Html.Partial("_Sehir")
</div>

<div id="loading"></div> 

Projemizi derleyip test edebilirsiniz.