AJAX UpdatePanelAnimation Extender
Merhaba arkadaşlar, bu makalemizde ajax control toolkit’in nesnelerinden UpdatePanelAnimation Extenderi ve özelliklerini inceleyeceğiz.
Updatepanelanimation sayfalarımıza framework içerisinde tanımlı olan animasyonları uygulamamıza izin veren Ajax kontrolüdür. Bir update islemi tamamlandıgında yada update islemi devam ederken buna baglı olarak animasyonların oynatılmasını saglar.
Postback basladıgında OnUpdating animasyonu çalısır fakat Postback sona erdiginde OnUpdated animasyonu çalısır.
Not: Update Panelin UpdateMode özelligi always olarak ayarlanmalı çünkü postback tamamlandıgında OnUpdated animasyonu çalısacak.
Oynatılan Animasyonlar, XML kullanarak tanımlanır. Frameworkdaki animasyonları kullanmak için; (Using Animation)
http://ajax.asp.net/ajaxtoolkit/Walkthrough/UsingAnimations.aspx adresine tıklayınız.
Animasyonların propertylerine erismek için(Animasyon Reference);
http://ajax.asp.net/ajaxtoolkit/Walkthrough/AnimationReference.aspx Adresine tıklayınız.
Kullanımı:
<ajaxToolkit:UpdatePanelAnimationExtender ID="ae"
runat="server" TargetControlID="up">
<Animations>
<OnUpdating> ... </OnUpdating>
<OnUpdated> ... </OnUpdated>
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
Özellikleri:
- TargetControlID - Animasyonu oynatmak için kullanılacak olan UpdatePanel'inn ID'si.
- OnUpdating - Update islemi gerçeklesirken gerçeklesecek olan animasyon.
- OnUpdated - Update islemi bittiginde gerçeklesecek olan animasyon.
Örnegimizde SQLDataSource ile Databaseimize baglanıp kayıtlar arasında gezinecegiz. Sayfamız degisirken yada herhangi bir update islemi yapılırken animasyonumuzu oynatacagız.
Ilk olarak bir ajax projesi olusturalım.
Projemizi olusturduktan sonra Sayfamıza bir adet SQLDataSource ekleyelim. AdventureWorks databaseine baglanım person.contact tablosundaki verileri görüntüleyecegiz. Ben Firstname, MiddleName, LastName ve EmailAddress alanlarını aldım.
Daha sonra projemize bir adet Gridview ekleyelim ve DataSourceID özelligini ekledigimiz SQLDataSource1 olarak seçelim.
Daha sonra sayfamıza bir adet updatepanel ve updatepanelanimation nesnelerini ekleyelim. Benim tasarladıgım sayfa asagıdaki gibidir.
Evet simdi Update Panelimiz postback oldugunda çalısacak olan animasyonumuz için gerekli kodları yazalım.
Animasyon 1:
<cc1:UpdatePanelAnimationExtender
ID="UpdatePanelAnimationExtender1"
runat="server"
TargetControlID="UpdatePanel1">
<Animations>
<OnUpdated>
<FadeOut Duration=".5" Fps="20" />
</OnUpdated>
<OnUpdating>
<FadeIN Duration=".5" Fps="20" />
</OnUpdating>
</Animations>
</cc1:UpdatePanelAnimationExtender>
Farklı bir animasyon daha verebiliriz.
Animasyon 2:
<cc1:UpdatePanelAnimationExtender
ID="UpdatePanelAnimationExtender1"
runat="server"
TargetControlID="UpdatePanel1">
<Animations>
<OnUpdated>
<Pulse Duration=".5" minimumOpacity=".3" maximumOpacity="2"/>
</OnUpdated>
</Animations>
</cc1:UpdatePanelAnimationExtender>
Evet simdi testimizi yapalım.
2. sayfaya geçiyoruz ve postback devam ederken sizin için yakaladıgım görüntü asagıdak gibidir.
Evet biraz daha donuk bir görüntü ile karsımızda. Sizde denediginizde gerçekten çok güzel bir animasyon efekti oldugunu göreceksiniz J Isterseniz diger animasyonları deneyebilirsiniz.
Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim.
Sem GÖKSU
MCP | MCAD.NET | MCTS
Örnek Kodlar için mail adresimi kullanabilirsiniz
askisem@hotmail.com
Kaynaklar
http://ajax.asp.net
Yorumlar (2)
updatepanelim için aşağıdaki animasyonu kullanıyorum. update panel tüm sayfayı kaplamaktadır. <cc1:UpdatePanelAnimationExtender ID="upae" runat="server" TargetControlID="UpdatePanel1" BehaviorID="animation"> <Animations> <OnUpdating> <FadeOut Duration=".5" Fps="20" MinimumOpacity=".3" /> </OnUpdating> <OnUpdated> <FadeIn Duration=".5" Fps="20" MinimumOpacity=".3" /> </OnUpdated> </Animations> </cc1:UpdatePanelAnimationExtender> bu işlem firefox ile düzgün gerçekleşiyor fakat ie de update panel herhangi bir update işleminden sonra beyaz oluyor yani transparanlığını yitiriyor. bu hatayı nasıl yok edebilirim? teşekkür ederim...
sanırım bu animasyon updatepanele beyazlık veriyor benim istediğim ise karanlıklaştırmak. bunu nasıl gerçekleştirebilirim?