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 ?
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.
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
Facebook Üzerinden Yorumlar