محتویات سایت
        برچسب های محبوب 








 
   معرفی کنترل ها و تکنیک های موجود در ASP.NET Ajax - قسمت هشتم
  در این مقاله کنترلUpdatePanelAnimationExtender که از مجموعه کنترل های موجود در AjaxControlToolkit می باشد را مورد بررسی قرار خواهم داد.
   Ajax
   ۲۰۸۷۴
    سورس کد
   مرتضی صحراگرد
   ۱۳۸۶/۸/۱۶
نسخه قابل چاپ نسخه قابل چاپ

مقدمه :

UpdatePanelAnimationExtender يکي از کنترل هاي پيشرفته موجود در AjaxControlToolkit مي باشد که براي به وجود آوردن جلوه هاي انيميشني در صفحه استفاده مي شود. مثلا شما مي توانيد کنترلي در صفحه داشته باشيد که هنگام آپديت شدن آن، يک جلوه انيميشني اطراف آن به وجود آيد تا کاربر متوجه تغييرات اعمال شده روي کنترل گردد.
دموي زنده اين مقاله را مي توانيد اينجا مشاهده نماييد.
هشدار :
قبل از شروع مثال بايد عرض کنم در صورتي که شما در ASP.NET Ajax مبتدي مي باشيد، پيشنهاد مي کنم قبل از فراگيري اين مقاله،حتما مقالات قبلي اينجانب را در رابطه با ASP.NET AJAX مطالعه نماييد تا از اين مقاله بهره کافي را ببريد.

شروع :

قبل از اينکه به معرفي جزييات کنترل UpdatePanelAnimationExtender بپردازم، کمي در مورد کاري که قرار است انجام دهيم، توضيح مي دهم.

در اين مثال ما يک کنترل Div به نام divContainer داريم که در داخل آن يک UpdatePanel به نام update قرار دارد و در داخل UpdatePanel يک کنترل Label به نام lblUpdate قرار دارد.
در خارج از کنترل divContainer ، يک کنترل Button به نام btnUpdate قرار دارد که هنگام کليک شدن آن، محتواي lblUpdate بروز رساني شده و تاريخ و زمان کليک شدن دکمه btnUpdate را نشان مي دهد.
قطعه کد زير، مطالب بيان شده در بالا را نشان مي دهد


<div id="divContainer" style="background-color: white; width: 300px;">
 <asp:UpdatePanel ID="update" runat="server">
 <ContentTemplate>
 <asp:Label ID="lblUpdate" runat="server" Style="padding: 5px; font-size: 14px; font-weight: bold;color: Black;">
 4/28/1906 12:00:00 AM
</asp:Label>
</ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="btnUpdate" EventName="Click" />
 </Triggers>
 </asp:UpdatePanel>
 </div>

و قطعه کد زير هنگام کليک شدن btnUpdate اجرا مي شود.


protected void btnUpdate_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000);
lblUpdate.Text = DateTime.Now.ToString();
}

همانطور که مشاهده مي نماييد، ما در هنگام کليک شدن btnUpdate ، به مدت 2 ثانيه تاخير ايجاد نموده ايم زيرا در غير اين صورت محتواي lblUpdate خيلي سريع بروز رساني شده و نمي توانيم جلوه انيميشني را مشاهده نماييم.
در اين مقاله مي خواهيم 3 جلوه انيميشني مختلف يعني جلوه Fade و جلوه Collapse/Expand و جلوه تغيير رنگ پس زمينه را اعمال نماييم.

3 کنترل Checkbox در صفحه داريم که مشخص مي کنند چه جلوه هايي را مي خواهيم هنگام بروز رساني اعمال نماييم.
قطعه کد مربوط به Checkbox ها را مشاهده مي نماييد.


<input type="checkbox" id="effect_fade" checked="checked" />Fade<br />
 <input type="checkbox" id="effect_collapse" checked="checked" />Collapse<br />
 <input type="checkbox" id="effect_color" checked="checked" />Color Background<br />

با کليک شدن دکمه btnUpdate ، هر يک از Checkbox ها که انتخاب شده باشند، جلوه انيميشني آن اعمال مي شود.
جلوه هاي انيميشني که ما مي خواهيم در زمان بروز رساني ايجاد نماييم به 2 دوره زماني تقسيم مي شوند.

  1. هنگامي که کنترل در حال بروز رساني مي باشد (OnUpdating)
  2. پس از اينکه عمل بروز رساني به پايان رسيد(OnUpdated)

پس از انجام دادن اعمال فوق، اکنون زمان استفاده از کنترل UpdatePanelAnimationExtender مي باشد.
 يک کنترل UpdatePanelAnimationExtender  به صفحه اضافه نماييد و محتواي آن را به شکل زير تغيير دهيد.


<ajaxToolkit:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server"
 TargetControlID="update">
 <Animations>
 <OnUpdating>
 <Sequence>
 <%-- Store the original height of the panel --%>
<ScriptAction Script="var b = $find('animation'); b._originalHeight = b._element.offsetHeight;" />
<%-- Disable all the controls --%>
<Parallel duration="0">
 <EnableAction AnimationTarget="btnUpdate" Enabled="false" />
 <EnableAction AnimationTarget="effect_color" Enabled="false" />
 <EnableAction AnimationTarget="effect_collapse" Enabled="false" />
 <EnableAction AnimationTarget="effect_fade" Enabled="false" />
 </Parallel>
 <StyleAction Attribute="overflow" Value="hidden" />
<%-- Do each of the selected effects --%>
<Parallel duration=".25" Fps="30">
 <Condition ConditionScript="$get('effect_fade').checked">
 <FadeOut AnimationTarget="divContainer" minimumOpacity=".2" />
 </Condition>
 <Condition ConditionScript="$get('effect_collapse').checked">
 <Resize Height="0" />
 </Condition>
 <Condition ConditionScript="$get('effect_color').checked">
 <Color AnimationTarget="divContainer" PropertyKey="backgroundColor"
   EndValue="#FFFF00" StartValue="#FFFFFF" />
 </Condition>
 </Parallel>
 </Sequence>
 </OnUpdating>
</Animations>
 </ajaxToolkit:UpdatePanelAnimationExtender>

هم اکنون به معرفي عناصر استفاده شده در قطعه کد فوق مي پردازم.
در قطه کد فوق UpdatePanelAnimationExtender داراي دو صفت جالب به نام هاي BehaviorID و TargetControlID مي باشد.

ما توسط صفت ID در سمت سرور مي توانيم به کنترل دسترسي داشته باشيم ولي در سمت کلاينت، توسط صفت BehaviorID و با استفاده از جاوا اسکريپت مي توانيم به کنترل دسترسي داشته باشيم.
صفت TargetControlID ، شناسه UpdatePanel را نگهداري مي کند که قرار است جلوه انيميشني به آن اعمال شود.

اعمالي را که مي خواهيم هنگام بروز رساني کنترل صورت گيرد، در داخل تگ <OnUpdating> قرار مي گيرد.

با توجه به اينکه هنگام بروز رساني قصد داريم divContainer را به شکل Collapse در آوريم، پس بايد اندازه اصلي آن را جايي ذخيره کنيم تا پس از انجام عمل بروز رساني (OnUpdated) بتوانيم آن را به اندازه اصلي خود Expand نماييم. اين عمل توسط تگ ScriptAction انجام مي گيرد.
همانطور که در قطعه کد زير مي بينيد، اندازه کنترل divContainer را در صفت originalHeight_ مربوط به UpdatePanelAnimationExtender  ذخيره شده است.


<%-- Store the original height of the panel --%>
<ScriptAction Script="var b = $find('animation'); b._originalHeight = b._element.offsetHeight;" />

اعمالي را که مي خواهيم روي کنترل ها در هنگام بروز رساني اعمال شود را بايد داخل تگ Parallel قرار دهيم. اين تگ داراي دو صفت مهم مي باشد

  1. duration : مدت زماني (بر حسب ثانيه) را که قصد داريم جلوه انميشني مورد نظر به کنترل اعمال شود. مقدار اين صفت به طور پيشفرض 1 ثانيه مي باشد.
  2. Fps : سرعت انجام جلوه انيميشني بر حسب فريم بر ثانيه (Frames Per Seconds)

با توجه به اينکه قصد داريم در هنگام انجام عمل بروز رساني، کنترل هاي Checkbox و Button را غير فعال نماييم، از قطعه کد زير استفاده مي کنيم.


<%-- Disable all the controls --%>
<Parallel duration="0">
 <EnableAction AnimationTarget="btnUpdate" Enabled="false" />
 <EnableAction AnimationTarget="effect_color" Enabled="false" />
 <EnableAction AnimationTarget="effect_collapse" Enabled="false" />
 <EnableAction AnimationTarget="effect_fade" Enabled="false" />
 </Parallel>

صفت AnimationTarget ، شناسه کنترلي را که قرار است آن را فعال يا غير فعال و غيره را انجام دهيم را نگهداري مي کند.

اکنون زمان اعمال جلوه هاي انيميشني به کنترل مورد نظرمان يعني UpdatePanel مي رسد.
به قطعه کد زير توجه نماييد.


<%-- Do each of the selected effects --%>
<Parallel duration=".25" Fps="30">
 <Condition ConditionScript="$get('effect_fade').checked">
 <FadeOut AnimationTarget="divContainer" minimumOpacity=".2" />
 </Condition>
 <Condition ConditionScript="$get('effect_collapse').checked">
 <Resize Height="0" />
 </Condition>
 <Condition ConditionScript="$get('effect_color').checked">
 <Color AnimationTarget="divContainer" PropertyKey="backgroundColor"
 EndValue="#FFFF00" StartValue="#FFFFFF" />
 </Condition>
 </Parallel>

قطعه کد فوق داراي 3 تگ Condition مي باشد. با استفاده از تگ Condition مي توانيم شرايط مسئله را بررسي نماييم. مثلا ما اينجا مي خواهيم در صورتي جلوه انيميشني را اعمال نماييم که Checkbox مربوط به آن انتخاب شده باشد.

در اولين تگ Condition ما Checkbox مربوط به جلوه انيميشني FadeOut را بررسي کرده ايم که اگر انتخاب شده بود، جلوه انيميشني را اعمال مي نماييم. اين بررسي در صفت ConditionScript صورت گرفته است.


<Condition ConditionScript="$get('effect_fade').checked">
 <FadeOut AnimationTarget="divContainer" minimumOpacity=".2" />
 </Condition>

در دومين تگ Condition ما Checkbox مربوط به جلوه انيميشني Collapse را بررسي کرده ايم که اگر انتخاب شده بود، جلوه انيميشني را اعمال نماييم. همانطور که مي بينيد با استفاده از تگ Resize مقدار ارتفاع کنترل، را صفر اختصاص داده ايم.


<Condition ConditionScript="$get('effect_collapse').checked">
   <Resize Height="0" />
 </Condition>

در سومين تگ Condition ما Checkbox مربوط به جلوه انيميشني تغيير رنگ پس زمينه را بررسي کرده ايم که اگر انتخاب شده بود، جلوه انيميشني را اعمال نماييم.بدين منظور از تگ Color استفاده نموده ايم.
صفت PropertyKey ، نام صفتي را که قرار است براي آن رنگ تعيين شود را نگهداري مي کند. اگر کمي دقت کنيد، متوجه مي شويد که تغيير رنگي که ما علاقه مند هستيم انجام گيرد، بايد از محدوده يک رنگ خاص شروع و تا محدوده رنگ ديگر دامه يابد.
صفت StartValue نام رنگ آغازين را نگهداري مي کند و صفت EndValue نام رنگ نهايي را.

دقت داشته باشيد که نام رنگ ها بايد به صورت هگزا دسيمال باشد.


<Condition ConditionScript="$get('effect_color').checked">
   <Color AnimationTarget="divContainer" PropertyKey="backgroundColor" EndValue="#FFFF00" StartValue="#FFFFFF" />
 </Condition>

خوب، تا کنون اعمالي را که بايد هنگام بروز رساني (OnUpdating) انجام شود را مشخص کرده ايم و اکنون زمان آن رسيده است، اعمالي را که پس از انجام بروز رساني (OnUpdated) بايد انجام شود را مشخص نماييم که شامل برگشت به حالت اوليه کنترل ها و فعال شدن مجدد دکمه هاي غير فعال شده مي باشد.
به قطعه کد زير توجه نماييد.


<OnUpdated>
 <Sequence>
 <%-- Do each of the selected effects --%>
<Parallel duration=".25" Fps="30">
 <Condition ConditionScript="$get('effect_fade').checked">
 <FadeIn AnimationTarget="divContainer" minimumOpacity=".2" />
 </Condition>
 <Condition ConditionScript="$get('effect_collapse').checked">
 <%-- Get the stored height --%>
<Resize HeightScript="$find('animation')._originalHeight" />
 </Condition>
 <Condition ConditionScript="$get('effect_color').checked">
 <Color AnimationTarget="divContainer" PropertyKey="backgroundColor"
 EndValue="#FFFFFF" StartValue="#FFFF00" />
 </Condition>
 </Parallel>
<%-- Enable all the controls --%>
<Parallel duration="0">
 <EnableAction AnimationTarget="effect_fade" Enabled="true" />
 <EnableAction AnimationTarget="effect_collapse" Enabled="true" />
 <EnableAction AnimationTarget="effect_color" Enabled="true" />
 <EnableAction AnimationTarget="btnUpdate" Enabled="true" />
 </Parallel>
</Sequence>
 </OnUpdated>

قطعه کد فوق کاملا گويا مي باشد.

نکته جالب در تگ Condition دوم مي باشد که به صورت Bold مشاهده مي نماييد. در اين تگ با استفاده از صفت HeightScript ، اندازه  UpdatePanelAnimationExtender را به مقدار اول خود که در صفت originalHeight_ ذخيره کرده بوديم بر مي گردانيم.

 مثال کامل انجام شده در اين مقاله از لينک بالاي صفحه قابل دريافت مي باشد.