Makale Özeti

Konumuz: Ajax Toolkit Nesnelerinden olan ListSearcExtender. Nedir bu ListSearcExtender ? Düşünün bir adet Dropdownlist iniz var ve bunun içerisi o kadar dolu ki örneği Ülkeler var en az 100 tane ülke vardır. Kullanıcı 100 ülkenin arasından Türkiye’yi arayacak bulacak ve seçecek. ( Yeri bellidir gerçi ). Biz bu durumu şöyle basite indirgeyeceğiz. Kullanıcı dropdownlist i seçecek ve Türkiye yazdığı zaman Türkiye seçilecek. Tam olarak anlamanız için ufak bir örnekler devam edeceğiz.

Makale

ListSearchExtender (AJAX TOOLKIT)

Merhaba  Arkadaşlar;

Konumuz: Ajax Toolkit Nesnelerinden olan ListSearcExtender. Nedir bu ListSearcExtender ? Düşünün bir adet Dropdownlist iniz var ve bunun içerisi o kadar dolu ki örneği Ülkeler var en az 100 tane ülke vardır. Kullanıcı 100 ülkenin arasından Türkiye’yi arayacak bulacak ve seçecek. ( Yeri bellidir gerçi J ). Biz bu durumu şöyle basite indirgeyeceğiz. Kullanıcı dropdownlist i seçecek ve Türkiye yazdığı zaman Türkiye seçilecek.  Tam olarak anlamanız için ufak bir örnekler devam edeceğiz.

1. İlk önce bir Proje Açın (ASP.NET AJAX-Enabled Web Site) Açın.


Şekil - 1.1 ASP.NET AJAX-Enabled Web Site Yaratma.

Projemizi oluşturduk. Şimdi Web Form Üzerine Aşağıdaki Nesneleri Ekleyiniz.

1. DropDownList
2. ListSearchExtender

Bu Kontrolleri ekledikten sonra formumuzun görünümü aşağıdaki gibi olacaktır.



Şekil – 1.2 Gerekli Kontroller eklendikten sonra Form Görünümü

Şimdi default.aspx in page load kısmına aşağıdaki kodu yazalım ve DropDownListi içerisine birkaç bilgi dolduralım. Örneğin Ayların İsimlerini Dolduralım.




Bu koduda yazdıktan sonra geliyoruz ikinci aşamaya. ListSearchExtender Kontrolümüz ile DropDownList Kontrolümüz arasında ilişki kuracağız. Aşağıdaki Şekilde işaretlenmiş olan TargetControlID seçeneğinde bulunan DropDownList1 seçeneğini seçiyoruz ve projemizi çalıştırıyoruz.



Projemizi çalıştırdıktan sonra aşağıdaki görüntüyü alıyoruz. İnceleyelim sonra konumuza geri dönelim.



Şekil – 1.4 Proje ilk kez çalıştıktan sonra alınan görüntü .

Eğer burada Kontrolümüzün üzerine tıklarsanız. Kontrolün üst tarafında …to search yazısını alırsınız aşağıdaki resimde göründüğü gibi.



Şekil- 1.5 Nesne aktif olduğu zaman alınan görüntü.

Şimdi nesne aktifken bir ay ismi yazmaya başlarsanız otomatik olarak ilk yazdığınız harf örneğin Aralık ayını ararken ilk olarak a harfini yazdığımızda ilk olarak Ağustosu bulur ve seçer. Sonraki harflere bakarak işleme devam eder. Örneğin ar yazarsak DropDownList içeriğinde ar ile başlayan herhangi bir eleman olmadığı için aralığı bize bulur ve seçer. Aşağıda görseli sunulmuştur.



Şekil-1.6 Kontrol seçili iken ar yazılınca alınan görüntü.

Yukarıda görüldüğü gibi ar yazınca aralık ayını bize buldu ve seçti. Düşünsenize listboxınızda 500 adet kategori, ürün veya isim var. Ne kadar iyi değil mi ? Tabi kontroller db ile doluyorsa yine aynı mantıkla devam ediyorsunuz. Şimdi birazda görsele girelim. Örneğin kontrole tıklayınca … to search yazısı yerine … ara yazalım ve bu yazıyı kontrolün altında çıkaralım (Sağında veya Solunda Çıkabilir. Bunu da diğer bir makalede yazacağım ).Şimdi aşağıdaki kodları İnceleyelim ve farklı olan yerleri değiştirelim ( Example Sayabilirsiniz ).


Evet mutlaka bulmuşsunuzdur. Ama ben yinede anlatayım olayı size.  Önce Kendimize bir Style tanımlıyoruz. Yani Css tekniği kullanarak hazırladığımız bu stilin adını search_box koyuyoruz.



Sonra ListSearchExtender Kontrolümüzün Özelliklerini kullanarak değişiklikler yapıyoruz. Bu özellikler aşağıda kullanım şekilleri ile verilmiştir.



Ve Değişiklik yaptığımız yerde aşağıdadır.



Aslında ListSearch Extenderın yaptığı iş basit. Kontrol içerisindeki tüm elemanların isimlerini bir dizi değişkene atıyor. Ve bu dizi içerisinde Ajax sayesinde bize asenkron bir şekilde bize döndürüyor.

Şimdide Database bağlantılı bir deneme yapalım. Bu örnek için SQL 2005 AdventureWorks Kullanıldı.

Örnek olarak ne yapacağımızı kısaca anlatayım. Sonrada gerekli kontrolleri web formumuza ekledikten sonra devam edeceğiz. Bu arada daha gelişmiş bir görünüm ile yapacağız bu işlemleri.
Bir DropDownListe Db den gelen verileri doldurup buradan istediğimiz veriyi süzeceğiz. Yukarıdaki örnekle mantık aynıdır.

Şimdi Var olan projemize Add New Item diyerek bir adet Web Form Ekliyoruz. Ben adını Default2.aspx yaptım.
Bu Sayfa İçerisine Bir adet dropdownList ekleyiniz.
Page_Load Eventine Aşağıdaki kodları yazınız.


Eğer yukarıdaki namespace (İsim Uzayı) i eklemezsek. SqlVeritabanına bağlanmamızın olanağı var ama şu an için yok. Bu konu başka bir makale konusu olduğu için geçiyorum. Ama Yinede aşağıda yazdığım kodları kısada olsa anlatmaya çalıştım.


Yukarıda verdiğim kodlarla birlikte projemiz tamalanmadı. Ama biz çalıştırıp duruma bakalım hata kontrolü yapalım. Malum insanız . J Proje Çalıştıktan sonra alınan görüntü aşağıda verilmiştir.


Resim 1-7: Proje Çalıştıktan sonra verilerin çekilmesi ile alınan görüntü.

Görüldüğü Gibi veriler basılmış. Ama bir baksanıza ne kadar karışık. Ve bir sürü ürün var. Hangisini nasıl bulacağız. İşte ListSearchExtender kullanmanın Tam zamanı . Evet Projemize bir adet listsearch extender ekliyoruz. Ve yukarıda belirttiğimiz gibi TargetControlID özelliğini DropDownList1 e eşitliyoruz. Şimdi Projemize bir css dosyası ekleyelim ve içerisine aşağıdaki kodlamaları yazalım. Bu sayede görüntü özürlü bir kontrol kullanmayacağız.Ben adını yenicss.css yaptım.
Bu kod ile css dosyamız ile web formumuz arasında ilişki kuruldu. <head></head> tagları arasına koyunuz.


Ağadaki kodla birlikte artık sayfamızın heryerinde kullanabileceğimiz css classımız yani style ımız oldu. Detaylara girmiyorum yine makalemizin konusu olmadığı için,



Ve en nihayetinde bitti. Sıra geldi ListSearchExtender ımızı yapılandırmaya. Aşağıdaki kodlarla yine yukarıda yaptığımız gibi bir fark olmadan yapalım.Sadece Style adı değişik.



Sonuç olarak proje çalışınca aşağıdaki gibi enfes bir görüntü ile karşı karşıyayız ki projelerimizde çekinmeden kullanabileceğimiz sorunsuz ve güvenli bir kontrol.



Güle güle Kullanın. Diğer bir makalede görüşmek üzere. Esen kalın. Hoşçakalın.

Mehmet KURT ||YAZILIM UZMANI