ASP.NET 2.0 AJAX Kullanımı
AJAX (Asynchronous JavaScript and XML) ilk ortaya çıktığı günden beri büyük ilgi görüyor. Aslında kullanılan teknolojiler çok yeni olmamakla birlikte kullanım biçimleri AJAX’da daha farklıdır.
Bu yazımda ASP.NET AJAX’ın kullanımını basit bir örnek üzerinde anlatacağım.
Normalde bir web sitesinden sunucu taraflı bir talepte bulunduğumuzda, sayfanın tamamının yenilenmesi gerekir.
Örneğin bir metin kutusuna yazı yazıp önüne sunucu taraflı bir ifade eklemek istediğinizde öncelikle sayfanın tamamı yenilenerek ne isteğimiz sunucuya gönderilir ve sunucunun cevabı bize iletilir.
Konuyla ilgisi olmayan birimler, kontroller boşu boşuna sayfaya yüklenip zaman kaybedilir.
AJAX bu tip bir işleyişin önüne geçer.
AJAX ile sadece sayfadaki ilgili birimler işleme konur, diğerleri huzur içinde sayfadaki konumunu korur.
Bunun nasıl olduğunu birazdan göreceğiz.
Böyle bir kullanım gereksiz trafiği ve zaman kaybını önler.
Uygulamamıza geçmeden önce birkaç açıklama daha yapmakta fayda var.
İşin gerçeğinde AJAX tekniği karmaşık bir teknolojidir.
Çünkü javascript ve XML entegre bir biçimde kullanılarak oluşturulur.
Ancak ASP.NET AJAX Visual web Developer 2005 Express veya Visual Studio 2005 de entegre kullanacağımız arabirimlerle bu işi oldukça kolaylaştırmaktadır.
Tek satır javascript kodu yazmadan bir AJAX uygulaması geliştirebilirsiniz.
ASP.NET AJAX eskiden ATLAS olarak biliniyordu ancak bu isim artık kullanılmıyor.
Şimdi gelelim uygulamamıza.
ASP.NET AJAX’ı temin etmek
ASP.NET AJAX kütüphanesini indirmek için www.ASP.NET sayfasından
AJAX linkine gidin. Bu sayfanın alt kısımlarında “download now” diye bir buton vardır, ASP.NET AJAX ı bu butona tıklayarak indirebilirsiniz.
Uzantısı msi olan bu dosyayı bilgisayarınıza kurmalısınız:
Kurulum işlemi birkaç dakikanızı alacaktır.
Kurulum bittikten sonra artık geliştirme ortamınız AJAX özellikli olacaktır.
Visual web Developer 2005 Express veya VS 2005 editörümüzü açtığımızda, yeni projeler kısmında bu özellikteki dosya şablonunu göreceksiniz.
Yeni bir proje oluşturmak için bu özellikteki dosya şablonunu tıklamanız yeterli.
Açılan dosyaya AJAX özellikleri eklenecektir.
AJAX Özellikli bir uygulama
Buraya kadar AJAX’ın ne olduğunu, nasıl temin edebileceğimizi gördük.
Şimdiyse bir uygulama üzerinde AJAX’ın nasıl çalıştığını göreceğiz.
Böylece AJAX konusunda çok daha net bir fikre sahip olacağız.
Geliştireceğimiz uygulama gayet basit: Sayfaya bir buton ve metin kutusu yerleştireceğiz.
Ayrıca iki tane de zamanı gösteren Label koyacağız.
Bunlardan biri normal özellikte bir Label olacak diğeri ise AJAX özellikli.
Ama sanırım konu örnek üzerinde daha net anlaşılacak.
Yukarıdaki gibi AJAX özellikli sayfayı açtıktan sonra
<asp:ScriptManager ID="ScriptManager1" runat="server" />
Tag’ının otomatik olarak eklendiğini görürüz.
Bu tag sayfamızı normal bir ASP.NET sayfasından çıkartıp AJAX özellikli yapar.
Şimdi sayfamızın dizayn kısmından şu elemanları ekleyelim:
Buradaki iki Label elemanı o anki zamanı gösterecek. Diğer Label elemanı da metin kutusuna yazdığımız metni sayfaya yazdıracak.
Sayfanın kodları:
Buraya kadar her şey normal bir uygulama geliştirme yöntemi.
Metin kutusuna bir metin yazıp butona tıkladığımızda iki Label’daki zaman değerleri doğal olarak aynı zamanı gösteriyor:
Üsteki ve alttaki zaman aynı.
Şimdi yapmak istediğimiz, sayfanın sadece ilgili elemanlarının sunucuyla iletişime geçmesi ve konuyla ilgili olmayan elemanların durumunu korumasıdır.
Örneğimizde sayfanın güncellenen kısmı sadece metin kutusu ve ona ait Label’dır, dolayısıyla sadece metin kutusunda bir işlem alışverişi yapılmasını ve zamanı gösteren diğer Label (en alttaki) elemanının sayfada sabit kalmasını istiyoruz.
Diğer Bir ifade ile sayfanın tamamının sunucuya gönderilmesini değil sadece ilgili kısma ait veri alışverişinin yapılmasını istiyoruz.
Bunun için bir ASP.NET AJAX kontrolünden faydalanacağız.
Editörümüzün Toolbox kısmına baktığımızda ASP.NET AJAX tarafından eklenen kısmı göreceğiz:
Buradan UpdatePanel kontrolünü alıp sayfaya ekleyin.
Daha sonra en alttaki Label hariç diğer kontrolleri bunun içine sürükleyip bırakın.
Bu panel içindeki elemanlar AJAX işlemine tabii tutulacaklardır.
Diğer bir ifadeyle butona tıklandığında (olay meydana geldiğinde) sadece buradaki elemanlar sunucuyla veri alışverişinde olacaktır, sayfanın tamamı değil.
Şimdi metin kutusuna bir isim girip butona tıklayın…...
Butona tekrar tıklayın:
Butona her tıkladığınızda üsteki zamanın sürekli değiştiğini ama alttakinde her hangi bir değişim olmadığını göreceksiniz. Bu durum sayfanın tamamının değil sadece ilgili kısımlarının verilerinin güncellendiğinin en iyi göstergesidir.
İşte AJAX tam anlamıyla böyle bir yöntemdir.
Gerçekten çok kullanışlı ve gereksiz trafiği önleyen bir yöntem.
Bu tip uygulamaları yahoo, google ve gmail’in pek çok özelliğinde görebilirsiniz.