Süleyman Demirel Üniversitesi Bilgisayar Teknolojisi ve Programlama Bölümü ASP.NET 2.0 AJAX. Yazarlar. Mesut ERDEMİR (

Transkript

1 Süleyman Demirel Üniversitesi Bilgisayar Teknolojisi ve Programlama Bölümü ASP.NET 2.0 AJAX Yazarlar Mesut ERDEMİR ( Mustafa KARAŞ (

2 AJAX AJAX NEDİR? AJAX, Asynchronous JavaScript and XML yani asenkron JavaScript ve XML anlamına gelir. İnternet sayfalarında, JavaScript ve XMLHttpRequest kullanımı ile etkileşimli uygulamalar yaratan tekniğin adıdır. En yaygın kullanım alanı, sayfayı yeniden yüklemeye gerek kalmazsızın, sayfada görünür değişiklikler yapmaktadır. XMLHttpRequest nesnesi kullanılarak birden fazla bağımsız işlem yapılabilir. Bazı bilişim uzmanları, AJAX ın HTML ve XML den sonra en yenilikçi internet yazılımı olduğunu ve Web 2.0 ı sonlandırıp, 3. evrenin kapısını açtığını öne sürmüşlerdir. Asynchronous JavaScript and XML sözcüklerinin kısaltması olan AJAX, etkileşimli(interaktif) web uygulamaları yaratmak için kullanılan bir web programlama tekniğidir. Temel amacı, arka planda sunucuyla ufak miktarda veri değişimi sayesinde sayfayı daha hızlı güncellenebilen web sayfaları yapmak, dolayısıyla kullanıcının istediği her anda bütün web sayfasını güncellemek derdinden kurtarmaktır. Bu da web sayfasının etkileşimini, hızını ve kullanılabilirliğini artırmak demektir. AJAX HANGİ TEKNOLOJİLERİ KULLANIR? Bilgiyi biçimlendirmek ve görüntüsünü değiştirmek için XHTML(ya da HTML) ve CSS Görüntülenecek bilgiyi dinamik olarak göstermek ve onunla etkileşimli çalışmak için özellikle JavaScript ve Jscript gibi ECMAScript olan kullanıcı tarafındaki bir Script dili yardımıyla erişilebilen DOM(Document Object Model) Web sunucusu ile bilgi değiş tokuşunda kullanılan XMLHttpRequest objesi. Bazı Ajax Frameworklerde ve bazı durumlarda web sunucusuyla bilgi alışverişi için XMLHttpRequest yerine Iframe de kullanılır; diğer uygulamalarda ise dinamik olarak eklenen JavaScript Tag leri de kullanılabilir. Kullanıcıyla sunucu arasındaki bilgi alışverişinde genelde XML formatı kullanılır. Önceden hazırlanmış HTML, düz metin, JSON ve hatta EBML dahi olmak üzere herhangi bir formatta da kullanılabilir. Bu tip dosyalar, sunucu tarafında herhangi bir script(php, ASP, vs.) ile bile üretilmiş olabilir DHTML, LAMP ve SPA gibilerin aksine AJAX, kendi başına bir teknoloji değildir, ancak terim birçok teknolojinin bir bütün olarak kullanıldığını ifade eder. 2

3 AJAX IN AVANTAJLARI Bandgenişliği Ayarlama HTML yi ağ tarayıcısı(browser) programında oluştururken, JavaScript işlemlerini ve işlenecek verileri kullanırken, sunucudan gelen sayfa bilgisi gerektiğinden daha az yer tuttuğundan dolayı, AJAX web sayfalarının görece olarak daha hızlı yüklendiği gözlenebilir. Bu tekniğe örnek olarak bilginin birden çok sayfadan oluştuğu büyük miktarda veriyi ele alalım. Ajax ile sayfanın HTML kodu, örneğin bir tablo kontrolü ya da ilgili TD, TR etiketler(tag), ağ tarayıcısı içinde oluşturulabilir, dolayısıyla dökümanın ilk sayfasını indirmeye gerek kalmaz. İçeriğin, İsteğe bağlı olarak yüklenmesine ek olarak, bazı uygulamaları ilk önce Olay Yöneticilerini(Event Handler), ardından ilgili fonksiyonları indirir. Bu teknik, karmaşık mekanizması ve fonksiyonu olan web uygulamalarının gereksinim duyduğu yüksek miktarda bandgenişliği tüketimini önemli ölçüde hafifletir. Kullanıcı Arabirimi Ajax kullanmak için en önemli neden, kullanıcı arabirimindeki iyileştirmedir. Ajax kullanılan sayfalar tipik bir web sayfasından çok, tarayıcının çalıştığı bilgisayarda bir Stand-alone uygulama gibidir. Sayfanın tamamının güncellenmesini gerektiği linklere tıkladığı zaman, işlemin çoğunun hantal olduğu hissedilir, ancak Ajax ile sayfa çoğu kez dinamik olarak güncellenebilir. AJAX IN DEZAVANTAJLARI Google ve benzeri site indexleyen robotlar tarafından henüz ikinci plandadır ve en büyük dezavantajı budur. Ancak içeriğie uygun site haritaları ile içeriğin arama motorları tarafından indexlenmesi sağlanabilir. Bu konuda en iyi yöntem, sitenin arama motorları için tasarlanmış ayrı bir sürümünü oluşturmaktır. Herhangi bir sunucu tarafı programlama dili ile senkronize edildiğinde, genelde yazılması gereken kod miktarını neredeyse iki katına çıkarır. Bunun sebebi olarak, ajax ile yazılmış fonksiyon yada sınıfın talep cevap sistemi ile çalışması gösterilebilir. Ajax uygulamasının gönderdiği her bir talep için sunucu tarafında cevap verecek bir dosya olması gerekmektedir. Tarayıcı Uyumluluğu Dinamik olarak olşuşturulan sayfalar, tarayıcının önceden işlediği sayfaları yöneten mekanizmalarına kendini otomatik olarak kaydetmez, bu yüzden tarayıcının Geri tuşuna basıldığında istenen sayfa elde edilmeyebilir. Geliştiriciler bu problemi çözmek için değişik çözümler geliştirmiştir. Bu tip çözümler genelde tarayıcının Geri tuşu kullanıldığında geçmiş listesiyle ilgili işlemleri çalıştıran, görünmez Iframe kullanır. Örneğin Google 3

4 Maps( arama suretiyle istenen bilgileri önce görünmez bir Iframe içinde işler, sonra sayfanın görünen kısmında ilgili elemanın içine yerleştirir. World Wide Web Consortium(W3C) Iframe elemanını XHTML 1.1 çalışmasına eklememiştir, bunun yerine object elemanını önermiştir. Yanıt Verme Süresiyle İlgili Kısıtlamalar Ajaxla geliştirme esnasında ağ gecikmesi yada kullanıcı isteğine sunucunun verdiği yanıt arasında geçen süre özellikle dikkate alınmalıdır. Gecikme denen şey, kullanıcıya bilginin düzgün gönderilmesi ya da XMLHttpRequest objesinin doğru bir şekilde kullanılmaması durumunda kullanıcının beklemediği yada anlamadığı bir olaydır. Buna ek olarak, bütün bir sayfa render edilirken sayfanın içeriği değişimi esnasında insan gözünün adaptasyonu için geçen belli bir süre vardır. Ekranın değişiminin daha ufak adımlarla ayarlanması yapılmazsa bu gecikme daha çok hissedilir. Kullanıcıya arka planda bir işlemin yapıldığı yada içeriğin yüklenmeye çalıştığını söylemek için kullanılan görsel efetkler, bu tip gecikme problemine çözüm olarak önerilmektedir. Genel olarak ağ gecikmesinin zamana bağlı olarak değişmesi gibi gecikmenin potansiyel etkileri, halihazırda bulunan açık kaynak Ajax araçlarının ve Framework lerin hiçbirinde henüz çözümlenememiştir. Arama Motorlarıyla İlgili İyileştirmeler Arama motorlarınca indexlenmesi gereken bilgileri yüklemek için Ajax kullanılan web siteleri, Ajax işlevselliği için gerekli olan JavaScript kodunu arama motorlarının genelde çalıştıramamasından dolayı, arama motorlarının okuyabileceği bir formatta ve bir URL linki şeklinde bilgi koymalıdır. Bu problem Ajax a özgü değildir, çünkü örneğin form gönderme sonrası gereken tam sayfa güncellemesi gibi dinamik sayfalar üreten sitelerde de bu problem vardır. AJAX hakkında temel bilgileri verdikten sonra, artık uygulama kısmına geçebiliz. Bir sonraki kısımda, ASP.NET 2.0 AJAX Toolkit kurulumu anlatılıp, daha sonra tüm kontroller tek tek ele alınacaktır. NOT: ASP.NET bildiğiniz varsayılacaktır ve ASP.NET in ayrıntılarına girilmeyecektir. ASP.NET 2.0 AJAX İÇİN GEREKENLER ASP.NET 2.0 ile AJAX kodlama yapmak için gereken bileşenleri, aşağıdaki adreslerden ücretsiz olarak temin edebilirsiniz. Eğer.NET 2.0 yerine.net 3.5 ile kodlama yapmayı düşünüyorsanız, bu yazılımların.net 3.5 4

5 versiyonlarını da bu adreslerden bulabilmeniz mümkündür. Bu kitapta,.net 2.0 üzerinde çalışılacağı için,.net 3.5 a değinilmeyecektir. IDE: Microsoft Visual Web Developer 2005 Express ( ISO dosyası (439 MB) EXTENSION: ASP.NET AJAX 1.0 Extension ( MSI dosyası (1.4 MB) TOOLKIT: AjaxControlToolkit ( ReleaseId=11121) ZIP dosyası (3.37 MB) ASP.NET 2.0 AJAX GELİŞTİRME ORTAMININ KURULMASI Microsoft Visual Studio 2005 Express Kurulumu İşe, ASP.NET 2.0 geliştirme ortamını kurmakla başlayalım. Öncelikle, indirdiğimiz Microsoft Visual Studio 2005 Express Edition u kurmakla başlayalım. Bunun için, dosyaları imajdan çıkarmamız gereklidir. Herhangi 5

6 bir.iso imajlarını açabilen arşiv programıyla, dosyaları bir dizine çıkartabiliriz ya da Nero gibi CD/DVD yazma programlarıyla CD ye yazdırabiliriz. Ben CD ye yazdırmayı tercih ettim. Kurulum için, çıkarttığınız dizinde ya da yazdırdıysanız CD de autorun.exe dosyasına çift tıklayak(eğer kendiliğinden çıkmazsa) kuruluma başlayabiliriz. Kuruluma başlarken, kurulum için gerekli dosyalar temp dizinine çıkartılır. (Şekil - 1) Şekil - 1 Gerekli dosyalar, temp dizinine çıkarıldıktan sonra, kuruluma hoşgeldiniz ekranı bizi karşılar.(şekil 2) Şekil 2 Hoşgeldiniz ekranını Next diyerek geçelim. Karşımıza son kullanıcı lisans anlaşması gelecektir.(şekil 3) I accept the term of the License 6

7 Agreement (lisans sözleşmesini kabul ediyorum) işaretleyerek Next ile ilerleyelim. Şekil 3 Daha sonra, karşınıza Installition Options formu gelecektir. Burada yüklemek istediğiniz extra bileşenleri seçip Next ile devam ediyoruz. (Şekil 4) Buradaki iki tiki bırakmanızı tavsiye ediyoruz. Şekil 4 Ekrana gelen Destination Folder fomunu da Install diyerek ilerileyelim. (Şekil 5) Bu aşamadan sonra kuruluma geçilecektir. 7

8 Şekil 5 Kurulumda yüklenecek bileşenler, bilgisayarınızda olup olmadıklarına göre farklılıklar gösterebilir. Örneğin ben, yeni kurulmuş bir Windows XP de yaptığım için, Microsoft Windows Installer 3.1 ve.net Framework 2.0 yazılımları da yüklemeye dahil olmuşlardır. Yüklenecek tüm paketler, bilgisayarınızda 1.5 GB lik bir alan kaplayacaktır. Ve bilgisayarınızın hızında göre, ortalama dakikalık bir zaman alabilir. Kurulumda,.NET Framework yüklendikten sonra, yeniden başlatmanız gerektiğini söyleyen bir pencere gelecektir(şekil 6). Bu durumda Restart Now seçeneğine tıklayın ve bekleyin. Bilgisayar açıldıktan sonra, kuruluma kaldığı yerden devam edecektir. Şekil 6 Gerekli bileşenler yüklendikten sonra, Visual Web Developer 2005 in bileşenlerinden kuruluma devam edilecektir.(şekil 7) 8

9 Şekil 7 Bileşenler yüklendikten sonra, işlemin başarıyla gerçekleştirildiğine dair mesaj ekranı gelecektir.(şekil 8) Burada Exit diyerek kurulumu bitirelim. Şekil 8 Programı çalıştırmak için, Başlat > Programlar > Microsoft Visual Web Developer 2005 Express Edition yolunu takip ederek ulaşabilirsiniz.(şekil 9) 9

10 Şekil 9 Şekil 9 daki kısayola tıkladığınız taktirde, hoş bir ekran bizleri karşılayacaktır. Şekil 9 Ardından, Web geliştirme ortamımız ekrana gelecektir.(şekil 10) Şekil 10 IDE ortamımız olan, Visual Web Developer 2005 Express Edition u başarıyla kurmuş bulunmaktayız. Microsoft ASP.NET 2.0 AJAX Extensions 1.0 Kurulumu Microsoft Visual Web Developer 2005 Express ile birlikte AJAX bileşeni gelmediği için, bu aracı yüklemek zorundayız. 10

11 Öncelikle, ASPAJAXExtSetup programını çalıştıralım(şekil 11). Şekil 11 Ekrana, ASP.NET 2.0 AJAX Extensions 1.0 Setup sihirbazına hoşgeldiniz penceresi gelecektir. Buradaki ekranda Next ile ilerleyelim.(şekil 12) Şekil 12 Daha sonra, son kullanıcı lisans anlaşması ekrana gelecektir(şekil 13). Burada yine, I accept the term in the License Agreement yazısının önündeki kutucuğa tik koyup, Next ile devam edelim. Şekil 13 Ready to Install penceresindeki Install ile kurulumu başlatalım.(şekil 14) 11

12 Şekil 14 Bu adımda, kurulum başlayacak ve ilgili bileşenleri sisteminize yükleyecektir. Bu aşama, ortalama 1-2 dakika alabilir.(şekil 15) Şekil 15 Kurulum tamamlandıktan sonra, aşağıdaki ekran görüntülenecektir. Sürüm notlarını okumak istemezseniz, oradaki kutucuktaki tiki kaldırmanız yeterlidir.(şekil 16) 12

13 Şekil 16 Böylece, ASP.NET ile AJAX geliştirme eklentisini de kurmuş oldunuz. Bir sonraki konuda ise, AJAX Toolkit in yüklenmesini anlatacağım. ASP.NET 2.0 AJAX CONTROL TOOLKİT KURULUMU İndirdiğimiz ZIP dosyasını, önce bir klasöre çıkartalım.(şekil 17) Şekil 17 Çıkartılan klasörü, sabit bir yerde kalması için C:\Program Files\Microsoft ASP.NET klasörü içerisine taşıyalım.(şekil 18) Şekil 18 Bu işlemi yaptıktan sonra, Microsoft Visual Web Developer 2005 Express Edition u çalıştıralım. Ve Recent Projects panelinden Create in karşısındaki Web Site ı tıklayalım Bu seçeneğe, File > New WebSite menüsünden de erişebilirsiniz.(şekil 19) 13

14 Şekil 19 Ekrana gelecek olan New Web Site penceresinde, ASP.NET AJAXEnabled Web Site template ini seçip OK botonuna basalım.(şekil 20) Şekil 20 ASP.NET 2.0 AJAX uygulamamız yaratılmış olacaktır. Artık sol kenardaki Toolbox panelinde, AJAX Extensions paneli gelmiş olacak. Ve kodda dikkat edilecek önemli bir kısım seçilmiş durumda. (Şekil 21) 14

15 Şekil 21 Şimdi, AJAX Toolkit i yüklemeye başlayabiliriz. Öncelikle işe Toolbox panelinde, yeni bir sekme oluşturmakla başlayalım. Toolbox panelindeyken sağ tuşa tıklayalım ve çıkan menüden Add Tab komutunu verelim.(şekil 22) Şekil 22 Oluşturulan bu yeni sekmeye AJAX Toolkit ismini verelim. Ve bu oluşturduğumuz sekmenin içerisindeyken, yine sağ tuşa tıklayalım. Ve bu sefer Choose Items... seçeneğini seçelim.(şekil 23) Bu kısımda 15

16 bilgisayar biraz zorlanabilir. Mümkünse, bu durumda hiçbir işlem yapmayın ve ekrana bir pencere gelene kadar bekleyin. Şekil 23 Bir müddet bekledikten sonra, ekrana Choose Toolbox Items penceresinin geldiğini göreceksiniz. Buradan, Browse butonuna basıp, çıkartıp Microsoft ASP.NET dizinine attığımız AjaxToolkit klasörüne geliniz. (Şekil 24) Şekil 24 16

17 Çıkarttığınız klasöre geldikten sonra, SampleWebSite > Bin yolunu izleyin ve burada göreceğiniz AjaxControlToolkit.dll dosyasını seçin ve Open butonuna basınız.(şekil 25) Şekil 25 Open butonuna bastığınız zaman Şekil 26 daki görüntü gelecektir. Hiçbir yere dokunmadan OK butonuna basın ve Toolkitin ToolBox a yüklenmesi için bekleyin. Şekil 26 17

18 Şekil 27 de de gördüğünüz gibi, Ajax kontrolleri, oluşturduğumuz AJAX Toolkit sekmesinde listelenecektir. Şekil 27 Artık, ASP.NET 2.0 AJAX geliştirme ortamını kurup yapılandırmış olduk. Şimdi, ASP.NET AJAX uygulaması geliştirmeye başlayabiliriz. AJAX İLE PROGRAMLAMAYA GİRİŞ İlk Ajax Uygulamamız Merhaba Dünya Bu bölümde, ilk Ajax programımızı yazacağız ve ajax ın temel çalışma mantığını daha iyi kavramış olacaksınız. Ama AJAX ta Merhaba Dünya mantığı biraz değişik. Ekrana Merhaba Dünya yerine günün saatini yazdırıyoruz. Öncelikle, Visual Studio yu açalım. File Menüsünden New Web Site komutunu verelim ve ardından ASP.NET AJAX Enabled WebSite template ini seçelim. Bu işlemin sonunda projemiz yaratılmış olacaktır.(şekil 28) 18

19 Şekil 28 Üstünü çizdiğim satır, AJAX için hayati önem taşıyor. Çünkü bu satır AJAX kontrollerinin çalışmasını sağlıyor. Ajax kullanılacak her sayfada, bir adet Script Manager olmak zorunda. Eğer Master Page iniz varsa, bu kontrolü Master Page de bir sefer kullanıp, sonraki sayfalarda kullanmayabilirsiniz. Sayfalar görüntülenirken, Master Sayfası çağırıldığından, ScriptManager her sayfada olacaktır. Diğer dikkat edilmesi gereken ise, bu kontrolün sayfanın üst tarafında yer almasıdır. Şimdi, alt tarafta yer alan Design kısmına tıklayalım.(şekil 29) Ekranda görülen obje, ScriptManager in kontrolü-şekil - 28 deki kodun görsel hali. Sol tarafta yer alan Toolbox ı açalım. 19

20 Şekil 29 İlk uygulamamız için, sayfaya iki adet label ve bir adet buton nesnelerini koyalım.(şekil 30) Şekil 30 Boş bir alana çift tıklayalım ve aşağıdaki Şekil 31 deki görüntüyü elde edelim ve şu kodları yazalım: (şekil 32) 20

21 Label1.Text = DateTime.Now.ToString(); Label2.Text = DateTime.Now.ToString(); Şekil 32 Ardından F5 ya da Start Debugging komutlarından birisi ile projeyi çalıştırın. Karşınıza Debugging i Enable yapıp yapmayacağınızı soran bir pencere gelirse, Tamam ile ilerleyin. Varsayılan olarak, Internet Explorer çalışacaktır ve sayfada alt alta günün tarihini ve saatini yazacaktır.(şekil 33) Ara sıra butona basarak, sayfanın postback edilmesini sağlayın. 21

22 Şekil - 33 Göreceğiniz gibi, buton tüm sayfayı postback edecek ve her iki tarih ve saat de güncellenecektir. Oysa bizim istediğimiz şey şu: Sadece ilk saat güncel olsun, ikinci saat olmasın. Internet Explorer penceresini kapatıp, geliştirme ortamına geri gelelim ve Design görünümünde, sayfaya Toolbox taki AJAX Extensions sekmesinde yer alan Update Panel sürükleyelim. Ve bunun içine, ilk label ı ve butonu atalım.(şekil 34) Şekil 34 Ardından projeyi çalıştıralım ve tekrar butona tıkayarak sonucu görelim. (Şekil 35) 22

23 Şekil 35 Şekilde de görüldüğü gibi, ilk saat güncel kalmakta, ikinci saat ise, sayfanın yükleniş anındaki tarih ve saati sabit kalmaktadır. İşte Ajax, temelde bu mantık üzerine kurulmuştur. Böylece, tüm sayfanın postback edilip, performans ve hızın kesilmesinin önüne geçilmektedir. AJAX EXTENSIONS BILEŞENLERİ Öncelikle, AJAX bileşenlerini ve işlevlerini açıklayalım. Daha sonra da, hepsinin bir arada kullanıldığı örnekle, AJAX ın temel bileşenlerini açıklamış oluruz. ScriptManager AJAX kontrollerinin çalışması için, her sayfada bir adet bulunmak zorundadır. Sayfanın en üstünde bulunmasına dikkat edilmelidir. İçerisinde, EnablePartialRending, AuthenticationService gibi çeşitli özellikleri bulundurmaktadır. UpdatePanel UpdatePanel bileşeni, web sayfalarında kısmî güncelleştirme işlemlerinde kullanılır. Böylece, tüm sayfanın postback edilmesi yerine, sadece değişmesi gereken yer postback edilir. Timer, buton... gibi nesneler kullanılarak UpdatePanel tetiklenir. 23

24 Timer UpdatePanel in belirli zaman aralıklarıyla, otomatik olarak postback edilmesini sağlar. Böylece, UpdatePanel içerisindeki verinin güncel kalması sağlanmış olur. UpdateProgress UpdatePanel içerisindeki veri güncellendiği anda, kullanıcıya işlemin yapıldığına dair mesaj verir. Örneğin, içeriğin yüklenirken Loading... barı gibi. Örnek AJAX Uygulaması Bu örneğimizde, belirli ve istenilen aralıklarla ekrana şuanki saati yazdıran bir Ajax uyulaması yazacağız. Bunun için, Visual Web Developer 2005 de File>New Web Site ve oradaki şablonlardan da, ASP.NET AJAX-Enabled Web Site ı seçelim. Çalışma ekranında, bir adet ScriptManager olduğunu göreceksiniz. Şimdi ScriptManager in altına bir adet Label, onun altına bir adet UpdatePanel ve içine bir adet Label ile Buton yerleştirin. UpdatePanel in altına ise, bir adet UpdateProgress nesnesi yerleştirin. Aşağıdaki Şekil 36 gibi bir görüntü elde etmiş olmanız lazım. Şekil 36 Sayfadaki boş bir yere çift tıklayarak kod bölümüne geçelim. Ve buraya aşağıdaki kodu yazalım: 24

25 Label1.Text = DateTime.Now.ToString(); Label2.Text = DateTime.Now.ToString(); Ardından projeyi çalıştıralım. Ve butona basalım. Üstteki saatin değişmediği, alttaki saatin ise güncel kaldığı görülmektedir. Local serverda denediğimiz için-veri iletişimi çok hızlı, UpdateProgress içerisindeki metin ise gözükmemektedir. Bunun için, yukarıdaki kodlardan önce aşağıdaki kodu yazalım: System.Threading.Thread.Sleep(4000); Bu kod, iletişimi 4 saniye geciktirecek ve ekrandaki Şu anki zaman Güncelleniyor... yazısını gösterecektir. Şekil 37 Butonu, UpdatePanel in dışarısında bir yere koyup projeyi çalıştırdığımızda, tüm sayfayı postback ettiğini, dolayısıyla her iki saatin de güncel kaldığını görmekteyiz. Eğer butonun UpdatePanel dışarısında olması gerekiyor ve sadece belirli UpdatePanel in güncellenmesini istiyorsak, butonu UpdatePanel dışarısına aldıktan sonra, şu yönergeleri izleyelim. Güncellenecek UpdatePanel üstüne bir kez tıklayalım. Ve Properties panelinde, Triggers özelliğini bulalım ve kenardaki... butonuna tıklayalım. Ekrana gelecek olan, UpdatePanelTrigger Collection Editor penceresindeki Add butonuna basın ve sağ taraftaki ControlID yazan yere, kontrol edecek nesne ne ise, buraya girin.(şekil 38) 25

26 Şekil 38 <asp:updatepanel ID="UpdatePanel1" runat="server"> <ContentTemplate> Şu anki zaman: <asp:label ID="Label2" runat="server" Text="Label"></asp:Label><br /> </ContentTemplate> <Triggers> <asp:asyncpostbacktrigger ControlID="Button1" /> </Triggers> </asp:updatepanel> Yukarıdaki kodda da görüldüğü gibi, UpdatePanel içerisinde AsyncPostBackTrigger nesnesi oluştu ve tetikleyecisi de Button1. Burada dikkat edilecek önemli bir husus da, işin içinde ikinci bir UpdatePanel girince çıkıyor. Buton1, UpdatePanel1 in tetikleyicisi olduğu halde, eğer ikinci bir updatepanel varsa, onu da tetikleyip güncellenmesini sağlıyor. Bunu düzeltmek için, UpdatePanellerin üzerine gelip, properties paneline geliniz. Triggers özelliğinin bir altında yer alan, UpdateMode seçeneğini, Always den, Conditional olarak değiştiriniz. Artık bu sorunumuz da çözülmüş oldu. Bir de Timer nesnesi ile tetikleme yapalım. Bunun için, projeye bir adet Timer nesnesi ekleyin. Ve aynı butonda olduğu gibi, Timer nesnesinin tetikleyeceği UpdatePanel üstüne gelin ve Properties panelinden Triggers kısmına gelip yine... butonuna tıklayın ve gelecek pencereden Add butonuna tıklayıp ControlID özelliğini Timer1 olarak değiştiriniz. Daha sonrai Timer1 nesnesinin üzerine tıklayıp Properties lerinden Interval özelliğini 5000 olarak ayarlayınız. Bu, UpdatePanel e 5 saniyede bir güncellemesi için komut gönderecek 26

27 demektir. Hatırlarsanız, daha önce, Güncelleniyor yazısını da görmek için, 4000 yani 4 saniye de bekletiyorduk. Bu da, Güncelleniyor metni sadece 1 saniyeliğine ortadan kaybolacak demek oluyor. Şimdi, projeyi çalıştırabiliriz. Şekil 39 Butona tıklayarak da, saatin daha erken güncellenmesini sağlayabilirsiniz. Artık, AJAX kontrollerine aşina olduğunuza göre, bir sonraki kısım olan, AjaxToolkit elemanlarını incelemeye geçebiliriz. AJAX TOOLKİT ELEMANLARI Accordion ve Accordion Pane Bu AJAX kontrolü, kayabilen paneller oluşturmamızı sağlıyor. Örnek uygulama için, öncelikle yeni bir AJAX-Enabled projesi oluşturalım. Ve projeye bir adet Accordion ekleyelim. Ardından kod kısmına geçelim. Kod kısmında şöyle bir kodun oluşması lazım: <cc1:accordion ID="Accordion1" runat="server"> </cc1:accordion> Ardından, Properties paneline gelip, açılan menüden Accordion1 nesnesini seçerek, burada bazı ayarlamalar yapalım. Örneğin, 27

28 FadeTransitions özelliğini True yapalım. Bu özellik, seçilen panele solukluk etkisi verir. Aynı şekilde, FramePerSecond özelliğinin değerini de 30 verelim. Bu özellik, paneller kayarken oluşan animasyonda, saniyedeki frame sayısını gösterir. Bu değer az verilirse, animasyonda takılma etkisi verir. TransitionDuration özelliği, geçiş süresini belirtir. Bu değere de 200 verebilirsiniz. Bunların dışındaki özellikleri de kafanıza göre belirleyebilirsiniz. Örneğin ben, arka planı yeşil olarak değiştirdim. İsteğe bağlı olarak, CSS stillerinden faydalanarak daha güzel görünümlü paneller oluştuabilirsiniz. Kod kısmına tekrar geri dönelim. Yaptığımız ayarların kodları, Accordion1 nesnesine eklenmiş durumda olmalıdır. Şimdi, Accordion1 bloğuna gelin ve bir adet Panes bloğu açın. Bu blog arasına, üç adet AccordionPane ekleyin. Bu panellerin özelliklerini yine Properties panelinden ayarlayabilirsiniz. Eklediğiniz AccordionPane blogları arasına, <Header></Header> ve <Content></Content> tagları açın. Başlık kısmı olacak içerikleri Header bloğuna, içerik kısımlarını ise, Content tagları arasında yazın: <cc1:accordion ID="Accordion1" runat="server" FadeTransitions="true" FramesPerSecond="30" TransitionDuration="250" BackColor="Green"> <Panes> <cc1:accordionpane ID="AccordionPane1" runat="server"> <Header> Header1</Header> <Content>Content1</Content> </cc1:accordionpane> <cc1:accordionpane ID="AccordionPane2" runat="server"> <Header> Header2</Header> <Content>Content2</Content> </cc1:accordionpane> <cc1:accordionpane ID="AccordionPane3" runat="server"> <Header> Header3</Header> <Content>Content3</Content> </cc1:accordionpane> </Panes> </cc1:accordion> Yapmış olduğumuz örnekte de görüldüğü gibi, Accordion1 Ajax nesnesinin ayarları, üst kısımda görülmektedir. Kodun ekran çıktısı işe aşağıdadır(şekil 36): 28

29 Şekil 40 AlwaysVisibleControlExtender AlwaysVisibleControlExtender, isminden de anlaşılabileceği üzere, etki ettiği nesnenin her zaman üstte durmasını sağlıyor. Bunun farkedilebilmesi için, projeye uzun bir yazı kopyalayın ki, kaydırma çubukları çıksın. Ardından, projeye bir adet ASP.NET panel kontrolü yerleştirin ve içerisine bir mesaj yazın. Bu mesaj, her zaman görünür olacak. Sonra, projeye bir adet AlwaysVisibleControlExtender nesnesi ekleyiniz. Ve bu nesnenin properties kısmına gelip, TargetControlID özelliğini Panel1 olarak deiştirin. Ardından projeyi çalıştırıp sonucu görebilirsiniz. 29

30 Şekil 41 Bu özellik ile ilgili ayrıntılara ulaşmak için, Panel1 in üstüne tıklayınız ve properties panelinden, Extenters sekmesinden, AlwaysVisibleControlExtender1 i genişletiniz. Burada, AlwaysVisibleControlExtender1 e ait tüm ayarlamaları yapabilirsiniz. AnimationExtender Bu özellik, animasyonlu gösterimler için kullanılmaktadır. Örneğin, animasyonlu açılan bir pencere gibi. Bunun için, projeye, iki adet buton ve AnimationExtender, bir adet de Panel yerleştirin(şekil 42) 30

31 Şekil 42 Daha sonra, AnimationExtender1 i seçin ve Properties panelinden TargetControlID özelliğini Button1 ve AnimationExtender2 nin TargetControlID sini Button2 olarak ayarlayın. Bunları ayarladıktan sonra, kod bölümüne gelip AnimationExtender1 in bloğuna şu kodları yazalım: <cc1:animationextender ID="AnimationExtender1" runat="server" TargetControlID="Button1"> <!-- Burdan başlayın --> <Animations> <OnClick> <Parallel AnimationTarget="Panel1" > <FadeOut Duration=".5" Fps="20" MinimumOpacity=".0"/> <Color PropertyKey="backgroundColor" StartValue="#FFFFFF" EndValue="#ff0000" /> </Parallel> </OnClick> </Animations> <! Buraya kadar --> </cc1:animationextender> Bu kod, Panelin görünürlüğü kaybolacak ve rengi beyazdan kırmızıya dönmesini sağlayacak. AnimationExtender2 nin bloğuna ise tam tersini yazalım: <cc1:animationextender ID="AnimationExtender2" runat="server" TargetControlID="Button2"> <!-- Burdan başlayın --> <Animations> 31

32 <OnClick> <Parallel AnimationTarget="Panel1" > <FadeIn Duration=".5" Fps="20" MinimumOpacity=".0"/> <Color PropertyKey="backgroundColor" StartValue="#86c424" EndValue="#ffffff" /> </Parallel> </OnClick> </Animations> <! Buraya kadar --> </cc1:animationextender> Burada dikkat edilecek en önemli husus, butonların OnClientClick özelliğinin return false; olması. Çünkü eğer bu kodu yazmazsak, sayfa postback edileceği için animasyonları görmek mümkün olmayacaktır. Buton kodları aşağıdaki gibi olacaktır: <asp:button ID="Button1" runat="server" OnClientClick="return false;" Text="Gizle" /> <asp:button ID="Button2" runat="server" OnClientClick="return false;" Text="Göster" /> Bu kontrolün ekran görüntüsü aşağıdaki Şekil 43 gibi olacaktır Şekil 43 (Panel gizlenirken) AutoCompleteExtender AutoCompleteExtender kontrolü, Textboxlara girilen verilere önerilerde bulunan bir ajax kontrolüdür. Bunun için, projeye bir adet textbox sürükleyelim. Ve 32

33 ardından da bir adet AutoCompleteExtender objesini sürükleyelim. Önerilerde bulunan kısmı ise, metot olarak yazmamız gerekiyor. Bunun için projemize bir adet de WebService ekleyelim ve ismini AutoComplete olarak değiştirin. Place code in separate file seçeneğinin işaretli olduğundan emin olun. Oluşturulan WebServisteki kodları, aşağıdaki şekildeki hale getirin: using System; using System.Collections.Generic; using System.Web.Services; [WebService(Namespace = " [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.Web.Script.Services.ScriptService] public class AutoComplete : WebService { public AutoComplete() { } [WebMethod] public string[] GetCompletionList(string prefixtext, int count) { if (count == 0) { count = 10; } Random random = new Random(); List<string> items = new List<string>(count); for (int i = 0; i < count; i++) { char c1 = (char)random.next(65, 90); char c2 = (char)random.next(97, 122); char c3 = (char)random.next(97, 122); } items.add(prefixtext + c1 + c2 + c3); return items.toarray(); } } Default.aspx de dizayn moduna geri dönün. Ve AutoCompleteExtender ın properties lerinden TargetControlID yi Textbox1 olarak ayarlayın. Daha sonra, ScriptManager1 i seçip properties lerinden Services kısmında... butonuna tıklayın ve gelen pencereden Add yi tıklayınız. Ve sağ taraftaki Path kısmına, oluşturduğunuz WebService nin ismini(autocomplete.asmx) giriniz. Bu işlemleri yaptıktan sonra, aspx in kod kısmına geçin ve AutoComplete bloğuna ServiceMethod="GetCompletionList" CompletionSetCount="10" MinimumPrefixLength="3" EnableCaching=false parametrelerini ekleyin. Oluşturulan aspx sayfasının son kod durumu aşağıdaki gibi olacaktır: 33

34 Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" <head runat="server"> <title>untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:scriptmanager ID="ScriptManager1" runat="server" > <Services> <asp:servicereference Path="AutoComplete.asmx" /> </Services> </asp:scriptmanager> <div> <asp:textbox ID="TextBox1" runat="server"></asp:textbox> <cc1:autocompleteextender ID="AutoCompleteExtender1" runat="server" TargetControlID="TextBox1" ServicePath="AutoComplete.asmx" ServiceMethod="GetCompletionList" CompletionSetCount="10" MinimumPrefixLength="3" EnableCaching=false> </cc1:autocompleteextender> </div> </form> </body> </html> Şekil 44 CalendarExtender CalenderExtender kontrolü, sayfalara Takvim kontrolü sağlamaktadır. 34

35 Uygulama için projemize, bir adet TextBox ve bir adet de, CalendarExtender nesnesi yerleştirelim. CalendarExtender kontrolünün propertieslerinden, TargetControlID yi TextBox1 olarak değiştirin. İşte bu kadar. Ajax Takviminiz kullanıma hazır. İsterseniz Css stilleriyle hoş bir görünüm kazandırabilirsiniz. Projemizin çıktısı aşağıdaki gibi olacaktır(şekil 45) Şekil 45 CollapsiblePanelExtender Bu kontrol, Acordion kontrolüyle çok benzerdir. Panellerin, aşağı doğru açılmasını veya kapanmasını sağlar. Örnek için, projemize iki adet panel koyalım ve birinin ID sini baslik diğerinin ise icerik olarak ayarlayalım. Bir adet de CollapsiblePanelExtender sürükleyip, TargetControlID sini icerik olarak değiştirelim. Ardından, baslik paneline gelip, ExpandCollapseID özelliğini ve CollapseControlID sini baslik olarak ayarlayalım. Ardından, bu panellerin içine herhangi birşeyler yazıp çalıştıralım. Başlığa tıkladığımızda, içerik gösterilecek veya gizlenecektir.(şekil -46) 35