MVC Angular Kullanımı : Listeleme, Filtre ve Sıralama İşlemleri

Daha önceki angular yazımda sizlere listeleme, filtreleme ve sıralama işlemlerini yazacağımı söylemiştim. Gün bugündür diyerek yazımı yazmaya başlıyorum :)

Bir önceki yazımda tek bir nesne üzerinden işlem gerçekleştirmiştim. Artık birden çok veriyle çalışmamızın zamanı geldi. Bunun için daha önceki yazımda kullandığım gibi yine bir Personel sınıfı kullanacağım.

İlk olarak mvc de her zaman olduğu gibi kullanacağımız bir ActionResult oluşturalım. Ben Indexi oluşturmuşum. Birde JSON döndüreceğimiz bir JsonResult metodu yazalım.

Indeximizde bir şey yok içinde sadece return View(); metodu olacak. Artık View tarafına ve angular yazmaya başlayabiliriz :)

Angular kütüphanemizi hemen View'imize ekleyelim.

Ben Jquery get metodunu kullandığım için bana birde Jquery kütüphanesi lazım.

Artık Angular tarafını büyük bir mutlulukla yazabiliriz :)

Adım adım gidelim;
- Birinci adımda listemizi sayfada gösterelim. Bunun için Jquery get metoduyla GetPersonels metodumu çağıracağım ve gelen JSON'ı $scope'a set edeceğim.

Bu işlemin çalışması (tetiklenmesi için) Controller ve app nesnelerini kullanmamız lazım. Body kısmında listemizi oluşturarak tetiklemeyi sağlayalım.

ng-repeat attribut'uyle personels içindeki her bir personel (bu ismi biz veriyoruz yani : p in personels de diyebilirdik o zaman altta p. ID şeklinde çağırmalıydık) için değerleri textboxlarımıza ng-Model ile set ediyoruz. Eğer bu değerleri text olarak göstermek isteseydik {{personel.ID }} örneğindeki gibi yazabilirdik.

Listeleme işlemi bitti diyebiliriz.

-İkinci adımda bu listemize filtreleme işlemi ekleyelim.
Bunun için ng-controller div'imizin altına filtreleme yapacağımız textbox'ı ekleyelim. Ayrı listemize de filtreleme yapacağımız değeri bildirmemiz gerek.

Filtre alanımızı oluşturduktan sonra sıra geldi listemize bu alanı bildirmeye. Bunun için ng-repeat attribute'nin yanın filter keyword'ü ile alanı bildiriyoruz.

Ben Name, Surname ve Title işlemlerinin hepsi için bu filtreyi ekledim.






















Bakalım ekranımızın son halini ne olmuş.

Güzellll :) Sırada sıralama işlemi var. Bunun için iki farklı adım izleyeceğiz. Bir tanesi static bir sıralama olacak yani bize elle vereceğiz sıralama kriterini. İkinci işlemde ise dinamik olarak butonlar üzerinden yapacağız.

- Üçüncü adımda listemizi istediğimiz alana göre static bir şekilde sıralıyoruz. Bunun için "orderBy" keyword'ünü kullanacağız.

Peki biz burada örnek olarak isim alanını kullandığım için tersten sıralamak istersek ne yapacağız. Çok basit 'Name' alanının başına "-" işareti koyarak bu işlemi gerçekleştirebiliriz.
(Ör: orderBy:'-Name')

Artık bu işlemi dinamik yani butonlara basınca yapılacak şekilde yapma zamanımız geldi.

- Dördüncü adım butonlar ile alan sıralaması yapma işlemi

Bu işlemlere kadar angular kısmında sadece verimizi çekmiştik. Artık orayı biraz geliştirme zamanı geldi. İlk olarak filter nesnesini kendimiz özelleştireceğiz ve içeride orderBy fonksiyonunu yazacağız.

Sarı ile işaretlediğim yerler yeni eklenen alanlarımız. Burada order adında yeni bir fonksiyon oluşturduk. İçine predicate yani sıralama yapılacak alan adını göndereceğiz (Name,Surname gibi). Reverse ise sıralı ise tersten sıralamasını ya da tam ters işlem için kullanılacak bilgiyi tutuyor. Sonrasında ise personels listesini bu bilgilere göre orderBy işlemi ile oluşturup kendisine set ediyoruz.

Tabiki bu işlemleri tetikleyecek butonlarımızın da olması gerekiyor.

Bu işlemle artık orderBy işlemlerimizi order fonksiyonu ile sıralanmasını istediğimiz alan bilgisiyle gerçekleştiriyoruz.

Ohhhhhhh uzun ama faydalı olduğunu düşündüğüm bu yazının da sonuna geldik. Biraz yoruldum sanırım bir çay arası vermeyi hak ettim. Sonra tekrar görüşürüz :)