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.

http://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!

http://luxwatches.xyz

 

 

 

Takipte Kalın 🙂
Bu yazı Ajax, Asp.net MVC, Bilişim kategorisine gönderilmiş ve , , , , , , , , , , ile etiketlenmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.

ASP.NET MVC Ajax Checkbox ile Ürün Filtreleme için 8 cevap

  1. İlker der ki:

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

    • smldgn der ki:

      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.

    • smldgn der ki:

      İ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.

  2. İlker der ki:

    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.

  3. bsratspnr der ki:

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

  4. muhammed der ki:

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

Bir cevap yazın

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

Alanı Doldurunuz! *