Merhaba arkadaşlar, uzun bir aradan sonra tekrar sizlerle birlikteyim. Bugün ki makalemizde MVC 3 ile sayfada tablo şeklinde gösterdiğimiz verilerimizin, belirli kriterlere göre satırlarını javascript ile nasıl renklendireceğimizi anlatmaya çalışacağım. Bu örneğimizde veritabanından çektiğimiz verilerimizi durum kriterine göre aktif olanları farklı, pasif olanları farklı renklerde kullanıcılarımıza sunacağız. Aynı zamanda select nesnesi ile kullanıcılarımızın durumunu aktif veya pasif edebilecek ve eş zamanlı olarak tablomuza ait satırımızın rengini değiştireceğiz. Aslına bakarsanız tüm olay tamamen javascript tarafında bitiyor. Bilmemiz gereken tek şey bizim hangi satırı seçtiğimiz ve hangi alanda değişiklik yaptığımız. İsterseniz daha fazla konuşmadan uygulamamıza geçelim.Bu uygulamamızda ben örnek bir veritabanı hazırladım.Veritabanımızda aşağıdaki gibi users isimli bir tablomuz var ve içinde dört adet kullanıcımız var.



Şimdi users isimli tablomuzdaki kullanıcılarımızı, homecontroller classımız içindeki dönüş tipi actionresult olan metodumuz içinde çağırıyoruz. Ardından bu metodumuza hemen bir view ekliyoruz (bilmeyenler için yazdığımız metot üzerine gelip “add view” dediğimizde hazırlamış olduğumuz metodumuza bir view ekleyebiliriz).



View eklerken model olarak users tablosunu seçiyoruz ve template olarak da list’i seçiyoruz ve add butonuna basarak view’imizi projemize dahil ediyoruz. Şimdi list yapısını aslında MVC bize hazır olarak sunuyor fakat bizler projemizde kendi html kodlarımızla da sayfaya yeni bir görünüm kazandırabiliriz. Bunun için ben yeni oluşturduğum sayfa içerisinde yer alan bütün html kodları siliyorum. Yeni oluşturduğum html yapı şöyle;




Buradaki UpdateKullaniciDurum isimli fonksiyonumuz,select elemanımız değiştirildiğinde çalışacak olan javascript kodumuzdur.



Ajax post yöntemi ile seçilen kullanıcının yeni durumunu, UpdateKullaniciDurum isimli metodumuz ile güncelliyoruz. Kullanıcının durumu değiştirildiğinde, view içierisinde yer alan tablonun satır renklerinin de değişmesi için metodumuzun geriye "Json" döndürmesi gerekmektedir.
Aşağıdaki kod bloğundakiler, ajax ile post edildikten sonra homecontroller classında çalışacak metoddur (Update işlemini yazarak konudan uzaklaşmak istemedim. Siz istediğiniz şekilde yazabilirsiniz).

Bir sonraki makalemizde görüşünceye dek hoşça kalın.

Recep SELLİ