Bir önceki yazımızda ASP.NET AJAX Extension ile beraber gelen istemci tarafındaki sayısal, metin ve tarih değişkenleri ile ilgili fonksiyonları inceledikten sonra sıra DOM objeleri ile ilgili metodlara geldi. İstemci tarafında JavaScript kodu kullanırken sıklıkla yaptığımız işlemler arasında sayfanın görsel özellikleri üzerinde oynamak geliyor. Bazen tüm sayfanın bazen de sayfadaki belirli elementlerin farklı özelliklerini JavaScript ile değiştirmemiz gerekebiliyor. Bu durumda artık eski stil JavaScript komutları ile boğuşmaktansa ASP.NET AJAX Extension ile beraber gelen yeni komutları kullanabiliriz. Yazı boyunca olabildiğince yeni özellikleri eski muadilleri ile karşılaştırarak ilerliyor olacağız.

$get Metodu

Sayfa içerisindeki HTML elementleri üzerinde JavaScript ile değişiklik yapabilmek için söz konusu elementleri sayfada bulmuş veya bir anlamda yakalamış olmamız gerekir. Elimizde olmayan bir obje üzerinde değişiklik yapmamız da mümkün olmayacaktır. Gelin ilk olarak eskiden bu işi nasıl yapıyorduk ona bir bakalım.

document.getElementById("Label1").innerHTML= "Birinci Metin geldi.";

Yukarıdaki kodu kullanarak sayfa içerisinde yer alan Label1 adındaki nesneyi yakalayarak JavaScript ile içeriğini değiştirebiliyoruz. Tabi bu kodu kullanmak için sayfamızda ScriptManager yer alması gerekmiyor. Peki projemiz hali hazırda bir ASP.NET AJAX projesi ise ve sayfamızda bir ScriptManager var ise ne kullanabiliriz?

    Sys.UI.DomElement.getElementById("Label1").innerHTML= "Metin geldi.";

ASP.NET AJAX Extension ile beraber gelen yapı yukarıdaki gibi. "Bunun neresi daha kolay?" deyişinizi duyar gibiyim. Kesinlikle haklısınız hiç de kolay değil, hatta bariz bir şekilde daha uzun bir kod söz konusu. Ama Microsoft tarafındaki geliştiriciler de zaten durumun farkında bu nedenle bu JavaScript sınıfları için birer kısayol komutu da tanımlamışlar.

    $get("Label1").innerHTML= "Metin geldi.";

Ne kadar kolay değil mi? Gerçekten de öyle. Sadece $get metodunu kullanarak yakalamak istediğimiz elementin ID bilgisini vermemiz yeterli. Elementi yakaladıktan sonra üzerinde her tür işlem yapabilirsiniz.

addCssClass Metodu

Sayfamız içerisindeki HTML elementlerini yakaladıktan sonra sıra geldi elementlerin görsel özelliklerini değiştirmeye. Bunun için ilk aşamada farklı görsel özellikleri tanımlayan birer CSS sınfı hazırlayalım.

       <style type="text/css">
.baslik1 {
       font-family: Arial, Helvetica, sans-serif;
       font-size: large;
       font-weight: bold;
       text-transform: uppercase;
       color: #FF0000;
}
.baslik2 {
       font-family: Arial, Helvetica, sans-serif;
       font-size: medium;
       font-weight: bold;
       font-variant: small-caps;
       color: #C0C0C0;
}
</style>

CSS sınıflarımızı yukarıdaki gibi tanımladıktan sonra bu CSS sınıflarını JavaScript ile yakaladığımız elementlere yine JavaScript ile ekleyeceğiz. Kodumuz aşağıdaki gibi olacak.

    Sys.UI.DomElement.addCssClass($get("Label1"), "baslik2");

Maalesef addCssClass metodu için bir kısayol metodu bulunmuyor, bu nedenle tam yolunu yazmamız şart. Örneğimizde de gördüğünüz üzere $get metodu ile sayfadaki Label1 nesnesini yakaladıktan sonra addCssClass metoduna birinci parametre olarak veriyoruz. Böylece addCssClass kendisine ikinci parametre olarak verdiğimiz isimdeki CSS sınıfını hangi HTML elementine ekleyeceğini de algılayabiliyor. Dikkatinizi çektiyse yukarıda iki adet CSS sınıfı tanımladık. Bir objenin CSS sınıfını değiştirmek isterseniz, yani söz konusu HTML elementinin CSS özelliğine addCssClass ile baslik1'i ekledikten sonra baslik2 CSS sınıfını eklemek isterseniz maalesef görsel olarak birşey değişmeyecektir. Bunun nedeni bir HTML elementine sadece bir CSS sınıfı ekleyebileceğinizdendir. Peki ne yapacağız? Tabi ki eklediğimiz CSS sınıfını önce çıkaracağız sonra da diğerini ekleyeceğiz. HTML elementlerinden CSS sınıfı çıkarmak için kullanacağımız metodu bir sonraki bölümde inceleyeceğiz.

removeCssClass Metodu

Bir önceki bölümde HTML elementlerine CSS sınıfları ekledik. Şimdi sıra geldi çıkarmaya. CSS sınıfını söz konusu elementten çıkartırsak başka bir CSS sınıfı ekleyebileceğiz.

    Sys.UI.DomElement.removeCssClass($get("Label1"), "baslik2");

Yukarıdaki kodumuz ile removeCssClass metoduna verdiğimiz ilk parametredeki HTML elementinden ikinci parametrede verdiğimiz CSS sınıfı çıkartılıyor. Böylece bir sonraki aşamada addCssClass metodu ile başka bir CSS sınıfını elementimize ekleyebiliriz.

containsCssClass Metodu

HTML elementlerine bir CSS sınıfını ekleyip eklemediğinizi kontrol etmeniz gerektiğinde containsCssClass metodunu kullanabilirsiniz.

<script language="javascript" type="text/javascript">
function Resim()
{
    if (Sys.UI.DomElement.containsCssClass($get("Image1"), "gizle"))
    {
        Sys.UI.DomElement.removeCssClass($get("Image1"), "gizle");
        Sys.UI.DomElement.addCssClass($get("Image1"), "goster");
    }
    else
    {
        Sys.UI.DomElement.removeCssClass($get("Image1"), "goster");
        Sys.UI.DomElement.addCssClass($get("Image1"), "gizle");
    };
}
</script>

Yukarıdaki Resim JavaScript fonksiyonumuz sayfada bulunan Image1 adında bir nesneyi bularak eğer CSS sınıfı gizle şeklinde verilmiş ise goster yapıyor, aksi halde ise gizle yapıyor. gizle ve goster CSS sınıflarını aşağıda inceleyebilirsiniz.

       <style type="text/css">
        .gizle {
               display: none;
        }
        .goster {
               display: block;
        }
    </style>

Söz konusu CSS sınıflarımız HTML elementi üzerinde değiştirildiğinde elementimiz sayfada bir görünmez olacak bir görünür olacak.

toggleCssClass Metodu

Geldik CSS sınıfları ile ilgili benim en sevdiğim fonksiyona. Tüm yukarıda öğrendiklerimizin ötesinde eğer bir HTML elementinin CSS sınıfını değiştirmek istiyorsanız kısa yoldan toggleCssClass metodunu da kullanabilirsiniz. Metodumuz hedef HTML elementinin CSS sınıfını verdiğimiz başka bir sınıf ile değiştiriyor. Gelin bir önceki bölümümüzde JavaScript kodumuzu toggleCssClass metodunu kullanarak baştan yazalım.

<script language="javascript" type="text/javascript">
function Resim()
{
    if (Sys.UI.DomElement.containsCssClass($get("Image1"), "gizle"))
    {
        Sys.UI.DomElement.toggleCssClass($get("Image1"), "goster");
    }
    else
    {
        Sys.UI.DomElement.toggleCssClass($get("Image1"), "gizle");
    };
}
</script>

Gördüğünüz gibi kodumuz çok daha kısa ve sade oldu. toggleCssClass metodunun kullanımı da aynı addCssClass metodu gibi. CSS sınıfını değiştireceğimiz HTML elementi ile birlikte atanacak CSS sınıfının adını sırası mile parametre olarak vermemiz yeterli.

İstemci taraflı ASP.NET AJAX Extension JavaScript yeniliklerini incelediğimiz serimizin bu yazısında DOM üzerinde işlem yapmayı ve görsel özelliklerle ilgili atamalar yapmayı inceledik. Bir sonraki yazımızda JavaScript handler işlemlerine değineceğiz.

Hepinize kolay gelsin.