Makale Özeti

ASP.Netin hayatımıza soktuğu sunucu kontrollerini, istemci tarafından kontrol etmek isterseniz bu yazımız işinize yarayacaktır.

Makale

ASP.Net ile hayatımıza giren web kontrolleri bize, inanılmaz şeyleri JavaScript bilgisine gerek kalmadan; kolayca yapma olanağı veriyor. Biz tek bir satır kod ile bir web kontrolünün görünürlüğünü kaldırabilir ya da aktifliğini kaldırarak (enable=false) kullanıcının bu kontrolü kullanmasını engelleyebilirsiniz. Bunların hepsi JavaScript tabanlı olaylar bile olsa ASP.Net bize istemci taraflı JavaScripti sanki sunucu taraflı bir dilmiş gibi kullanma olanağı vererek, kodlarımızda bize çok büyük kolaylıklar sağlar.

Ancak programcılık öyle birşeyki eldeki sistem ne kadar özellik sahibi olursa olsun tüm ihtiyaçlara cevap veremez ve biz alternatif yollar aramak zorunda kalırız. Bugünkü yazımızda böyle bir durum ile ilgili. Web kontrollerinin istemci tarafından kontrol edilmesi.

Böyle bir şeye ne gerek var, zaten web kontolleri sunucu tarafından kontrol edilebiliyor; birde istemci tarafından kontrol etmeye niye ihtiyaç duyalım diye düşünebilirsiniz. Haklısınızda, örneğin bir düğmeye tıklandığında bazı alanlarınızın aktif hale gelmesini istiyorsanız düğmenin tıklanma olayına (onClick) diğer kontrolleri aktif etmek için kod yazabilir ve düğmenin AutoPostBack özelliğini True yaparsınız. Böylece siz düğmeye bastığınızda sayfa bir defa sunucuya gider (post edilir) ve geri gelir. Geri geldiği zaman verileriniz kaybolmadığı gibi, istediğiniz değişiklikler gerçekleşmiştir. Programcı açısından bu güzel durumun bazı eksileri vardır; sayfa bir defa post edilmektedir. Bu durum yavaş internet bağlantısına sahip bir ziyaretçi için bir eziyete dönüşebilir.

Bu eziyeti engellemek, kullanıcıya kolaylık sağlamak içinse tek yol bu alanları JavaScript ile istemci tarafında kontrol etmektir...

Bu yazımızda aşağıdaki gibi bir sayfa kullanacağım.Yapmak istediğim şey ise Aktif Et yazan seçme kutusunun (checkbox) seçilmesi durumda alanların aktif olması, seçimin kaldırılması durumunda ise pasif olması.

Sayfada gördüğünüz gibi 1 adet ve 2 adet kontrolü bulunuyor. Bu kontrollerin isimleri ise:

  • TextBox > txtKad

  • 1.CheckBox > cbKaydet

  • 2.CheckBox > cbAktif

Biz aktifleştirme olayını cbAktif kontrolünün tıklanması ile olmasını istediğimiz için bu kontrolün koduna onClick="Aktliflik();" bölümünü ekliyoruz. Böylece cbAktif kontrolünün kodu aşağıdaki gibi oluyor.

Ayrıca txtKad kontrolümüz ile cbKaydet kontrollerine Enabled="False" kodunu ekliyoruz.Böylece onlarda üzerinde işlem yapılamaz hale geliyorlar. Son durumda kodları aşağıdaki gibi olmalı.


>

Son olarak bizim işimizi yapacak olan JavaScript kodumuzu yazıyoruz. Ama yazmadan önce biraz bilgi verelim. Eğer siz bu yukarıdaki sayfayı web kontrolleri ile oluşturup, çalıştırsanız ile HTML çıktısı olarak hepsi HTML nesnelerine dönüşür; yani , olur. Dolayısıyla ASP.Net ile kontroller üzerinde işlem yapmak istediğiniz zaman, ASP.Net özel bir JavaScript kodu oluşturup bu HTML nesnelerinde işlem yapar. Ama bu sefer biz ASP.Netin bu özel kodu oluşturmasına gerek kalmadan kendi yazacağımız JavaScript kodu ile işlemimizi yapacağız.

Eğer daha önce JavaScript ile biraz kodlama yaptıysanız, document.getElementById("nesne_id") kodunu görmüşsünüz. Bu kod sayfada id özelliği nesne_id olan bir nesne arar ve onu kullanmanıza imkan verir. Biz de bu kodu kullanarak nesnelerimizi disabled özelliklerini false yapacağız. Disabledın false olması, Enabled özelliğinin true olması demektir.Aşağıdaki kodu sayfanızda etiketleri arasına yerleştiriniz.

Gördüğünüz gibi kodumuz çok basit; yine de açıklanması gereken bir nokta var.!(document.getElementById("cbAktif").checked); kodu. Bu kodun parantez içindeki kısmı cbKaydet adındaki CheckBox nesnemizin seçili olma durumuna bakıyor ve seçili ise true; seçili değil ise false değer döndürüyor. Lakin şöyle bir düşünürsek eğer true değer döndürüyorsa, kutu seçili demektir, yani biz aktif olmasını istiyoruz kontrollerin; ama disabled=true, kontrolleri aktif değil pasif yapacağından, JavaScriptin ! (Not) operatörü ile true/false değerlerini tam tersine dönüştürüp eşitliyoruz.

Şu an tüm sayfanın kodu aşağıdaki gibi olmalı.

<%@Page Language="C#"%>





Örnek
















Kullanıcı Adı:Kaydet

www.maxiasp.net





Şimdi bu yukarıdaki kodu wc_byclient.aspx adıyla kaydedin ve deneyin. Kutuyu seçtiğiniz halde diğer CheckBoxın aktif hale gelmediğini göreceksiniz; ama JavaScript hata da vermemektedir.Bu sorunun cevabı kaynak kodlarda yatmaktadır. Eğer kaynak kodlarına bakarsanız, sizin yazmadığınız bir kod göreceksiniz.

Burada komutunu satırını siz yazmadınız ama ASP.Net sizin yerinize yazdı ve siz CheckBoxı aktif ettiğiniz halde, aktif olmadığı için, içindeki CheckBoxın da aktif olmamasına neden oldu. Ve gördüğünüz gibi ASP.Net e belli bir isim de vermediği için, JS ile aktif edemiyoruz.Yani durum içinden çıkılmaz gibi. Ama programcı zekası her zaman duruma bir çözüm bulur :) Bu durumun çözümü ise şu: Eğer biz cbKaydet isimli CheckBoxın Enabled özelliğini True yapar; ancak onu kendi eklediğimiz bir içine koyarsak, daha sonra bu kodunu da bir sunucu kontrolü haline getirirsek; o zaman onu JavaScript kodu ile aktif edebiliriz. Böylece sorun çözülür.

Şimdi kodumuz da biraz değişiklik yapalım. Önce cbKaydet kontrolü içine koyalım ve Enabled özelliğini ayarlayalım.Aşağıdaki kod yeni cbKaydet kodumuz.

Dolayısıyla JavaScript kodumuzda da değişiklik yapmamız gerekecek. cbKaydet yerine, spKaydet isimli kontrolünü aktif edeceğiz. JavaScript kodumuzu da aşağıdaki gibi değiştirelim.

Böylece değişiklikler bitti, şu an tüm sayfamızın kodu aşağıdaki gibi olmalı.

<%@Page Language="C#"%>





Örnek
















Kullanıcı Adı: Kaydet

www.maxiasp.net





Yaptığımız son değişikliklerle yukarıdaki hale gelen kodumuzu wc_client_2.aspx adı ile kaydedip çalıştırırsanız, sorunsuz çalıştığını göreceksiniz. Hayırlı kullanımlar ve hayırlı günler dileriz...