Merhaba arkadaşlar;

Bügün sizler ile Listemiz üzerinde ajax yardımı ile basit bir sayfalama yapacağız.

İşe başlamadan önce basit bir kişi listesi yapalım. Örnek Modelimiz aşağıdaki gibidir.

    public class Person
    {
        public int PersonId { get; set; }
        public string Name { get; set; }
        public string SurName { get; set; }
    }

Modelimiz üzerinden hemen sahte bir DataBase yapalım. Ben döngü kurarak nesnemizi örneklemeyi tercih edicem.

    public class DataBase
    {
        public static List<Person> Persons
        {
            get
            {
                var list = new List<Person>();

                for (int i = 0; i < 198; i++)
                {
                    list.Add(new Person
                    {
                        PersonId = i + 1,
                        Name = string.Format("Fatih-{0}", i + 1),
                        SurName = string.Format("Bülbül-{0}", i + 1),
                    });
                }
                return list;
            }
        }
    }

Arkadaşlar buraya kadar yaptıklarımız örneğimiz için ön hazırlıktı. Şimdi asıl işimize geçelim.

Bize örneğimiz için hangi bilgiler gerekli ?

• Toplamda kaç sayfa olduğu
• İlgili sayfaya ait kayıtlar

Evet arkadaşlar bize bu bilgileri sunacak bir sınıf yazalım.

    public class CallModel
    {
        //Sayfa Sayısı
        public int PageCount { get; set; }

        //Kişi Listesi
        public List<Person> PersonList { get; set; }

        //Sayfa başına gösterilecek maximum kişi sayısı
        const int Limit = 15;

        //default constructor
        public CallModel()
        {
            //ilk çağrılışta birinci sayfa kayıtlarını doldur
            PersonList = GetPersonList(0);

            //Sayfa sayısını bul
            PageCount = (DataBase.Persons.Count / Limit);

            //Eğer kişi listesi limit ile kalanlı bölünüyorsa sayfa sayısını bir arttır
            if (DataBase.Persons.Count % Limit > 0)
                PageCount++;
        }


        /// <summary>
        /// İlgili sayfaya ait kayıtları getir
        /// </summary>
        /// <param name="PageId">sayfa numarası</param>
        /// <returns></returns>
        public static List<Person> GetPersonList(int PageId)
        {
            return DataBase.Persons//Kişiler
                .OrderBy(x => x.PersonId)//Kişi Id göre sırala
                .Skip(PageId * Limit)//Önceki sayfaların kayıtlarını atla
                .Take(Limit)//Belirlenen limit sayısınca kayıt al
                .ToList();//Liste tipine döndür
        }
    }

Şimdi sıra geldi sayfalarımızı oluşturmaya. 

 Öncelikle kişi listemizi içerisinde barındıran bir PartialView oluşturalım. Bu sayfayı ajax ile çağıracağız

        public PartialViewResult Page(int PageNumber)
        {
            var viewModel = CallModel.GetPersonList(PageNumber);
            return PartialView(viewModel);
        }

Hemen Add View diyelim ve Tablomuzu oluşturmaya başlayalım.

@model List<AjaxPager.Model.Person>
@{
    Layout = null;
}

<table class="CSSTableGenerator">
    <tr>
        <th>
            <label>ID</label>
        </th>
        <th>
            <label>Adı</label>
        </th>
        <th>
            <label>Soyadı</label>
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.PersonId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SurName)
            </td>

        </tr>
    }
</table>

Sıra geldi default sayfamızı oluşturmaya. Bu sayfada içeriklerimiz ve tabiki tablomuz olacak.

        public ActionResult Index()
        {
            var viewModel = new CallModel();
            return View(viewModel);
        }

Add view diyelim ve sayfamız için gerekli kodları yazmaya başlamadan ihtiyaçlarımızı sıralamaya başlayalım.

1. Bir adet  div elementi, İçerisine Tablomuzu basacağız ve tabiki güncellenecek content alanımız burası olacak 
2. Tablomuzun altına bir adet pager ekleyeceğiz
3. Bir adet güncelleme işlemini gerçekleştirecek ajax fonksiyonu 

Birinci maddemizden başlayalım, Div alanımızı oluşturalım ve içerisine Tablo üretmek ile görevli olan Partial View 'ımızı çekelim.

    <div id="Result">
        @Html.Partial("Page", Model.PersonList)
    </div>

İkinci Madde Pager hemen yukarıdaki kod bloğunun altına ekleyelim.

 <table class="CSSTableGenerator">
        <tr class="grid-footer">
            <td>
                @for (int i = 0; i < Model.PageCount; i++)
                {
                    <a onclick="GetPage(this)" class="AjaxLink @(i==0?"active":string.Empty)" data-page="@i">@(i + 1)</a>
                }

            </td>
        </tr>
    </table>

Yukarıdaki kod bloğunu incelerseniz onclick event'ı içerisine hemen aşağıda oluşuracağımız(3. madde) fonksiyonumuzu verdik.

Üçüncü madde ajax methodumuzu yazalım 

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">

    function GetPage(e) {
        //<a onclick="GetPage(this)"...  onclick event'i ile gelen element e=this

        //a elementine ait "data-page" attributesinin değeri
        //data-page attributune çekmek istediğimiz sayfa numarasını verdim
        var page = $(e).attr('data-page');

        //Hangi sayfada olduğumuzu görmek için yazdığımız kod

        //Ajax Linkinden active class'ını sil
        $('.AjaxLink.active').removeClass('active')

        //Çağırılan sayfaya active class ekle
        $(e).addClass('active')

        //Ajax methodumuz
        //$.get(Url,Gönderilecek Parametreler,Geri dönen veri) biçiminde yazdık
        $.get("/home/Page", { PageNumber: page }, function (page) {

            //Güncelleyeceğimiz div alanına çektiğimiz partial View'ımızı bastık
            $('#Result').html(page)

        })
    }
</script>

Evet arkadaşlar örneğimiz tamamlandı.

Ben biraz Css desteği verdim. Örnek aşağıdaki gibi olacaktır.

Umarım sizler için faydalı bir paylaşım olmuştur.

Örneğimizi buradan indirebilirsiniz.

Saygılarımla Fatih BÜLBÜL