Postback basladiginda OnUpdating animasyonu çalisir fakat Postback sona erdiginde OnUpdated animasyonu çalisir.
Not=Update Panelin UpdateMode özelligi always olarak ayarlanmali çünkü postback tamamlandiginda OnUpdated animasyonu çalisacak.
Oynatilan Animasyonlar, XML kullanarak tanimlanir. Frameworkdaki animasyonlari kullanmak için; (Using Animation)
http://ajax.asp.net/ajaxtoolkit/Walkthrough/UsingAnimations.aspxadresine tiklayiniz.
Animasyonlarin propertylerine erismek için(Animasyon Reference);
http://ajax.asp.net/ajaxtoolkit/Walkthrough/AnimationReference.aspxadresine tiklayiniz.
Kullanimi:
<ajaxToolkit:UpdatePanelAnimationExtender ID="ae"
runat="server" TargetControlID="up">
<Animations>
<OnUpdating> ... </OnUpdating>
<OnUpdated> ... </OnUpdated>
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
Özellikleri:
* TargetControlID – Animasyonu oynatmak için kullanilacak olan UpdatePanel’inn ID’si.
* OnUpdating – Update işlemi gerçeklesirken gerçeklesecek olan animasyon.
* OnUpdated - Update işlemi bittiginde gerçeklesecek olan animasyon.
Örnek:
Örnegimizde SQLDataSource ile Databaseimize baglanip kayitlar arasinda gezinecegiz. Sayfamiz degisirken yada herhangi bir update işlemi yapilirken animasyonumuzu oynatacagiz.
Ilk olarak bir ajax projesi olusturalim.
Projemizi olusturduktan sonra Sayfamiza bir adet SQLDataSource ekleyelim. AdventureWorks databaseine baglanim person.contact tablosundaki verileri görüntüleyecegiz. Ben Firstname, MiddleName, LastName ve EmailAddress alanlarini aldim.
Daha sonra projemize bir adet Gridview ekleyelim ve DataSourceID özelligini ekledigimiz SQLDataSource1 olarak seçelim.
Daha sonra sayfamiza bir adet updatepanel ve updatepanelanimation nesnelerini ekleyelim. Benim tasarladigim sayfa asagidaki gibidir.
Evet simdi Update Panelimiz postback oldugunda çalisacak olan animasyonumuz için gerekli kodlari yazalim.
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 yapalim.
2. sayfaya geçiyoruz ve postback devam ederken sizin için yakaladigim görüntü asagidak gibidir.
Evet biraz daha donuk bir görüntü ile karsimizda. Sizde denediginizde gerçekten çok güzel bir animasyon efekti oldugunu göreceksiniz J işterseniz diger animasyonlari deneyebilirsiniz.
Bu makalenin de sonuna geldik, baska bir makalede görüşmek üzere başarı 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