آموزش کنترلهای آژاکس در ASP.NET

آموزش کاربرد کنترل AJAX در ASP.NET

AJAX سرواژه ی Asynchronous JavaScript and XML می باشد. ایجکس در واقع یک فناوری یا تکنولوژی corss-platform (به آن دسته از نرم ‌افزارها گفته می ‌شود که در چندین بستر اجرای نرم افزار رایانه‌ای یا همان platform قابل اجرا هستند( که زمان پاسخ دهی (response time) را به گونه ی قابل توجهی کاهش می دهد. به عبارت دیگر ایجکس مجموعه‌ای از استانداردها و فناوری‌های ویژه ی وب است که با بهره گری از آنها می‌توان برنامه‌هایی مبتنی بر وب نوشت که به آسانی با کاربران تعامل (interaction) داشته باشند. با استفاده از این فناوریها و با کمک انتقال تکه‌های کوچک داده و اطلاعات از Server، صفحات وب از حالت منفعل خارج می‌شوند و واکنشهایی مناسب با رویدادها انجام می‌دهند. با استفاده از این معماری، صفحات وب تعامل بسیار خوبی با کاربران خواهند داشت. علاوه بر آن، مهم‌ترین مزیت این معماری این است که دیگر برای انجام هر کاری، احتیاج نیست صفحه وب دوباره بارگذاری شود.

با این حال درست مانند دیگر کنترل های سمت سرور ASP.NET، کنترل های سمت سرور ایجکس (AJAX server controls) نیز می توانند دارای متدها و event handler های (مدیریت کننده ی رخداد) مرتبط با آن متدها باشند که در سمت سرور (server side) پردازش می شوند.

control toolbox در محیط برنامه نویسی یکپارچه ی visual studioشامل مجموعه ای از کنترل ها می باشد که 'AJAX Extensions' یا به عبارتی دیگر افزونه های ایجکس خوانده می شوند.

کنترل ScriptManager

کنترل ScriptManager مهم ترین control تلقی می گردد، به گونه ای که کنترل های دیگر موجود در صفحه برای عملکرد صحیح به وجود ScriptManager احتیاج دارند.

کنترل ScriptManager ، وظیفه مدیریت پردازه ها (script) بر روی صفحات ASP.Net ای که امکان و قابلیت Ajax آنها فعال سازی شده است را بر عهده دارد . به صورت پیش فرض، کنترل ScriptManager اسکریپت های به وقوع پیوسته متعلق به عملیات ایجکس در صفحه را ، با مجموعه سایر پردازه های (script) صفحه مرتبط می کند .

این کار امکان استفاده از قابیلت های مرورگر در سمت سرویس گیرنده (client-side) و بروز رسانی بخش های مختلف صفحه بدون بارگذاری مجدد یا تجدید کامل آن را می دهد.

نحوه ی کلی نگارش (syntax) کنترل مذکور به ترتیب زیر می باشد:

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

چنانچه وب سایتی ایجاد کنید که تکنولوژی ایجکس در آن بکار گرفته شده ('Ajax Enabled site') یا یک فرم وب ایجکس ('AJAX Web Form' ) از طریق پنجره ی محاوره (dialog box) به آن اضافه گردیده، در آن صورت مشاهده خواهید که فرم وب شما به صورت خودکار کنترل script manager را در خود خواهد داشت. کنترل ScriptManager ترتیب کلیه ی اسکریپت های سمت سرویس گیرنده (client-side script) را به ازای تمامی کنترل های سمت سرویس دهنده (server side control) می دهد.

کنترل UpdatePanel

UpdatePanel control در حقیقت یک کنترل دربرگیرنده (container control) است که از کلاس Control مشتق شده است. کنترل ذکر شده به مثابه ی یک ظرف (نگهدارنده) برای کنترل های فرزند (child control) عمل می کند. این کنترل همچنین دارای رابط (interface) مختص خود نیست. هنگامی که یکی از کنترل های موجود در آن، در صدد انجام و راه اندازی postback برمی آید، UpdatePanel مداخله کرده و باعث می شود ارسال (post) به صورت ناهمزمان صورت گرفته (آغاز شده) و تنها قسمت مورد نظر صفحه بروز رسانی شود.

کنترل UpdatePannel این امکان را به برنامه نویس می دهد، تا برنامه های تحت وب کارامد و با رابط کاربری همانند برنامه های رایانه های رومیزی بسازید . به وسیله این کنترل می توانید قسمت یا بخش هایی از صفحه را که می خواهید اطلاعات آن تغییر کرده را بروز رسانی کرده و بدین وسیله از تجدید یا بارگذاری دوباره و Postback کل صفحه به server جلوگیری کنید.

control UpdatePannel ،با جدا سازی بخش مورد نظر از صفحه، حین به روز رسانی خود ، فقط آن قسمت های مرتبط را آپدیت کرده و مانع از بارگذاری مجدد یا بازسازی و Postback کل صفحه ی مورد نظر می شود.

برای مثال اگر یک دکمه ی موجود در کنترل نام برده کلیک شود، تنها کنترل های داخل update panel تحت تاثیر قرار گرفته و کنترل های موجود در بخش های دیگر صفحه هیچ تغییری نمی کنند. به این فرایند postback جزئی / بخشی یا ناهمگام (asynchronous / partial postback) گفته می شود.

مثال:

ابتدا یک فرم وب ایجکس (AJAX web form) به application (برنامه ی کاربردی) خود اضافه کنید. این فرم به صورت پیش فرض کنترل Script Manger را در خود دارد. سپس یک update panel داخل آن قرار دهید (درج کنید). حال یک کنترل button به همراه یک کنترل label داخل update panel control جای گذاری کنید.

بار دیگر یک کنترل button به همراه کنترل lable اضافه می کنیم اما این بار خارج از panelمربوطه.

< form id="form2" runat="server" >
   < div >
      < asp:ScriptManager ID="ScriptManager2" runat="server" / >
   < /div >
   < asp:UpdatePanel ID="UpdatePanel2" runat="server" >
      < ContentTemplate >
         < asp:Button ID="Button1" runat="server" onclick="btnpartial_Click" Text="Partial PostBack"/ >
         < br / >
         < br / >
         < asp:Label ID="Label1" runat="server" >< /asp:Label >
      < /ContentTemplate >
   < /asp:UpdatePanel >  
   < p > < /p >
   < p >Outside the Update Panel< /p >
   < p >
      < asp:Button ID="Button2" runat="server" onclick="btntotal_Click" Text="Total PostBack" / >
   < /p > 
   < asp:Label ID="Label2" runat="server" >< /asp:Label >
< /form >
                        

هر دو کنترل های button دارای کد یکسان برای event handler می باشند:

                            string time = DateTime.Now.ToLongTimeString();
lblpartial.Text = "Showing time from panel" + time;
lbltotal.Text = "Showing time from outside" + time;
                        

همان طور که مشاهده می کنید زمانی که صفحه اجرا می شود، اگر روی دکمه ی total post back کلیک شود، زمان بر روی هر دو label بروز رسانی می شود. اما اگر دکمه ی partial post back از panel موردنظر کلیک شود، فقط label موجود در کنترل update panel بروز رسانی می شود.

یک صفحه می تواند دربردارنده ی چندین panel باشد که هر یک خود شامل کنترل های دیگر مانند grid بوده و بخش های مختلف داده را نمایش دهد.

هنگامی که یک total post back رخ می دهد، محتوا (content) update panel به صورت پیش فرض بروز رسانی می شود. این حالت (mode) پیش فرض را می توان با اصلاح خاصیت (property) UpdateMode تغییر داد.

خاصیت های کنترل UpdatePanel

جدول زیر برخی از خاصیت های کنترل مذکور را برای شما لیست کرده است:

توابع کنترل UpdatePanel

متدهای کنترل نام برده به شرح زیر می باشند:

عملکرد کنترل UpdatePanel به مقادیر خاصیت های UpdateMode و ChildrenAsTriggers بستگی دارد.

کنترل UpdateProgress

به منظور نمایش یک نمایه تصویری یا یک پیام، که میزان پیشرفت فرایند عملیات بارگذاری و به روز رسانی صفحه را نشان می دهد ، مورد استفاده قرار می گیرد . برای مثال می توان به زمانی اشاره کرد که کاربر در حال ثبت ورود (log in) می باشد یا زمانی که سرور در حال اجرای برخی عملیات مربوط به پایگاه داده بود و کاربر منتظر دریافت پاسخ از سرویس دهنده (server) می باشد، اشاره کرد.

نحوه ی نگارش کنترل UpdateProgress به صورت زیر می باشد:

                            
< asp:UpdateProgress ID="UpdateProgress2" runat="server" DynamicLayout="true" AssociatedUpdatePanelID="UpdatePanel1"  >
   < ProgressTemplate >
      Loading...
   < /ProgressTemplate >  
< /asp:UpdateProgress >
                        

تکه کد فوق یک پیغام ساده را داخل تگ ProgressTemplate نمایش می دهد. البته بجای پیغام می توان یک تصویر یا هر کنترل مربوطه ی دیگری قرار داد. کنترل UpdateProgress به ازای هر postback ناهمگام (asynchronous) که رخ می دهد یک بار نمایش داده می شود، مگر اینکه با استفاده از خاصیت AssociatedUpdatePanelID به یک updatepanel متصل شده باشد (شما می توانید به کمک property یا خاصیت AssociatedUpdatePanelID کنترل UpdateProgress را به یک کنترل UpdatePannel متصل کنید . هنگامی که عمل Postback یا بازسازی (refresh) توسط کنترل UpdatePannel انجام می شود ، کنترل UpdateProgress مربوط به آن نیز نمایش داده می شود .

اگر کنترل UpdateProgress را به هیچ کنترل UpdatePannel خاصی متصل نکنید ، با هر بار رخداد Postback یا به روز رسانی ، آن کنترل در صفحه نمایش داده خواهد شد ).

خاصیت های کنترل UpdateProgress

توابع کنترل UpdateProgress:

کنترل Timer

از این کنترل به منظور راه اندازی عمل postback به صورت خودکار استفاده می شود. کنترل Timer به صورت متناوب ، در فواصل زمانی تعیین شده ، صفحه را Postback می کند . همچنین اگر این کنترل را به همراه یک کنترل UpdatePannel به کار ببرید ، می توانید تنها آن بخشی از صفحه که کنترل UpdatePannel شامل آن می شود را به صورت متناوب ، بروز رسانی کنید. این کار از دو طریق زیر امکان پذیر می باشد:

1.متصل کردن و مقداردهی خاصیت Triggers کنترل UpdatePanel:

< Triggers >

   < asp:AsyncPostBackTrigger ControlID="btnpanel2" EventName="Click" / >

< /Triggers >
                        

2. با قرار دادن یک کنترل timer به صورت مستقیم داخل UpdatePanel که به عنوان trigger کنترل فرزند عمل می کند. توجه داشته باشید که تنها یک کنترل timer می تواند به عنوان trigger برای چندین UpdatePanel عمل کند.

< asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always" >
 
   < ContentTemplate >
      < asp:Timer ID="Timer2" runat="server" Interval="1000" >
         < /asp:Timer >     
      < asp:Label ID="Label1" runat="server" Height="101px" style="width:304px"  >
< /asp:Label >
< /ContentTemplate >
< /asp:UpdatePanel >