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

0 dakikada yazıldı

5573 defa okundu

Düzenle

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" %>
 
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"\>

 
<script language="javascript" type="text/javascript">
function Uyari()
{
    alert("Düğmeye
basıldı"
);

}
function Bagla()
{
    $addHandler($get("Button1"), 'click', Uyari);
}
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml"\>
<head runat="server">
    <title>Untitled Page</title>
</head>
<body onload="Bagla();">
    <form id="form1"
runat="server">

        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <input ID="Button1" runat="server" type="button" value="button" /></div>
    </form>
</body>
</html>

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 ;)

Hepinize kolay gelsin.