ASP.NET AJAX Extension JavaScript İstemci Özellikleri (Bölüm 5 - Handler Kullanımı)

ASP.NET AJAX Extension JavaScript İstemci Özellikleri (Bölüm 5 - Handler Kullanımı)

ASP.NET AJAX ile beraber gelen JavaScript özelliklerine değindiğimiz yazı serisinin son yazısında JavaScript handler işlemlerine bakacağız. ASP.NET sunucu tarafındaki handler yaratmak bizim için çok kolay. Oluşturduğumuz herhangi bir Sub"ın tanımının sonuna handles yazdığımızda olası seçenekler karşımıza çıkıyor. Ayrıca otomatik olarak gerekli kodların eklenmesini de sağlayabiliyoruz. AddHandlers metodu sunucu tarafında kullandığımız metodlardan biri. JavaScript ile istemci tarafında da bu tarz işlemler yapmamız mümkün. Bir düğmenin tıklandığında hangi komutları çalıştıracağına yine istemci tarafında JavaScript ile karar verebiliyoruz. Gelin kullanabileceğimiz metodlara ufak örnekler ile bakalım.

$addHandler Metodu

Sayfa içerisindeki HTML elementlerinin farklı durumlarına handler"lar atamak için $addHandler metodunu kullanıyor olacağız. Başındaki $ işaretinden de anlaşılacağı üzere bu bir kısayol metodu. Metodun tam yolu Sys.UI.DomEvent.addHandler şeklinde. Örneğimizde bir düğmenin onclick durumunda hangi JavaScript komutunu çalıştıracağına yine başka JavaScript komutları ile karar veriyor olacağız. Bunun için bagla adındaki bir JavaScript fonksiyonu kullanacağız ve söz konusu fonksiyon sayfanın ilk açılışında çalışıyor olacak.

<%@ Page Language="VB" %>             

       
                                   
   

Yukarıdaki örneğimizde sayfanın başında body tagına verdiğimiz onload durumunda çalışan Bagla fonksiyonu devreye giriyor. Sonrasında Bagla fonksiyonu içerisindeki kodumuz ile Button1"in click durumuna Uyari adındaki JavaScript fonksiyonumuzu aktarıyoruz. Böylece bir sonraki aşamada artık düğmeye basıldığında Uyari fonksiyonu çalışıyor olacak.

$addHandlers Metodu

Bir önceki bölümde incelediğimiz addHandler metodu ile birden çok handler eklerken kullanabileceğimiz bir diğer method da addHandlers metodu. Birden çok handlerı bir HTML elementine eklemek için tek yapmamız gereken listemizi aşağıdaki formatta hazırlayarak addHandlers metoduna aktarıyor olmak.

{click:Uyari, mouseover:Tikla, mouseout:Dugme}

Listemizi handler isimleri ve çalışacak JavaScript fonksiyonlarının isimlerinden yukarıdaki şekilde hazırladıktan sonra addHandlers metodunu aşağıdaki şekilde kullanabiliyoruz.

$addHandlers($get("Button1"), {click:Uyari, mouseover:Tikla, mouseout:Dugme});

addHandlers metoduna verdiğimiz ilk parametre handler"ları eklemek istediğimiz HTML elementinin kendisi. İkinci parametremiz için bir önceki aşamada hazırladığımız handler listemiz.

$removeHandler Metodu 

Handler"ları kontrollerimize ekledikten sonra bazı durumlarda çıkarmak da isteyebiliriz. Örneğin bir düğmeye bir defa basılacak ise handler"ını kaldırarak bir daha basılmasını engelleyebiliriz. Bu durumda kullanacağımız metodun adı $removeHandler şeklinde. Metodumuzun kullanım şekli aşağıdaki gibi;

$removeHandler($get("Button1"), "mouseover", Tikla);

$removeHandler metodu bizden toplamda üç parametre alıyor. Bu parametrelerden ilki handler"ı kaldıracağımız HTML elementinin kendisi. İkinci parametre ise handlerın adı. Biz kodumuzda söz konusu HTML elementinden mouseover handler"ını kaldırıyoruz. Son parametre olarak da handler olan JavaScript fonksiyonunun adını veriyoruz.

$clearHandlers

Peki HTML elementimizden tüm handler"ları kaldırmak istiyorsak ne yapabiliriz? İşte bu noktada $clearHandlers metodunu kullanabiliriz. Söz konusu metod parametre olarak sadece hedef HTML kontrolünü alıyor. Sonrasında HTML elementine ait tüm handler"lar temizleniyor.

    $clearHandlers($get("Button1"));

Yukarıdaki kodumuz kendisine aktarılan Button1 elementinden tüm handler"ları siliyor.

Sonuç

ASP.NET AJAX Extension ile beraber gelen JavaScript özelliklerini incelediğimiz bu yazı serimiz boyunca ilk olarak sınıf, üye ve kütüphane yapılarını inceledik, enumaration yapısını kullandık. Sonrasında JavaScript dizileri üzerinde çalışırken bize kolaylık sağlayabilecek yeniliklerden bahsettik. Metin, tarih ve sayısal değişkenlerle ilgili yeni JavaScript fonksiyonlarını da inceledikten sonra DOM üzerinde HTML elementlerine ulaşabilmemizi ve görsel özelliklerini değiştirebilmemizi sağlayacak JavaScript yenilikleri ile ilgili örnekler yaptık. Son olarak bu yazımızda da handler işlemlerinden bahsettik.

Tüm bu yeni JavaScript olanakları ile istemci taraflı programlama yapmanın kolaylaştığından bahsetmek hiç de yanlış olmaz. AJAX Extension ile gelen bu yeniliklerle hepinize yeni projelerde başarılar dilerim.

Döküman Arama

Başlık :

Kapat