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

Yazar: Daron Yöndem
Kategori: ASP.NET
Eklenme Tarihi: 6.3.2008 17:28:38



Serimizin bu son makalesinde ASP.NET AJAX Extension ile beraber gelen JavaScript özelliklerinden farklı HTML elementleri üzerinde handler'larla ilgili işlemler yapmamıza olanak tanıyan yeniliklerden bahsedeceğiz.

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.

Daron Yöndem
MCPD, MCITP, MCTS, MCSD, MCAD
MCDBA, MCP, ACP, ICSD, IEL'03
http://daron.yondem.com


Daron Yöndem

İstanbul Erkek Lisesi?nden 2003 yılında mezun oldu ve DEVELOAD Yazılım ve Tasarım (www.deveload.com) şirketini kurdu. Daron Yöndem şu an Portsmouth Üniversitesi'nde Strategic Business Information Technologies alanında yüksek lisans eğitimine devam ediyor. MCT, MCPD, MCITP, MCTS, MCSD, MCAD, MCDBA, MCP, ACP ve ICSD ünvanlarına sahip olan Daron Yöndem Türkiye'nin ilk Silverlight ve Expression Studio eğitimini Microsoft Türkiye organizasyonu ile verdi. Daron Yöndem'in Microsoft ASP.NET resmi sitesi, Microsoft Coding4fun, yazgelistir.com, PC World Türkiye ve PC Extra Türkiye'de çok sayıda makalesi yayınlanmıştır. En geniş Türkçe kaynak olma özelliği taşıyan Pusula Yayıncılık?tan çıkan ASP.NET AJAX kitabının yazarı Daron Yöndem halihazırda PCnet dergisinde AJAX, Expression Web, Expression Blend, Expression Design ve Silverlight yazıları yazmakta, nedirtv?com WPF/Silverlight ve VB.NET editörlüğü yapmaktadır. Kişisel bloğu http://daron.yondem.com adresi üzerinden İngilizce ve Türkçe makaleler
Bu makaleye ilk yorum yapan siz olun.

Yorumunuz