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

10.03.2010

6578

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.

Yazar Hakkında

Daron Yöndem

daron.yondem.com

DEVELOAD Yazılım şirketi kurucusu Daron Yöndem ASP.NET alanında aldığı MVP ünvanını son üç yıldır Silverlight alanında devam ettirmektedir. Microsoft Regional Director ünvanına da sahip olan Daron Yöndem’e 2009, 2010 ve 2011 yıllarında Microsoft tarafından “Gold Global Impact Award” ödülü verilmiştir. Microsoft TechEd, PDC, DevReach, Microsoft DevDays gibi uluslararası konferanslarda konuşmacı olan Daron Yöndem INETA (International .NET Association) Orta-Doğu Afrika Bölge Başkanlığı görevini sürdürürerek 262.000’i aşkın üyesi olan 58 sosyal topluluğa destek vermektedir. Üç Türkçe, üç İngilizce kitabı olan Daron Yöndem’in Wrox Publishing gibi uluslararası yayınevlerinden kitapları bulunmaktadır.

Yazar Hakkında

Sosyal Medya

0 Yorum

Yorum Yaz / Soru Sor

Son Yorumlar

En Güncel Sorular

En Son Cevap Verilen Sorular

Twitter

En Çok Okunanlar

Sponsorlar