کنترول های AJAX

ابتدا بیایید کمی در مورد کنترل های ScriptManager , UpdatePanel , Timer ,UpdateProgress که به صورت پیشفرض در ASP.NET موجود است صحبت کنیم. 

ScriptManager :  در گذشته طراحان صفحات وب برای اینکه بتوانند فناوری وب را در صفحات خود بکار ببرند باید با اسکریپت نویسی سمت کلاینت کاملا آشنا بوده و کد های زیادی را برای انجام آین کار می نوشتند اما ASP.NET برای رفع این مشکل کنترول های را معرفی کرد که به طور خودکار این اسکریپت نویسی را انجام می دهد. برای بکار گیری فناوری AJAX باید این کنترل را به صفحه خود اضافه کنید.( این کنترل را می توان در هر جایی از صفحه قرار داد)  

 کد زیر نمونه ای از تعریف این کنترل در برگه Source را نمایش میدهد:   

 <asp:ScriptManager runat="server" ID="ScriptManager1" /> 

UpdatePanel: نکته کلیدی در فناوری AJAX این است که کارها بیشتر در سمت کلاینت اجرا شوند این کار برای این است که با رفت و برگشت صفحه به سمت سرور زمان زیادی نسبت به اجرای کد در سمت کلاینت به طول می انجامد. اما در بعضی مواقع ما مجبوریم حتی برای یک کار کوچک صفحه را به سمت سرور ارسال کنیم.(برای مثال فرض کنید شما در یک صفحه ثبت نام می خواهید چک کنید که آیا نام کاربری وارد شده ثبت شده است با نه، بدون شک انجام این کار در سمت کلاینت غیر ممکن است چون بانک اطلاعاتی شما در سرور می باشد ) در این جا است که این کنترل به کمک ما میاید. کار اصلی این کنترول این است که بدون ارسال کل صفحه به سرور فقط قسمتی از آن را که ما می خواهیم به سرور ارسال می کند. 

کد زیر نمونه ای از تعریف این کنترل در برگه Source را نمایش میدهد:  

<asp:UpdatePanel ID="UpdatePanel1" runat="server">   

<ContentTemplate> 

محل قرار گیری کنترل های که بصورت AJAX قرار است اطلاعات خود را به سرور ارسال کنند 

</ ContentTemplate> 

<Triggers>  

</Triggers> 

</ asp:UpdatePanel> 

پروژه1: یک پروژه جدید ایجاد کنید . درون صفحه خود یک کنترل  ScriptManager و یک UpdatePanel قرار دهید. 

درون UpdatePanel در ما بین بلاک  ContentTemplate یک کنترل Label و یک کنترل Button قرار دهید . سپس در رویداد کلیک کنترل Button کد زیر را بنویسید و برنامه را اجرا کنید. 

label1.text="time:"+ datetime.tolongtimestring(); //return time 

پروژه ۲: پروژه قبل را باز کنید و کنترل Button را از داخل ContentTemplate حذف کرده و بیرون از کنترل UpdatePanel قرار دهید. سپس در مابین بلاک های   <Triggers> در داخل UpdatePanel کد زیر را بنویسید: 

<asp:AsyncPostBackTrigger ControlId="button1" EventName="Click" /> 

پروژه را اجرا کنید می بینید که نتیجه با پروژه قبل دقیقا برابر است. 

Timer: این کنترل این امکان را به ما می دهد که در بازه زمانی مشخص کد های را به صورت AJAX اجرا کنیم. این کنترل دو خصوصیت مهم دارد Enabled و Interval که کا آنها فعال کردن کنترل و مدت زمان بازه  می باشد.   

 پروژه3:برای انجام پروژه  کافی است در پروژه قبل یک timer درون وب قرار دهید و خصوصیت Interval آن را برابر با 1000 قرار دهید و در تابع مدیریت کننده رویداد Tick کد های که برای Button نوشته بودید را وارد کنید. و سپس مانند پروژه قبل که رویداد کلیک را در بلاک Triggers قرار دادید رویداد Tick و کنترل Timer را قرار دهید و پروژه را اجرا کنید. 

UpdateProgress: زمانی که شما از کنترل UpdatePanel استفاده می کنید در هنگان ارسال و دریافت اطلاعات به سرور تا زمانی که این کار به اتمام نرسیده هیچ اتفاقی درون صفحه رخ نمیدهد(در پروژه های که تانون نوشته اید چون سرور بصورت مجازی روی سیستم خودتان قرار دارد سرعت ارسال و دریافت اطلاعات بسیار بالا است) و کاربر ممکن است فکر کند که هیچ عملیاتی انجام نمی شود و درخواست خود را تکرار کند. برای حل این مشکل ASP.NET  این کنترول را معرفی کرد. کار این کنترل این است که در زمان انجام فرایند ارسال و دریافت این کنترل نمایش داده میشود تا کاربر متوجه شروع این فرایند شود. 

پروژه 4:  پروژه 1 را باز کنید و کد زیر را به آن اضافه کنید: 

<asp:UpdateProgress ID="UpdateProgress1" runat="server"> 

<ProgressTemplate> 

<table width="200" style="background-color:red;> 

<tr> 

<td> 

Please waite... 

</td> 

</tr> 

</table> 

</ProgressTemplate> 

</asp:UpdateProgress> 

البته ممکن است این کار در سیستم شما نتیجه ای نداشته باشد برای اینکه انجام عملیات در سرور را به تاخیر بیاندازیم تا شما بتوانید نتیجه را در سیستم خود ببینید کد زیر را در رویداد Click کنترل Button بنویسید: 

System.Threading.Thread.Sleep(4000); //sleep for 4 s