Yükleniyor...

14 Ocak 2018

ASP.NET MVC Ajax Checkbox ile Ürün Filtreleme

CHECKBOXLAR İLE ÜRÜN FİLTRELEME!

Javascript ve Ajax kullanarak bir işlem yapabiliriz. Örnek vermemiz gerekirse; Checkbox kullanarak ürünleri kategorilerine göre listeleme, daha doğrusu kısaca filtreleme işlemlerinde bunu çok sık kullanabiliriz.

Bu işlem örneğin, ürün kategorilerinin checkbox olarak sayfaya getirilip, hangi kategorilere tıklanırsa daha doğrusu hangi checkboxlar check edilirse ona göre ürünlerin getirilmesidir. Bunun için tıklanılan checkboxların id’lerinin çekilmesi gerekir. Bu id’ler zaten kategorilere ait id’lerdir. Çekilen bu id’leri ise controller’a sent edip, gerekli işlemlerin yapılmasıdır.

1.ADIM VERİTABANI YAPISI

Veri Tabanı yapısı bu şekilde olmalıdır. Şimdi, mantık olarak bir ürün ya brand_id’ye, yada category_id’ye göre yada her ikisine göre gelmelidir. Product tablosunda görüleceği üzere “category_id” ve “brand_id” adında Foreign Key yani ilişkilendirilmiş yabancı anahtarlar bulunmaktadır.

“Brands” tablosunda ise görüleceği üzere orada da bir ilişkilendirilmiş “category_id” yabancı anahtar bulunmaktadır.  Bunu yapmamın nedeni, markaları kategorilere göre getirmektir.

Örneğin;

Erkek saatlerinde, Fossil, Cassio gibi markalar varken, Bayan saatlerinde ise Michael Kors, Daniel Klein gibi saatler vardır.

2.ADIM LİSTELEME

Bu adımda ise kategorileri ve markaları listelemem gerekiyor fakat bunları checkboxda göstermem gerekiyor. (Veri tabanından gelen değerler)  Şimdi bu adım herkese göre farklı olabilir. Ben listelerken, üstte ki menüden kullanıcı kategorileri seçebilir, seçtiği kategoriye göre o kategori checked’lensin, yani tik atılsın. demek istediğim şöyle ;

Kullanıcı Men Watches’a ait Fossil markasını seçti, bastığında açılan sayfada bunları belirtmem gerekiyor. Ayrıca burada gelen değerlerde veri tabanından gelmektedir. Diğer sayfada ise, şu şekilde gelmelidir.

Bu sayfanın view sayfası şu şekilde olmalıdır. Checked=”checked” kısmı önemli. Seçilen göre tik atılıyor. Burada marka ve kategori için if-else kullandım çünkü gelen değer var ise o checkbox checkedlensin sonra diğerleri gelsin.

Controller ise;

Request.QueryString ile category_id ve brand_id alıp ona göre işlemler yapıyorum. Buraya kadar anlaşılmadıysa daha da ayrıntılı anlatabilirim bana mesaj atmanız yeterli.

3.ADIM CHECKBOX ONCLICK EVENT

Şimdi checkboxları getirdiğimiz sayfada checkboxların “onclick” olayına bir fonksiyon yazmamız gerek. Daha doğrusu fonksiyon çağırmamız gerek. İşte checkbox’a basıldığında fonksiyon çalışacak ve marka ve kategoriye göre ürünler listelenecek. Checkbox’ların onclick olayında “getProduct()” adında bir fonksiyonu çağırdım. Ayrıca bir önemli adımda checkbox’ların “value” kısımlarını doldurmanız. “Value” kısımları zaten category_id veya brand_id olacak, o değerlere bu fonksiyonda ihtiyacımız olacak.

Buraya kadar umarım anlaşılmıştır. Şimdi gelelim dediğim fonksiyonu yazmaya.

4.ADIM FONKSİYON OLUŞTURMA

Açıklama satırlarına dikkat ediniz.  $(“#urunler”).html(result);  kısmı da çok önemli, fonksiyon eğer başarılı şekilde çalışırsa gelen değerleri bir div yardımıyla göstereceğiz. İlerleyen adımlarda karşımıza gelecek.

Burada category_id’yi ismi “rbn’ olan ve radio buton olan ve ayrıca checkedlenmiş yani tiklenmiş checkboxun value değerini aldım.

Aynı şekilde brand_id’yi ise class ismi “theSecond” olan, türü checkbox olan, ve tiklenmiş olanın value değerini alıyorum. Burada dizi oluşturdum çünkü kullanıcı birden fazla markayı seçebilir.

Fonksiyonda parantez hatası verebilir, bunu siz ayarlarsınız.

5.ADIM CONTROLLER

Controller kısmı bu şekilde, açıklama satırları olarak işlemleri elimden geldiğinde belirttim. Controller kısmına görüldüğü gibi parametleri yazdım. Fonksiyondan parametler gelecek yani değerler. Sorguları 2 listenin içine attım ve onlarıda ViewBag’a taşıdım. Şimdi yapmamız gereken şey bu Controller’a ait bir Partial View oluşturmaktır.

Bu kısıma ait sorularınız var ise lütfen çekinmeden bana mesaj atınız.

6.ADIM PARTIAL VIEW  OLUŞTURULMASI

Controller’a sağ tıklayın ve “Add View’e” tıklayınız. Açılan pencereden “Create as a partial view’a” tıklamınız gerekmektedir. Şimdi Partial View sayfanız oluşturuldu. Bu sayfada ürünleri getirmeniz gerekmektedir, ve aynı şekilde tekrar kategorileri ve markaları getirmeniz gerekmektedir, aslında kategori ve markaları tekrar getirmememiz gerekiyor çünkü bu anlamsız bizim sadece ürünlerle işimiz olmamız gerekiyor.

Kategorileri ve markaları tekrar bu partial viewde getirmemin amacı markaları kategorilere göre göstermemden kaynaklanmaktadır.

Bu sayfada artık ürünleri ve tekrar kategorileri listelemek kaldı, burası size kalmış.

Bu kısımda da ilgili sorun olursa eğer yardım edebilirim, çünkü bu kısım dediğim gibi sizin ayarlamalarınıza kalmış. Son bir adım daha kaldı.

7.ADIM FONKSİYONDAN URUNLER ADINDA DIV ÇAĞIRIMI

4.adımda belirttiğim gibi fonksiyonun success olayında gelen değerli göstermemiz gerekir. Success olayında bir div tanımladım ve bunu fonksiyonun olduğu sayfada çağırmamız gerek. Aslında o divin içerisine bizim oluşturduğumuz partial view sayfası gelecektir.

Resimde belirttiğim gibi çağırdık. Aslında biz bir checkboxa bastığımız zaman tüm Content’i değiştiriyoruz sayfa yenilenmeden !! Bu bilgi çok önemli. Sayfa yenilenmeden Ajax sayesinde hızlı bir şekilde verileri getirmekteyiz.

Bu div’i çağırdığınız yer çok önemli. Nerede çağırırsanız partial view orada bitecektir. Benim çağırdığım yere dikkat edin Container kısmının altında yani sayfanın orta kısmı değişecek. </div> kapatılma yerinede dikkat edin.

Eğer 6. ve 7. adımları tam olarak anlamadıysanız “ASP.NET MVC AJAX ILE PARTIAL VİEW ÇAĞIRIMI” adlı yazıma bakabilirsiniz, daha detaylı anlatılmaktadır.

https://ismaildogaan.com/2017/11/26/asp-mvc-ajax-partialview-cagirimi/

Örnek olarak benim sitemi inceleyebilirsiniz, umarım yararlı olmuştur. Sorularınızı heyecanla bekliyorum!

Projeyi Github hesabımdan indirebilirsiniz;

Posted in Ajax, Asp.net MVC, BilişimTaggs:
8 Comments
  • İlker

    İsmail bey biraz daha ayrirntili anlatabilirmisiniz.Asama aşama.veritabani yapisi nasil olmali.tesekkur ederim

    23:44 9 Nisan 2018 Cevapla
    • smldgn

      En kısa zamanda yazıyı düzenleyip, aşama aşama olarak düzenleyeceğim. Bugün okuldayım, gerçekten çok yoğunum. Affınıza sığınıyorum İlker Bey. Ayrıca en güncel halini paylaşacağım, Controller kısmına dizi yerine Koleksiyon(List) gönderilmesi daha iyi.

      11:17 10 Nisan 2018 Cevapla
    • smldgn

      İlker Bey, yazıyı güncellemiş bulunmaktayım. Umarım yararlı olmuştur, geç geri dönüşüm için kusura bakmayın. Eğer bir sorunuz olursa seve seve yardım edebilirim.

      13:02 22 Nisan 2018 Cevapla
  • İlker

    ismail bey merhaba yaziniz çok güzel hazirlanmiş.bu konu hakkinda bazı sorularım olacak.sizle nasıl iletişime gecebilirim.teşekkür ederim.

    22:45 17 Temmuz 2018 Cevapla
    • smldgn

      Teşekkür ederim İlker Bey, her şey sizin için. Mail yoluyla haberleşebiliriz isterseniz. ismaildogaan@gmail.com veya ismail@istplay.com adresinden erişim sağlayabilirsiniz. Sorularınızı heyecanla bekliyorum! 🙂

      13:25 18 Temmuz 2018 Cevapla
  • bsratspnr

    İsmail Bey merhaba, güzel bir konu da yazı hazırlamışınız. Yardımlarınız için tekrardan teşekkür ederim.

    14:21 9 Ağustos 2018 Cevapla
  • muhammed

    teşekkür ederim gmail için yararlı çalışma 🙂

    12:33 16 Mart 2019 Cevapla
    • smldgn

      Ben teşekkür ederim, yardım edebildiysem ne mutlu bana 🙂

      18:58 16 Mart 2019 Cevapla

Bir Cevap Yazın

%d blogcu bunu beğendi: