Mvc’de Custom Paging, Sorting, Kolon Ekleme ve Excel’e Atma Bölüm1

Selamlar,

Bugün Mvc’de WebGrid kullanarak kendi paging ve sorting’imizi yazıp, Excel’e export edeceğiz. Ayrıca WebGrid’e özel bir kolon nasıl ekleniyor hep beraber inceleyeceğiz. Öncelikle WebGrid’de paging ve sorting varken neden kendimiz yazma ihityaç duyduk onu inceleyelim. WebGrid ve buna benzer birçok hazır tool bu işlemler için tüm datayı çeker. Diyelim ki 1000000 kayıdımız var. Ve sayfalama yapıcağız. En başta 25 kayıt göstermek için neden tüm datayı çekip, hem zaman hem de performans kaybına yol açalım. Genelde tooların tüm datayı çekmesindeki amaç, toplam kayıt sayısının bulunup, her sayfada gösterilecek satır sayısına göre tüm sayfalamanın html’e basılmasıdır. Biz de tüm bu işlemleri kendimiz üstlenip, performansı büyük oranda arttırıcak ve gereksiz yük kaybını ortadan kaldıracağız.

Öncelikli olarak boş bir Mvc projesi açıyoruz. Çalışacağımız database Northwind Databaseidir. CodeFirst (DB First) kullanılarak çalışılacak tablo, aşağıda Pocosu görülen ‘Customer’ tablosudur.

Çalışılacak DbContext sınıfı, NorthWindContext aşağıdaki gibidir: Bu bölümde sadece ‘Customer’ tablosu ile çalışılacaktır.

İlk datanın gösterileceği Index Action’ı aşağıdaki gibidir. Dikkat edileceği gibi view’a herhangi bir data model gönderilmemiştir.

Index.cshtml: Aşağıda görüldüğü gibi herhangi bir html içerik sayfanın içinde tanımlanmamıştır. İlgili içerik server side’da oluşturulup ‘paging.js’ script dosyasında ‘$.getJSON‘ ile ekrana basılmaktadır.

Şimdi gelin adım adım ‘paging.js’i inceleyelim:

1-) Paging.js sayfa ilk yüklendiğinde ‘EfficientPaging’ Action’ına gidilip ilgili WebGrid ekrana basılır.

HomeController.cs EfficientPaging() İlgili WebGrid’in doldurulup sayfalandığı yer:  

  • Aşağıda ‘JsonResult‘ dönülen ve paramtere olarak ‘int? page‘ alan bir method tanımlanmıştır. Aslında burada sayfalama işlemi yapılmaktadır. ‘rowPerPage=25‘ ile her sayfada gösterilecek satır sayısı tanımlanmıştır. Örneğin 5. sayfa görülmek istenir ise bundan önceki 4 sayfa yani (4 x 25) kayıt atlanmalı yani skip yapılmalıdır. Daha sonra geri kalan kayıtlardan 25’i alınmalıdır. Yani take yapılmalıdır. İşte Skip(skip * rowPerPage).Take(rowPerPage) bunun için yazılmıştır. Kısaca 100 ile 125 kayıtları arası gösterilmektedir. İlgili tüm kayıt çekilip ‘data‘ nesnesine atılır.
  • Sıra geldi bu datayı ‘WebGrid‘de göstermeye. Aşağıda görüldüğü gibi ilgili WebGrid sunucu tarafında oluşturulur. İlk parametre ‘data‘ sonra ‘canPage: false‘ verilerek otomatik paging kapatılmıştır. Bu işlemi biz yapacağız:) ‘canSort:false‘ ile kolonlara göre sıralama işlemi de kapatılmıştır. ‘rowsPerPage: rowPerPage‘ ile herbir sayfada kaç satır görüleceği set edilmiştir. Bu örnekde mesela 25. ‘grid.GetHtml()‘ ilgili grid’in Html’i alınmıştır. Grid’in daha güzel görünmesi için ‘WebGrid.css‘ yazılmıştır. Ayrıca ilgili header, footer gibi kısımlara bu css’den sitil atanmıştır. Grid’de Customer tablosuna ait görünmesi istenen kolonlar ‘columns: grid.column()‘ ile tanımlanmıştır. Bazı kolonlara allies verilerek ekrandaki görünümleri değiştirilmiştir. Örnek : (‘CompanyName’, ‘ Company Name’) olarak değiştirilmiştir.
  • Sıra geldi sayfalama için toplam sayfa sayısını bulunmasına. Bunun için öncelikle  toplam kayıt sayısı bulunur ve herbir sayfada gösterilecek kayıt sayısına bölünerek, toplam sayfalama sayısı bulunur. Bunun için kalan sayıya bakılarak paging değeri gerekirse(yani kalan sayı var ise) 1 arttırılır. Son olarak çekilen data(WebGrid) ve paging yani altta görülen sayfalama sayısı ‘json‘ olarak geri dönülür.

Index.cshtml’e basılan ekran görüntüsü aşağıdaki gibidir:

Untitled

2-)Paging.js’de ilgili WebGrid’in ekran basılmasından sonra paging’in WebGrid’in footer’ına manuel olarak konulması: Aşağıda görüldüğü gibi ‘createFooter()‘ function’ı ile ‘<tfoot>‘ tagları arasında ilgili paging html’i  HomeController’daki ‘EfficientPaging()‘ methodundan dönen toplam sayfalama sayısı kadar dönülerek oluşturulur. Ve ‘WebGrid”in ‘thead‘ html elementinden sonra konur. Önemli bir not: ‘body’ içindeki ‘#grid tfoot a‘ şeklinde ilgili paging buttonlarına erişilerek ‘onclick’ eventinde ‘EfficientPaging()‘ methoduna gidilerek ilgili ‘WebGrid’ html’i temizlenip dönen yeni html ekrana basılır ve temizlenen footer yani paging sonuna tekrardan eklenir. Eğer ‘onclick’ durumunda ilgili sayfalama buttonlarına ‘body”nin altından erişilmeyip direk ‘#grid tfoot a‘ şeklinde erişilmeye çalışılsa idi, html temizlendiğinde yeni konan footerdaki buttonlar tıklanamıyacaktı. Bundan dolayı ilgili paging buttonlarına ‘body‘ altından yani en üstteki parent elementinden erişilmektedir. 

Şimdi sıra geldi ‘WebGrid’ e verdiğimiz sitili, yani ‘WebGrid.css’ i incelemeye: Aşağıda görüldüğü gibi WebGrid’in header yani sıralama yapılacak kolonlarına , footer yani paging yapılacak kısma ve son olarak alternating yani her satır aşırıda bir atlanılan sitiller aşağıdaki gibi tanımlanmıştır.

WebGrid’de Tabloda Olmayan Özel Kolon Ekleme: Bu bölümde WebGrid’e yeni bir kolon ekleyerek listelenen müşterilerin sipariş listesini gösteren bir detay button’u yaratacağız. Daha sonra tıklanma işleminde gidilecek detay sayfasını hep beraber kodlayacağız.

Web Grid’e yeni kolon aşağıdaki gibi eklenir: ‘header’ kısmına siparisler yazılmıştır. ‘format’ kısmına eklenecek olan html elementi tanımlanır. Lambda ile ‘item =>‘  WebGrid’e gelen kolonlara erişilir. Açılan yeni kolona basılacak ‘button‘ ‘HtmlString()‘ methodu ile Html’i oluşturulup, ‘onclick‘ durumunda ‘getDetail()‘ function’ı çağrılır. İlgili function’a parametre olarak ‘item.CustomerID‘ escape denilen ‘\”‘ karakteri gönderilir.

WebGrid’e custom eklenen kolon:

Index sayfasının son görünümü aşağıdaki gibidir. İlgili detay buttonları sol tarafta gözükmektedir.

Paging

3-)Paging.js’deki ‘getDetail()‘ function’ı ile ‘Detay’ buttonuna basılınca Customer’a ait sipariş listesine gitmek için ‘Order()‘ action’ı aşağıdaki  gibi çağrılır. Görüldüğü gibi Order yani siparişler  sayfası yeni bir pencerede açılmıştır.

HomeController.cs’deki ‘Order()‘ action’ı aşağıda görüldüğü gibi seçilen müşteriye ait tüm sipariş listesini ‘Freight‘ yani gemiye ödenecek en yüksek ücrete göre çekip, ilgili model’i, Order view’ına göndermektedir.

Order.cs: Order Poco’su aşağıdaki gibi tanımlanmıştır.(CodeFirst)

Tüm müşteriler için sayfalama ve herbir müşteriye ait sipariş listesine, aşağıda görüldüğü gibi gidilebilir.

WebGrid

Order.cshtml: Customer’a göre çekilen Order sayfası aşağıdaki gibidir. Model olarak ‘List<TeklifFormu.Models.Order>’ beklemektedir.

Geldik makalenin ilk bölümünün sonuna. Bir sonraki bölümde istenilen kolona göre dinamik sıralama ve Excel’e atma işlemleri yapılacaktır. Bakalım paging ortamında dinamic sorting, işleri nasıl karıştıracak. Ayıca excel’e, ilgili dataların atılması durumunda, tasarımın korunması için neler yapılması gerekecek. Hepsini bir sonraki makalede hep beraber inceleyeceğiz.

Geldik bir makalenin daha sonuna. Bu makalenin devamında görüşmek üzere hoşçakalın.

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

2 Cevaplar

  1. Talha Kastan dedi ki:

    Özellikle büyük veri tipinde çalışılacak projeler için çok çok gerekli ve faydalı bir yazı olmuş. Dediğiniz gibi umarım bu tip bilgi eksikliklerimizi tamamlayıp yeni teknolojilerin neler getireceğini konuştuğumuz günlerde gelir. Emeğiniz ve katkınız için teşekkürler.

    • borsoft dedi ki:

      Ben teşekkür ederim Talha.

      O günler de gelecek. Hem de sandığımızdan çok daha yakında..

      İyi çalışmalar…

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir