[Ajax control toolkit]UpdatePanelAnimationExtender小小例子
相信各位大大都知道Ajax control toolkit 這東西，一些神奇的js特效讓我羨慕不已。
可惜網路上一直鮮少有很棒的範例與解說，這麼多的extender各個屬性該怎麼使用（倒是很多高手都自己去改source code或是出extender的extender）。不過點部落上也有很多高手分享很不錯的文章，例如馬小玲的異想世界
這邊就野人獻曝一下，把一些其實我也不是很懂，但是套上幾乎就可以用的範例，給自己留個back up。
首先先介紹一下很炫的UpdatePanelAnimationExtender，只要target指到該物件，就可以針對該物件產生update時的特效。
先介紹他，是因為簡單好用，但是很多特效跟CSS，對我這樣式白癡來說，實在太吃力了，
也請有看到的大大多給點指教。
這邊先舉針對update panel來當例子，(也可以是masterpage裡面的ContentPlaceHolder唷)
首先畫面上要有一個updatepanel，裡面還有一個按鈕用來postback，內容就用個小月曆，寬度夠大特效會比較好看。
updatepanel外面在用一個div包起來。
要注意的地方：
1.div的id為”up_container”;
2.updatepanel的id為”update”;
<div id="up_container" style="background-color: #FFFFFF;">
<ASPExtensions:UpdatePanel ID="update" runat="server">
<ContentTemplate>
<asp:Calendar runat="server"></asp:Calendar>
<asp:Button ID="btnUpdate" runat="server" Text="Update" OnClick="btnUpdate_Click" />
</ContentTemplate>
<Triggers>
<ASPExtensions:AsyncPostBackTrigger ControlID="btnUpdate" EventName="Click" />
</Triggers>
</ASPExtensions:UpdatePanel>
</div>
有了原始內容之後，當然就是要來玩extender了。
有看到顏色或特效的數據，都可以自行調整看看，怎麼樣會比較好看，我是很沒美感的人，所以獻醜了。
<ajaxToolkit:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server"
TargetControlID="update">
<Animations>
<OnUpdating>
<Sequence>
<Parallel duration="0">
<EnableAction AnimationTarget="btnUpdate" Enabled="false" />
</Parallel>
<StyleAction Attribute="overflow" Value="hidden" />
<Parallel duration=".25" Fps="30">
<Condition ConditionScript="true">
<FadeOut AnimationTarget="up_container" minimumOpacity=".2" />
</Condition>
<Condition ConditionScript="true">
<Color AnimationTarget="up_container" PropertyKey="backgroundColor"
EndValue="#FF0000" StartValue="#FFFFFF"/>
</Condition>
</Parallel>
</Sequence>
</OnUpdating>
<OnUpdated>
<Sequence>
<Parallel duration=".25" Fps="30">
<Condition ConditionScript="true">
<FadeIn AnimationTarget="up_container" minimumOpacity=".2" />
</Condition>
<Condition ConditionScript="true">
<Color AnimationTarget="up_container" PropertyKey="backgroundColor"
StartValue="#FF0000" EndValue="#FFFFFF"/>
</Condition>
</Parallel>
<Parallel duration="0">
<EnableAction AnimationTarget="btnUpdate" Enabled="true" />
</Parallel>
</Sequence>
</OnUpdated>
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
需要注意的地方：
1.OnUpdating就是正按下update的時候，OnUpdated就是update結束後的特效。
2.OnUpdating時，通常可以在EnableAction，把畫面上control的Enable設成false，來避免重複submit，不過記得OnUpdated要打開，不然按鈕按下去就彈不上來了。
3.BehaviorID="animation"，可以供Ajax的js呼叫。(其實這我也不是很熟 XD)
4.特效的區塊是針對div，所以AnimationTarget="up_container"，裡面是放div的ID。
5.Condition區塊，是可以下條件判斷要使用哪種特效。
6.FadeOut、FadeIn是一對的特效，數字應該就是隱藏跟顯示的速度。
7.Color想當然爾，EndValue 與StartValue 就是漸層的顏色起頭跟結尾。
8.另一種特效叫做Collapse，不過要算位置，要多一點javascript，還要考慮updatepanel跟GridView根據資料筆數的縮放，上次玩失敗了，就不敢放上來了。
目前玩一玩對這些屬性的心得就是只有這樣，希望對大家有幫助。
畫面閃太快，看不到特效的，可以在btnUpdate_Click()裡面，加上Thread.Sleep(3000);
blog 與課程更新內容，請前往新站位置：http://tdd.best/
