معرفی کنترل ها و تکنیک های موجود در ASP.NET Ajax

[moji5]

قصد دارم در سلسله مقالاتي به معرفي کنترل ها و تکنيک هاي موجود در MS Ajax بپردازم که قسمت اول و شروع بحث را در اين مقاله مشاهده خواهيد کرد.
MS Ajax يا به بيان کامل تر Microsoft Ajax کتابخانه اي از توابع مي باشد که توسط شرکت مايکروسافت به منظور بهره گيري از تکنولوژي آژاکس (Ajax) در برنامه هاي تحت وب در VS 2005 ايجاد شده است.
لازم به ذکر است که نام سابق آن Atlas بوده و هم اکنون به صورت منبع باز (Open Source) در دسترس مي باشد.
براي دريافت MS Ajax به سايت http://Ajax.Asp.net مراجعه کنيد. روي دکمه Download ASP.NET Ajax کليک کنيد و فايل مربوطه که ASP.NET 2 Ajax Extensions مي باشد را دانلود کنيد. پس از دانلود فايل، آن را نصب کنيد. با نصب اين فايل ، در حقيقت بستري براي توسعه برنامه هاي کاربردي تحت وب با قابليت استفاده از امکانات آژاکس به وجود مي آيد.
اکنون برنامه VS 2005 را اجرا نموده و يک وب سايت جديد ايجاد کنيد. خواهيد ديد که علاوه بر گزينه هايي که قبلا و به طور پيش فرض در VS 2005 وجود دارد مانند ASP.NET Web Site و ASP.NET Web Service و ....... ، گزينه جديدي به نام ASP.NET Ajax-Enabled Web Site اضافه شده است.
گزينه ASP.NET Ajax-Enabled Web Site را انتخاب نموده و تاييد نماييد.
اکنون اگر به صفحه اول وب سايت دقت کنيد ، مي بينيد که بر خلاف وب سايت هايي که قبلا ايجاد نموده ايد، يک کنترل به نام Script Manager روي صفحه اول وب سايت وجود دارد. و اگر به Toolbox سمت چپ دقت کنيد مي بينيد که تب جديدي به نام Ajax Extensions اضافه شده است که حاوي کنترل هاي اصلي MS Ajax مي باشد.
به ياد داشته باشيد که براي استفاده از امکانات MS Ajax در يک صفحه وب سايت فقط نياز به يک Script Manager در صفحه داريد.
يک کنترل از نوع Update Panel از تب مربوطه انتخاب نموده و به صفحه اضافه کنيد.
Update Panel کنترلي است که براي به روزرساني جزئي (Partial Updating) در صفحه استفاده مي شود. يعني کنترل هايي که در داخل Update Panel قرار مي گيرند ، بدون نياز به اينکه کل صفحه به روز رساني شود ، مي توانند خود را به روز رساني نمايند.
مطابق شکل زير يک کنترل ليبل و يک دکمه به داخل Update Panel ، و يک کنترل ليبل نيز به خارج از Update Panel اضافه نماييد.
اکنون در رويداد لود برنامه قطعه کد زير را بنويسيد.

Label1.Text = DateTime.Now.ToString();
Label2.Text = DateTime.Now.ToString();
و در رويداد کليک مربوط به دکمه ، قطعه کد زير را بنويسيد.

Label1.Text = DateTime.Now.ToString();
صفحه را اجرا کنيد. خواهيد ديد که هر دوي ليبل ها ، زمان اجراي صفحه را نشان مي دهند. روي دکمه کليک کنيد. اکنون مشاهده مي کنيد که با هربار کليک کردن دکمه ، زماني که ليبل اول يعني ليبلي که داخل Update Panel قرار دارد به روز رساني مي شود در حاليکه هنوز ليبل دوم زماني اجراي صفحه براي اولين بار را نشان مي دهد. در ضمن عمل Post Back نيز انجام نشده است.
شما مي توانيد براي تمرين بيشتر ساير کنترل ها را نيز به داخل Update Panel اضافه نموده و رفتار آن ها را مشاهده کنيد.
به علت اينکه همواره قرار دادن دکمه در محل Update Panel امکان پذير نمي باشد و ما نياز داريم که دکمه را در نقاط مختلف صفحه و محل مخصوص خود قرار دهيم . اين امکان وجود دارد که دکمه را خارج از Update Panel قرار دهيم . براي انجام اين کار ابتدا دکمه را از Update Panel خارج نماييد.
سپس به قسمت کدهاي HTML صفحه برويد و داخل تگ UpdatePanel ، يک تگ Triggers اضافه کنيد. و داخل تگ Triggers ، يک تگ AsyncPostBackTrigger اضافه کنيد.
تغييرات مربوطه را در زير مشاهده مي کنيد.

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
<br />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>همانطور که مشاهده مي کنيد صفت ControlID نام دکمه و صفت EventName نام رويدادي از دکمه است که با به وجود آمدن آن ، محتواي Update Panel به روز رساني خواهد شد.
اکنون دوباره صفحه را اجرا کنيد. خواهيد ديد با اينکه ما دکمه را از داخل Update Panel خارج نموده ايم ولي باز هم عمل بروز رساني بدون انجام عمل PostBack انجام خواهد شد.
در مقالات بعدي کنترل ها و تکنيک هاي ديگر MS Ajax را معرفي خواهم کرد.

[moji5]

در اين مقاله به معرفي کنترل ModalPopupExtender مي پردازم.
مقدمه :

همگي ما پيام هايي را که قبلا با استفاده از تابع window.confirm مربوط به زبان جاوااسکريپت به کاربر نشان مي داديم را به ياد مي آوريم.
با استفاده از کنترل ModalPopupExtender مربوط به Microsoft Ajax مي توان پنجره هايي با ظاهري بسيار زيبا به کاربر نشان داد. در اين مقاله ما دو مثال از کاربرد اين کنترل را انجام خواهيم داد.
مثال اول :

در مثال اول ما يک پنجره پيغام Popup به کاربر نشان خواهيم داد تا رنگ پس زمينه صفحه را انتخاب نموده و تاييد نمايد. سپس بدون اينکه صفحه PostBack نمايد، تغييرات به صفحه اعمال خواهد شد.
در شکل زير اين پنجره را مشاهده مي نماييد.
لازم به ذکر مي باشد که براي اينکه بتوانيم از کنترل ModalPopupExtender استفاده نماييم، ابتدا بايد کتابخانه ASP.NET AJAX Control Toolkit را از اينجا دانلود نماييد. و سپس فايل دانلود شده ، که يک فايل زيپ مي باشد را استخراج نماييد.
همراه با ساير فايل هاي موجود در اين فايل زيپ، يک اسمبلي به نام AjaxControlToolkit.dll موجود مي باشد که در حقيقت تمام کنترل هاي موجود در ASP.NET AJAX Control Toolkit ، در اين اسمبلي مي باشند.
يک پروژه وب سايت از نوع ASP.NET Ajax-Enabled Web Site ايجاد نماييد. اسمبلي AjaxControlToolkit.dll را به Toolbox برنامه ويژوال استوديو اضافه نماييد.
اکنون کنترل هاي موجود در اين اسمبلي را در Toolbox مشاهده مي کنيد.
قبل از ايجاد اجزاي اصلي مثال، لطفا استايل هاي زير را به صفحه (در داخل تگ Head) اضافه نماييد.

<style type="text/css">
.ModalBackColor
{
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
</style>در اينجا دو عدد استايل تعريف شده است که در آينده از آن ها استفاده خواهيم کرد.
کدهاي جاوا اسکريپت زير را به صفحه اضافه کنيد.(در داخل تگ Head)

<script type="text/javascript">
var SelectedColorName;
function onOk()
{
document.bgColor=SelectedColorName;
}
</script>ملاحظه مي کنيد که در اين قسمت ما يک متغير عمومي جاوا اسکريپت به نام SelectedColorName تعريف کرده ايم که وظيفه آن نگهداري نام رنگي است که کاربر در پنجره Popup انتخاب مي کند. وظيفه تابع onOk، اعمال رنگي که در متغير SelectedColorName ذخيره شده است به پس زمينه صفحه مي باشد.
پنجره Popup که به کاربر نمايش داده مي شود درحقيقت يک کنترل Panel مي باشد که سفارشي سازي شده است.
اکنون نوبت به طراحي پنجره Popup يعني همان Panel مي باشد. يک Panel به صفحه اضافه کنيد و تغييرات زير را روي آن اعمال نماييد.

<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none"
Width="233px" Direction="RightToLeft">
<p>آيا مايل هستيد :</p>
<input id="RadioA" name="Radio" onclick="SelectedColorName = 'Yellow';" type="radio" />
<label for="RadioA" class="YellowColor" >رنگ پس زمينه زرد شود.</label><br />
<input id="RadioB" name="Radio" onclick="SelectedColorName = 'Red';" type="radio" />
<label class="RedColor" for="RadioB" > رنگ پس زمينه قرمز شود.</label><br />

<br />
<div align="center">
<asp:Button ID="btnOk" runat="server" Text="OK" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</div>
</asp:Panel>در قطعه کد بالا دو دکمه راديويي داريم که کاربر رنگ مورد نظر خود را از آنها انتخاب مي کند و دو دکمه داريم که کاربر به وسيله آنها مي تواند انصراف يا تاييد را انتخاب کند.
هنگامي که کاربر دکمه هاي راديويي را انتخاب مي نمايد، متغير SelectedColorName مقدار دهي مي شود.
اکنون يک کنترل LinkButton به صفحه به شکل زير اضافه نماييد.

<asp:LinkButton ID="LinkButton1" runat="server">Click Here For Change Color</asp:LinkButton>خوب همه چيز آماده است و اکنون نوبت اضافه کردن کنترل ModalPopupExtender به صفحه مي باشد. با استفاده از Drag And Drop کنترل ModalPopupExtender را به صفحه اضافه کنيد. سپس به نماي Markup برويد و کدها را به صورت زير تغيير دهيد.

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="LinkButton1"
PopupControlID="Panel1"
BackgroundCssClass="ModalBackColor"
DropShadow="true"
OkControlID="btnOk"
OnOkScript="onOk()"
CancelControlID="btnCancel"
/>کنترل ModalPopupExtender داراي صفات مختلفي مي باشد که در زير به معرفي تعدادي از آنها مي پردازم :

• TargetControlID : اين صفت ID کنترلي را نگهداري مي کند که وظيفه آن فعال کردن پنجره Popup مي باشد. در اين مثال ما از کنترل LinkButton1 براي فعال کردن اين پنجره استفاده مي کنيم. يعني وقتي شما روي اين دکمه کليک مي کنيد، پنجره Popup نمايش داده مي شود.
• PopupControlID : اين صفت ID کنترلي را نگهداري مي کند که قرار است به صورت Popup نمايش داده شود. در اين مثال ما از کنترل Panel1 براي انجام اين کار استفاده نموده ايم.
• BackgroundCssClass : اين صفت نام يک استايل را نگهداري مي کند. هنگامي که پنجره Popup در حال نمايش است اين استايل به صفحه اعمال مي شود. و پس از بسته شده پنجره ، از بين مي رود.
• DropShadow : در صورتي که مقدار اين صفت true باشد، هنگام نمايش پنجره Popup ، يک سايه اطراف آن رسم مي شود.
• OkControlID : اين صفت ID کنترلي را نگهداري مي کند که توسط آن ما متوجه مي شويم کاربر پيام نمايش داده شده در پنجره Popup را تاييد نموده است. در اين مثال ما از دکمه btnOk داخل پنل استفاده نموده ايم.
• OnOkScript : اين صفت نام يک تابع جاوا اسکريپت را نگهداري مي کند. در صورتي که کاربر پيام پنجره Popup را تاييد نمايد اين تابع فراخواني مي شود. در اينجا ما از تابع جاوا اسکريپتي که در ابتداي صفحه نوشتيم (onOk) استفاده کرديم.
• CancelControlID : کاربرد اين صفت در حقيقت عکس صفت OkControlID مي باشد. اين صفت ID کنترلي را نگهداري مي کند که هنگام نمايش پنجره Popup ، توسط آن متوجه مي شويم کاربر گزينه انصراف را انتخاب نموده است که در اين مثال دکمه btnCancel مي باشد.
• OnCancelScript : وظيفه اين صفت نيز عکس صفت OnOkScript مي باشد که ما در اين مثال از اين صفت استفاده نکرديم. در نتيجه وقتي کاربر دکمه btnCancel را کليک مي کند اتفاق خاصي نمي افتد و فقط پنجره Popup بسته مي شود.
• X , Y : به طور پيشفرض پنجره Popup در وسط صفحه نمايش ديده مي شود. در صورتي که بخواهيم مکان آن را عوض کنيم بايد به اين دو صفت، مقدار مناسب را بدهيم . مقدار X ,Y مختصات گوشه بالا و سمت چپ پنجره Popup را نگهداري مي کنند.

اکنون صفحه آماده اجرا مي باشد. آن را اجرا نموده و تغييرات را مشاهده نماييد.
مثال دوم :

در مثال قبل تغييرات انتخاب شده توسط کاربر در پنجره Popup، بدون انجام عمل PostBack، به صفحه اعمال شدند.
گاهي اوقات ما احتياج داريم با توجه به انتخاب کاربر، صفحه را PostBack نماييم. در اين مثال اين کار را انجام خواهيم داد.
در اين مثال يک پنجره Popup به کاربر نشان مي دهيم که در صورت تاييد کاربر، صفحه را به سايت 30sharp.com انتقال مي دهيم.
يک صفحه جديد به برنامه اضافه نماييد و يک کنترل ScriptManager به آن اضافه کنيد.
کنترل هاي مثال قبل را به صفحه جديد اضافه کنيد و تغييرات زير را روي آنها اعمال نماييد.
ابتدا در رويدا Click مربوط به کنترل LinkButton قطعه کد زير را بنويسيد.

Response.Redirect("http://www.30sharp.com");محتواي کنترل Panel1 را به صورت زير تغيير دهيد.

<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Direction="RightToLeft"
Style="display: none" Width="233px">
<p>
آيا مايل هستيد به سايت 30sharp.com انتقال يابيد؟</p>

<br />
<div align="center">
<asp:Button ID="btnOk" runat="server" Text="OK" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</div>
</asp:Panel>تابع onOk را به صورت زير تغيير دهيد.

<script type="text/javascript">
var SelectedColorName;
function onOk() {
__doPostBack('LinkButton1','');
}
</script>
نکته اصلي در همين جا مي باشد. اگر به تابع onOk توجه کنيد متوجه مي شويد که ما از تابع PostBack__ جهت ارسال صفحه به سمت سرور استفاده کرده ايم. پس از اينکه صفحه PostBack نمود به طور خود کار رويداد Click مربوط به LinkButton اجرا مي شود و صفحه به سايت 30sharp.com انتقال مي يابد.

[moji5]

کنترل DropShadowExtender يکي از کنترل هاي موجود در AjaxControlToolkit مي باشد. اين کنترل جهت به وجود آوردن سايه (Shadow) در اطراف کنترل هاي صفحه وب استفاده مي شود.
در اين مقاله مي خواهيم يک کنترل Panel به شکل زير، را به وجود آوريم.
شروع :

يک پروژه وب سايت از نوع ASP.NET Ajax-Enabled Web Site ايجاد نماييد.
يک کنترل Panel به صفحه اضافه کنيد. سپس يک کنترل DropShadowExtender که يکي از کنترل هاي مربوط به اسمبلي AjaxControlToolkit مي باشد را به صفحه اضافه کنيد.
ياد آوري :

براي اينکه کنترل هاي مربوط به AjaxControlToolkit را به برنامه اضافه کنيد کافي است اسمبلي AjaxControlToolkit را همانطور که در مقالات قبلي توضيح دادم به Toolbox برنامه اضافه کنيد تا کنترل هاي موجود در آن را مشاهده نماييد.
روي کنترل DropShadowExtender ، کليک راست تموده و گزينه Properties را انتخاب نماييد. صفت TargetControlID ، نام کنترلي را که قرار است براي آن سايه ايجاد کنيم را نگهداري مي کند. پس در اينجا نام Panel1 را به آن نسبت دهيد.
اکنون روي کنترل Panel کليک راست کنيد و گزينه Properties را انتخاب نماييد. اگر با دقت به صفات آن نگاه کنيد، متوجه مي شويد که يک گزينه جديد به نام DropShadowExtender1 به آن اضافه شده است.
روي علامت "+" در سمت چپ اين گزينه کليک کنيد و صفات آن را ملاحظه نماييد.
اکنون به معرفي اين صفات مي پردازم.

1. BehaviorID -- اين صفت شناسه DropShadowExtender مربوطه را نگهداري مي کند. در صورتي که اين گزينه را تغييري دهيد، يک صفت جديد به تگ DropShadowExtender اضافه مي شود که شناسه BehaviorID که شما تغيير داده ايد را نگهداري مي کند.
2. Opacity -- اين صفت ميزان شفافيت سايه دور Panel را نسبت به رنگ پس زمينه صفحه مشخص مي کند که ميزان آن به طور پيشفرض برابر 5 مي باشد. مقدار اين صفت مي تواند بين 0 (کاملا شفاف) و 10 (کاملا تيره) باشد.
3. Rounded -- به طور پيشفرض سايه اي که در اطراف کنترل نمايش داده مي شود به صورت چهارگوش مي باشد و مقدار اين صفت برابر false مي باشد. در صورتي که مقدار آن را true کنيم گوشه هاي سايه و کنترل به صورت منحني نمايش داده مي شود. (همانند شکل بالا)
4. Radius -- در صورتي که صفت Rounded برابر true باشد، اين صفت اندازه شعاع قسمت هاي انحنادار را مشخص مي کند.
5. Width -- اين صفت اندازه سايه اطراف کنترل (در اينجا Panel) را مشخص مي کند که به طور پيشفرض مقدار آن 5 مي باشد و مقياس آن پيکسل مي باشد.
6. TrackPosition -- در صورتي که استايل position مربوط به کنترل (در اينجا Panel) برابر absolute باشد و يا اينکه امکان اين را گذاشته باشيم که Panel بتواند روي صفحه حرکتي داشته باشد، بايد مقدار اين صفت که به طور پيشفرض false مي باشد را true نماييم.

نکته :

تغييراتي که ما اينجا انجام مي دهيم در حقيقت روي تگ <DropShadowExtender> اعمال مي شود و نه Panel .
در زير تغييرات اعمال شده را مي توانيد ببينيد.

<cc1:DropShadowExtender
ID="DropShadowExtender1"
runat="server"
TargetControlID="Panel1"
Radius="8"
Rounded="True"
TrackPosition="true"
Width="7" >
</cc1:DropShadowExtende>اکنون صفحه را اجرا کنيد و نتيجه کار را مشاهده نماييد.

[moji5]

در اين مقاله به معرفي کنترل Accordion که يکي از کنترل هاي موجود در AjaxControlToolkit است، مي پردازم.
مقدمه :

عملکرد کنترل Accordion همانند چندين پنل مي باشد که در هر لحظه فقط محتواي يکي از پنل ها قابل مشاهده مي باشد. عملکرد اين کنترل را مي توانيد در اينجا مشاهده نماييد.
در اين مقاله قصد داريم يک کنترل Accordion به شکل زير ايجاد کنيم که عملکرد آن شبيه 3 پنل مي باشد که در هر لحظه فقط محتواي يکي از آنها قابل مشاهده مي باشد.
شکل کلي قضيه به اين صورت است که کنترل Accordion يک نگاهدارنده (Container) مي باشد که شامل يک و يا چند Accordion Pane مي باشد و در هنگام اجراي صفحه، در هر لحظه فقط محتويات يکي از Accordion Pane نمايش داده مي شود.
شروع :

يک پروژه از نوع ASP.NET AJAX-Enabled WebSite ايجاد کنيد و سپس به نماي سورس (Source View) صفحه برويد. يک کنترل Accordion به صفحه اضافه نماييد و آن را به شکل زير تکميل نماييد.

<ajaxToolkit:Accordion ID="Accordion1" runat="server"
SuppressHeaderPostbacks=true
SelectedIndex="0"
FadeTransitions="true"
FramesPerSecond="40"
TransitionDuration="250"
RequireOpenedPane="false"
AutoSize="None" >
</ajaxToolkit:Accordion>
اکنون به معرفي تعدادي از صفات مربوط به Accordion مي پردازم.

1. SelectedIndex : با مقدار دهي به اين صفت مشخص مي کنيم که هنگام اجراي صفحه، محتواي کداميک از Accordion Pane ها به طور پيشفرض در حال نمايش باشد. در اين مثال من به آن مقدار صفر داده ام پس محتواي اولين Accordion Pane نمايش داده مي شود.
2. FadeTransitions : در صورتي که مقدار اين صفت true باشد هنگام باز و بسته شدن Accordion Pane ها يک جلوه گرافيکي Fade نمايش داده مي شود.
3. FramesPerSecond : با مقدار دهي به اين صفت تعداد فريم هايي را مشخص مي کنيم که حالت انيميشني کنترل Accordion در هر ثانيه اجرا مي کند.
4. TransitionDuration : مدت زمان به ميلي ثانيه، که مدت زمان جلوه انيميشني باز و بسته شدن يک Accordion Pane را مشخص مي کند.
5. HeaderCssClass : نام يک کلاس CSS را مي گيرد که مي تواند به Header تمام Accordion Pane ها و يا يک Accordion Pane مشخص اعمال شود.
6. ContentCssClass : نام يک کلاس CSS را مي گيرد که مي تواند به Content تمام Accordion Pane ها و يا يک Accordion Pane مشخص اعمال شود.
7. HeaderSelectedCssClass : نام يک کلاس CSS را مي گيرد و به Header مربوط به Accordion Pane ي که در هر لحظه انتخاب مي شود اعمال مي شود.
8. SuppressHeaderPostbacks : همانطور که در ادامه مقاله خواهيد ديد، ما در Header مربوط به هر کدام از Accordion Pane ها از يک هايپرلينک استفاده مي کنيم که با کليک شدن آن محتواي قسمت Content آن نمايش داده شود. با true شدن اين صفت، هنگام کليک شدن هايپرلينک ، صفحه Postback نمي کند و فقط محتواي Accordion Pane مربوطه نمايش داده مي شود.(اگر به اين صفت مقدار false بدهيد، هنگام کليک شدن هايپرلينک، صفحه Postback مي کند.)
9. DataSource : کنترل Accordion داراي قابليت Data Binding مي باشد و مي تواند به يک ديتاسورس بايند شود.
10. DataSourceID : اين صفت ID يک ديتاسورس را نگهداري مي کند.
11. DataMember : هنگامي که از DataSourceID استفاده مي کنيم، اين صفت نام عضو (Member) را نگهداري مي کند.
12. RequireOpenedPane : به طور پيشفرض مقدار اين صفت true مي باشد و هنگامي که روي لينک داخل Header هر Accordion Pane کليک مي کنيد محتواي آن Accordion Pane نمايش داده مي شود (Pane باز مي شود) و در زماني که محتواي آن Accordion Pane در حال نمايش باشد، وقتي روي هايپرلينک کليک مي کنيد اتفاقي نمي افتد. اگر مقدار اين صفت را به false تغيير دهيد آنگاه هنگام کليک مجدد بر روي هايپرلينک ، اگر محتواي Accordion Pane در حال نمايش باشد آن را مي بندد و در غير اينصورت آن را باز مي کند.
13. AutoSize : اين صفت مي تواند سه مقدار داشته باشد. اگر مقدار آن "None" باشد هنگام باز و بسته شدن Accordion Pane، سايرعناصر صفحه با توجه به اندازه محتويات Accordion Pane به اطراف جابجا مي شوند. اگر مقدار آن "Limit" باشد، سايز Accordion Pane هنگام باز شدن، بيشتر از سايزي که ما به Accordion Pane داده ايم نخواهد شد ولي اگر سايز محتويات آن کمتر از اندازه اي که ما داده ايم باشد، اندازه Accordion Pane به اندازه محتويات خواهد شد. اگر مقدار آن "Fill" باشد.سايز Accordion Pane دقيقا برابر سايزي مي شود که ما داده ايم و درنتيجه کمتر يا بيشتر نمي شود.

تذکر :

در اينترنت اکسپلورر 6 و 7 هنگامي که مقدار صفت AutoSize برابر Limit يا Fill باشد ، دقيقا يکسان رفتار مي کنند زيرا اين نسخه ها از صفت max-height مربوط به CSS حمايت نمي کنند.
اکنون به سراغ اضافه کردن Accordion Pane ها به کنترل Accordion مي رويم.
کنترل Accordion داراي تگ <Panes> مي باشد که Accordion Pane ها داخل اين تگ قرار مي گيرند. همانطور که در قطعه کد زير مشاهده مي کنيد، ما يک Accordion Pane را به کنترل Accordion اضافه کرده ايم .

<ajaxToolkit:Accordion ID="Accordion1" runat="server"
SuppressHeaderPostbacks=true
SelectedIndex="0"
HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent"
FadeTransitions="true"
FramesPerSecond="40"
TransitionDuration="250"
RequireOpenedPane="false"
AutoSize="None" >

<Panes>
<ajaxToolkit:AccordionPane ID = "AccordionPane1" runat = "server" >
<Header>
<a href = "" class = "accordionLink"> Section 1</a>
</Header>
<Content>
<p>Persian C# Developers in <font color=red><b>30sharp.COM</b></font></p>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
هنگامي که با دقت به قطعه کد بالا نگاه کنيد متوجه مي شويد که Accordion Pane داراي دو تگ به نام هاي Header و Content مي باشد. در قسمت Header يک هايپرلينک قرار داده شده است که عملکرد آن را قبلا توضيح داده ام و در قسمت Content نيز محتواي Accordion Pane قرار مي گيرد.
اکنون کار تمام است و شما مي توانيد صفحه را اجرا کنيد و نتيجه را ببينيد.

[moji5]

در اين مقاله به معرفي کنترل ConfirmButtonExtender که يکي از مجموعه کنترل هاي موجود در ASP.NET AjaxControlToolkit مي باشد، مي پردازم.
مقدمه :

اين مقاله را با طرح يک مثال شروع مي کنم. فرض کنيد که يک سيستم خبرنامه نوشته ايد که تعدادي از کاربران در آن عضو شده اند و براي سهولت کاربران، امکان لغو اشتراک را توسط دکمه اي قرار داده ايد. حال اگر کاربر به طور اتفاقي و ناخواسته اين دکمه را کليک کند چه اتفاقي مي افتد؟
نتيجه اين مي شود که اشتراک کاربر در خبرنامه لغو مي شود. مشابه اين حالت مي تواند در موقعيت هاي مختلف مانند حذف رکورد ها از ديتابيس و ارسال فرم هايي با اطلاعات مهم پيش آيد. پس ما احتياج داريم که به نحوي اطمينان پيدا کنيم که کاربر به طور تصادفي دکمه را کليک نکرده است.
کنترل ConfirmButtonExtender به همين منظور به وجود آمده است.
شروع :

يک پروژه وب سايت از نوع ASP.NET AJAX-Enabled WebSite ايجاد نماييد. يک کنترل Label و يک کنترل Button به صفحه اضافه کنيد و در رويداد کليک Button قطعه کد زير را بنويسيد.

protectedvoid Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Form Submited on : "+DateTime.Now.ToString("T");
}
همانطور که مشاهده مي کنيد، در صورتي که Button کليک شود، تاريخ کليک شدن آن را Label نشان مي دهد.
اکنون مي خواهيم هنگامي که کاربر روي دکمه کليک کرد، يک پنجره به شکل زير به کاربر نشان دهيم.
در صورتي که کاربر دکمه OK را کليک نمايد، متوجه خواهيم شد که دکمه به طور اتفاقي و ناخواسته کليک نشده است و رويداد کليک Button اجرا مي شود و در صورتي که دکمه Cancel را کليک نمايد، متوجه مي شويم که دکمه به صورت ناخواسته کليک شده است و رويداد کليک Button اجرا نمي شود.
يک کنترل ConfirmButtonExtender به صفحه اضافه کنيد. به نماي Source View برويد و قطعه کد آن را به شکل زير تغيير دهيد.

<cc1:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server"
TargetControlID="Button1"
ConfirmOnFormSubmit="True"
ConfirmText="آيا براي انجام اين کار مطمئن مي باشيد؟" >
</cc1:ConfirmButtonExtender>اکنون به شرح صفات کنترل ConfirmButtonExtender مي پردازم

1. TargetControlID : اين صفت نام Button يا LinkButton ي را نگهداري مي کند که قصد داريم هنگام کليک شدن آن توسط کاربر اعمالي که قبلا ذکر شد، انجام شود. در اين مثال، Button1 مي باشد.
2. ConfirmText : جمله اي را نگهداري مي کند که از کاربر، زماني که دکمه کليک مي شود، پرسيده مي شود.
3. OnClientCancel : نام يک تابع جاوا اسکريپت را نگهداري مي کند که زماني که کاربر دکمه Cancel را کليک مي کند، فراخواني مي شود. اين صفت اختياري مي باشد که بسته به نياز خود مي توانيد در زمان نياز، تابع جاوا اسکريپت آن را بنويسيد.
4. ConfirmOnFormSubmit: با true نمودن اين صفت، تنها زماني پنجره مورد نظر ما نمايش داده مي شود که فرم بدون هيچ مشکلي آماده براي ارسال به سمت سرور يعني Submit شدن مي باشد. مثلا اگر فرمي داشته باشيم که در آن از Validator ها استفاده کرده باشيم، تنها زماني پنجره مورد نظر ما نمايش داده مي شود که فرم کاملا توسط Validator ها اعتبارسنجي شده و آماده براي Submit باشد.

صفحه مورد نظر را اجرا کنيد و نتيجه را مشاهده نماييد.

[moji5]

مقدمه :

در نرم افزارهاي تحت وب، مواقعي پيش مي آيد که قصد داريم موردي را در معرض امتيازدهي کاربران قرار دهيم. مثلا امکان اين را بدهيم که کاربر، يک امتياز از بين 1 تا 5 را انتخاب نموده و به يک مقاله يا محصول و يا غيره نسبت دهد.
با جمع آوري مجموعه امتيازات نسبت داده شده به محصول، توسط کاربران، مي توانيم ميزان محبوبيت محصول را مورد ارزيابي قرار دهيم.
کنترل Rating بدين منظور به وجود آمده است. در اين مقاله اين کنترل را معرفي نموده و سپس يک مثال کاربردي از آن را انجام خواهم داد.
کنترل Rating در حالت پيشفرض داراي شکل و يا رنگ خاصي نمي باشد و براي شکل دادن به آن بايد از CSS استفاده نماييد.
در اين مقاله ما قصد داريم Rating را به شکل زير در آوريم.
همانطور که ملاحظه مي کنيد، براي به وجود آوردن شکل بالا ما نياز به دو قطعه عکس داريم. يکي براي ستاره هاي زرد رنگ و يکي براي ستاره هاي بدون رنگ.
ضمنا يک قطعه عکس ستاره قرمز رنگ نيز نياز داريم که در مدت زمان بين کليک شدن کنترل Rating توسط کاربر و به اتمام رسيدن پردازش سمت سرور، اين عکس نمايش داده مي شود.
به طور کلي ما از استايل هاي زير در اين مقاله استفاده مي کنيم.

.ratingStar {
font-size: 0pt;
width: 13px;
height: 12px;
margin: 0px;
padding: 0px;
cursor: pointer;
display: block;
background-repeat: no-repeat;
}
.filledRatingStar {
background-image: url(Images/FilledStar.png);
}
.emptyRatingStar {
background-image: url(Images/EmptyStar.png);
}
.savedRatingStar {
background-image: url(Images/SavedStar.png);
}
شروع :

يک پروژه از نوع ASP.NET Ajax-Enabled WebSite ايجاد کنيد و کنترل Rating را به صفحه اضافه نماييد. به نماي Source View رفته و قطعه کد موجود را به شکل زير تغيير دهيد.

<cc1:Rating ID="Rating1" runat="server"
CurrentRating="2"
MaxRating="5"
StarCssClass="ratingStar"
WaitingStarCssClass="savedRatingStar"
FilledStarCssClass="filledRatingStar"
EmptyStarCssClass="emptyRatingStar"
OnChanged="RatingChanged"
/>کنترل Rating داراي صفات نسبتا زيادي مي باشد که من در اينجا چند عدد از مهمترين ها را معرفي مي کنم.

1. CurrentRating: اين گزينه امتيازي را مشخص مي کند که ما به طور پيشفرض به کنترل Rating داده ايم. به طور مثال در قطعه کد بالا مشخص کرديم که دو عدد از ستاره ها روشن باشند يعني امتياز 2 از 5 را به آن داده ايم.
2. MaxRating : اين صفت بيشترين امتيازي را که کاربر مي تواند اعمال نمايد را مشخص مي کند. در قطعه کد بالا بيشترين امتياز، 5 در نظر گرفته شده است يعني 5 ستاره چهت امتياز دادن وجود دارد و کاربر مي تواند امتياز بين 1 تا 5 را انتخاب کند.
3. StarCssClass : اين صفت نام کلاس CSS ي را نگهداري مي کند که به کليه ستاره هايي که در حال نمايش هستند، اعمال مي شود.
4. WaitingStarCssClass : نام کلاس CSS ي را نگهداري مي کند که بين مدت زماني که کاربر بر روي امتياز مورد نظر خود کليک مي کند و زماني که پردازش سمت سرور به انتها مي رسد، اين استايل به کنترل اعمال مي شود.
5. FilledStarCssClass : نام کلاس CSS ي را نگهداري مي کند که به ستاره هايي که روشن هستند اعمال مي شود.
6. EmptyStarCssClass : نام کلاس CSS ي را نگهداري مي کند که به ستاره هايي که خاموش هستند اعمال مي شود.
7. AutoPostBack : اگر مقدار اين صفت true باشد، هنگامي که کاربر روي کنترل کليک مي کند عمل PostBack انجام مي شود.
8. ReadOnly : اگر مقدار اين صفت true باشد، اين کنترل غير قابل تغيير مي شود و کاربر فقط مي تواند امتياز را ببيند و نمي تواند آن را تغيير دهد.
9. RatingAlign : اين صفت مي تواند مقادير Vertical يا Horizontal را بگيرد و همانطور که از نامش پيداست، مشخص مي کند که کنترل به صورت عمودي يا افقي نمايش داده شود.
10. RatingDirection : مشخص مي کند که چينش ستاره ها از "راست به چپ" يا از "چپ به راست" يا از "بالا به پايين" يا از "پايين به بالا" باشد.
11. OnChanged : اين گزينه نام يک رويداد (Event) را نگهداري مي کند که هنگام کليک شدن کنترل Rating توسط کاربر، اتفاق مي افتد.
12. Tag : اين صفت مي تواند يک مقدار دلخواه را نگهداري نمايد. در ادامه اين مقاله کاربرد اين صفت را خواهيد ديد.

مثال دوم :

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

<cc1:Rating ID="Rating1" runat="server"
CurrentRating="2"
MaxRating="5"
StarCssClass="ratingStar"
WaitingStarCssClass="savedRatingStar"
FilledStarCssClass="filledRatingStar"
EmptyStarCssClass="emptyRatingStar"
OnChanged="RatingChanged"
Tag='<%# Eval("ProductID") %>'
/>قسمت جالب اين کد، صفت Tag مي باشد که ProductID مربوط به هر محصول را نگهداري مي کند. با کليک شدن کنترل Rating مربوط به هر محصول، ما در رويداد OnChanged به صورت زير به شناسه محصول و امتيازي که کاربر مي دهد، دسترسي داريم

protectedvoid RatingChanged(object sender, RatingEventArgs e)
{
int ProductID =int.Parse(e.Tag);
string Rate = e.Value;
}

[moji5]

مقدمه :

عملکرد کنترل DropDownExtender ، در حقيقت همانند يک Label مي ماند که وقتي اشاره گر ماوس را روي آن قرار مي دهيم شکل آن شبيه به يک DropDown مي شود و با کليک روي آن، گزينه هاي DropDown مشخص مي شود و ما مي توانيم يکي از گزينه ها را انتخاب نماييم.
عملکرد اين کنترل را در 3 حاالت زير مي بينيد.
1- شکل اين کنترل قبل از اينکه ماوس روي آن قرار بگيرد :
2 - شکل اين کنترل زماني که ماوس روي آن قرار دارد :
3 - شکل اين کنترل زماني که روي آن کليک مي شود :
در اين مقاله به پياده سازي يک DropDownExtender خواهم پرداخت که داراي 3 گزينه به نام هاي Option1 و Option2 و Option3 مي باشد.با کليک شدن هر گزينه ، متن گزينه کليک شده را نشان خواهيم داد. دقت داشته باشيد که تمام اعمال ذکر شده بدون انجام عمل PostBack، صورت خواهد گرفت.
دموي اين برنامه را ميتوانيد اينجا مشاهده کنيد.
براي پياده سازي مثال فوق احتياج به يک Label داريم که در حقيقت متن DropDownExtender را در حالت عادي نگهداري مي کند. سپس به يک کنترل Panel احتياج داريم که گزينه هاي DropDownExtender را نگهداري مي کند. هر يک از گزينه ها (Option ها) در حقيقت يک LinkButton هستند. و در نهايت زمان اضافه کردن کنترل DropDownExtender خواهد رسيد.
شروع :

در اين مثال من از استايل هاي زير براي شکل دهي به کنترل ها استفاده مي کنم.

.ContextMenuPanel
{
border: 1pxsolid#868686;
z-index: 1000;
background: url(menu-bg.gif)repeat-y00#FAFAFA;
cursor: default;
padding: 1px1px0px1px;
font-size: 11px;
}
a.ContextMenuItem
{
margin: 1px01px0;
display: block;
color: #003399;
text-decoration: none;
cursor: pointer;
padding: 4px19px4px33px;
white-space: nowrap;
}
a.ContextMenuItem-Selected
{
font-weight: bold;
}
a.ContextMenuItem:hover
{
background-color: #FFE6A0;
color: #003399;
border: 1pxsolid#D2B47A;
padding: 3px18px3px32px;
}
يک وب سايت از نوع ASP.NET Ajax-Enabled WebSite ايجاد نموده و به نماي Source View برويد.
قطعه کد زير را اضافه نماييد.

<asp:Label ID="TextLabel" runat="server" Text="DropDownExtender Example in 30sharp.com" Width="259px" />
<asp:Panel ID="DropPanel" runat="server" CssClass="ContextMenuPanel" Style="display :none; visibility: hidden;" >
<asp:LinkButton runat="server" ID="Option1" Text="Option 1" CssClass="ContextMenuItem" OnClick="OnSelect" />
<asp:LinkButton runat="server" ID="Option2" Text="Option 2" CssClass="ContextMenuItem" OnClick="OnSelect" />
<asp:LinkButton runat="server" ID="Option3" Text="Option 3" CssClass="ContextMenuItem" OnClick="OnSelect" />
</asp:Panel>
<cc1:DropDownExtender runat="server" ID="DDE"
TargetControlID="TextLabel"
DropDownControlID="DropPanel" />
همانطور که مشاهده مي نماييد ما يک Label به نام TextLabel ايجاد نموده و متن آن را DropDownExtender Example in 30sharp.com قرار داده ايم. سپس يک Panel به نام DropPanel ايجاد نموده ايم که وظيفه آن نگهداري گزينه ها مي باشد.
همانطور که قبلا ذکر شد، هر يک از گزينه ها در حقيقت يک LinkButton مي باشند. در رويداد کليک هر LinkButton نام تابع OnSelect نوشته شده است. اين تابع را ما در Code Behind صفحه خواهيم نوشت که وظيفه آن مشخص کردن اين است که کدام گزينه انتخاب شده است. اين تابع را در ادامه مقاله مورد بررسي قرار خواهم داد.
سپس کنترل DropDownExtender را به صفحه اضافه نموده ايم. اين کنترل داراي صفات زيادي مي باشد که ما از دو تا از مهمترين آن ها استفاده نموده ايم که عبارتند از :

1. TargetControlID : اين صفت شناسه کنترلي را نگهداري مي کند که نقش کنترل DropDown را ايفا مي کند. که در اينجا ما TextLabel را به آن نسبت داده ايم.
2. DropDownControlID : اين صفت شناسه کنترلي که گزينه هاي DropDown را در خود نگهداري مي کند، را مشخص مي کند که در اين مثال DropPanel مي باشد.

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

<asp:UpdatePanel id="Update" runat="server" >
<ContentTemplate>
<asp:Label id="lblSelection" runat="server" Style="padding: 5px; " />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Option1" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Option2" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Option3" EventName="Click" />
</Triggers>
</asp:UpdatePanel>در قطعه کد بالا يک Label به نام lblSelection در داخل يک UpdatePanel تعريف نموده ايم که ما متن گزينه انتخاب شده در DropDownExtender را در اين Label نشان خواهيم داد.
عملکرد تگ AsyncPostBackTrigger را قبلا در مقاله اي توضيح داده ام ولي جهت يادآوري بايد عرض کنم که با توجه به اينکه LinkButton هايي که ما به عنوان گزينه هاي DropDown استفاده نموده ايم در خارج از UpdatePanel قرار دارند و ما تمايل داريم که با کليک شدن آن ها ، بدون انجام PostBack، کنترل lblSelection به روز رساني شود، پس نياز داريم که با استفاده از تگ AsyncPostBackTrigger، اين LinkButton ها را به UpdatePanel معرفي نماييم.
حال نوبت به اين مي رسد که ببينيم کار تابع OnSelect که با کليک شدن هر يک از گزينه ها (LinkButton ها) فراخواني مي شود چيست.

protectedvoid OnSelect(object sender, EventArgs e)
{
lblSelection.Text = "You selected <b>" + ((LinkButton)sender).Text + "</b>.";
}
عملکرد قطعه کد فوق کاملا مشخص مي باشد. با کليک شدن هر يک از گزينه ها، متن آن گزينه به کنترل lblSelection نسبت داده مي شود و در حقيقت ما در اين تابع به تمام خصوصيات گزينه کليک شده دسترسي داريم.
تمام اين اعمال بدون انجام شدن عمل PostBack ، صورت مي گيرد.

[moji5]

مقدمه :

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_ ذخيره کرده بوديم بر مي گردانيم.

[moji5]

اين مقاله را با يک مثال آغاز مي کنم. يک کنترل UpdatePanel به صفحه اضافه کنيد وسپس داخل UpdatePanel ، يک Button و يک Label اضافه نماييد.
در نتيجه شکل زير را مشاهده مي نماييد. (البته من مقداري Style هم به صفحه اضافه کرده ام)
در رويداد کليک مربوط به کنترل Button قطعه کد زير را بنويسيد.

protectedvoid Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label1.Text = DateTime.Now.ToString();
}
همانطور که ملاحظه مي کنيد، با کليک شدن Button، ابتدا 3 ثانيه تاخير به وجود آورده ايم و سپس تاريخ و زمان را در کنترل Label چاپ کرده ايم.
وقتي يک کاربر عادي ، روي Button کليک مي کند، مشاهده مي نمايد که به مدت 3 ثانيه هيچ اتفاق خاصي نمي افتد و سپس تاريخ نمايش داده مي شود.
در برنامه هاي کاربردي، بسيار پيش مي آيد که عمليات سمت سرور مقداري زمان بر، مي باشد. مثلا قرار است اطلاعات از ديتابيس خوانده شود و يا اعمال ديگر.
براي کاربراني که به Postback شدن صفحات عادت داشته اند، اين موضوع چندان خوش آيند نمي باشد و امکان دارد که پس از کليک کردن Button، هنگامي که مشاهده کردند پس از طي چند ثانيه اتفاق خاصي نيفتاده است، مجددا Button را کليک کنند (در حاليکه در حال حاضر اطلاعات در سمت سرور درحال پردازش مي باشد)
پس نياز است هنگامي که هنگامي که اطلاعات در سمت سرور در حال پردازش مي باشد، به نحوي اين موضوع را به کاربر نشان دهيم.
بدين منظور از کنترل UpdateProgress استفاده مي شود.
اکنون قصد داريم که در مدت زماني که اطلاعات در سمت سرور در حال پردازش مي باشند، يک تصوير Loading به شکل زير را به کاربر نمايش دهيم.
کنترل UpdateProgress را به صفحه اضافه کنيد. به نماي Markup رفته و کد آن را به شکل زير تغيير دهيد.

<asp:UpdateProgressID="UpdateProgress1"runat="server">
<ProgressTemplate>
<imgsrc="25-1.gif"/>
Updating Page ......
</ProgressTemplate>
</asp:UpdateProgress>
مشاهده مي نماييد که کنترل UpdateProgress داراي تگي به نام ProgressTemplate مي باشد که در داخل اين تگ، محتوايي که قرار است هنگام انجام پردازش اطلاعات سمت سرور به کاربر نمايش دهيم، قرار مي گيرد.
ما در اينجا يک تصوير Loading به همراه عبارت Updating page را قرار است به کاربر نمايش دهيم.
خوب، کار تمام است. صفحه را اجرا کنيد و نتيجه کار را مشاهده نماييد.
موفق باشيد.

[moji5]

کنترل Timer جهت انجام يک سري اعمال در فواصل زماني مشخص، استفاده مي شود. در حقيقت با استفاده از اين کنترل مي توانيم يک تابع را در سمت سرور، در فواصل زماني مشخص، از سمت کلاينت فراخواني نماييم.
فرض کنيد که يک کنترل Label داريم که قرار است هر 3 ثانيه بروز رساني شود و تاريخ و زمان بروز رساني خود را نمايش دهد.
عملکرد اين کنترل را مي توانيد اينجا مشاهده نماييد.
به قطعه کد زير توجه نماييد.
<asp:UpdatePanelID="UpdatePanel1"runat="server">
<ContentTemplate>
<asp:TimerID="Timer1"runat="server" Interval="3000" OnTick="Timer1_Tick"/>
<asp:LabelID="Label1"runat="server"Font-Names="Tahoma"ForeColor="Red"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
همانطور که ملاحظه مي نماييد، داخل اين صفحه ما يک UpdatePanel داريم که کنترل Timer و Label در داخل آن قرار دارند.
صفت Interval، فاصله زماني را که پس ازآن، کنترل Timer عمل خواهد کرد را نگهداري مي کند. در اينجا ما مدت زمان 3000 ميلي ثانيه يا در حقيقت 3 ثانيه را به آن نسبت داده ايم.
پس از گذشت هر 3 ثانيه، رويداد OnTick اتفاق مي افتد و تابع Timer1_Tick فراخواني مي شود.
قطعه کد زير عملکرد تابع ، Timer1_Tick را نشان مي دهد.

protectedvoid Timer1_Tick(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString();
}
در هنگام استفاده از کنترل Timer بايد دقت داشته باشيد که اگر به هر دليلي مانند قطع اينترنت يا ترافيک بالاي شبکه و غيره، فراخواني تابع Timer1_Tick با مشکل مواجه شود، در سمت کاربر يک خطاي استثنا (Exception) به وجود مي آيد و به طور متناوب به کاربر اين خطا به شکل صفحه ديالوگ، نمايش داده مي شود. لذا بايد براي کنترل خطاهاي به وجود آمده چاره اي بينديشيد که از حوزه بحث اين مقاله خارج مي باشد.
کنترل Timer داراي انعطاف پذيري زيادي نمي باشد و در نتيجه هنگام استفاده از اين کنترل در پروژه هاي کاربردي و حساس خود بايد کليه جوانب کار را بررسي نماييد.
کنترل عملکرد Timer در سمت کلاينت با استفاده از جاوااسکريپت :

عملکرد کنترل Timer را در سمت کلاينت مي توان با استفاده از جاوااسکريپت تغيير داد.
ابتدا بايد يک ارجاع به کنترل Timer در صفحه ايجاد کنيد. در قطعه کد زير اين مسئله را مشاهده مي نماييد.

var myTimer = $find('<%= Timer1.ClientID %>');اکنون به سادگي با استفاده از myTimer مي توانيد رفتار کنترل Timer را تغيير دهيد.

//returns the Timer’s interval in milliseconds:
var waitTime = myTimer.get_interval;
//sets the Timer’s interval to 5000 milliseconds (or 5 seconds):
myTimer.set_interval(5000);
//returns whether or not the Timer is enabled:
var isTimerEnabled = myTimer.get_enabled();
//disables the Timer:
myTimer.set_enabled(false);
//starts the Timer:
myTimer._startTimer();
//stops the Timer:
myTimer._stopTimer();