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

کنترل AJAX

AJAX مخفف عبارت Asynchronous JavaScript and XML می باشد. AJAX یک تکنولوژی cross platform می باشد که زمان پاسخ دهی را سرعت می بخشد. کنترل های سرور AJAX ، اسکریپتی به صفحه اضافه می کنند که توسط مرورگر اجرا و پردازش می شود.

با این وجود ، همانند سایر کنترل های سرور ASP.NET ، کنترل های سرور AJAX نیز می تواند متدها و هندلرهای رویداد مرتبط با آنها را دارا باشد که در سمت سرور پردازش می شوند.

جعبه ابزار control در Visual Studio IDE حاوی گروهی از کنترل ها می باشد که  'AJAX Extensions' نامیده می شوند.

کنترل ScriptManager

کنترل ScriptManager از مهم ترین کنترل ها می باشد و باید در صفحه موجود باشد تا با سایر کنترل ها کار نماید.

قاعده نوشتاری این کنترل به صورت زیر می باشد:

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

اگر ما بخواهیم که یک سایت 'Ajax Enabled site' را بسازیم ، یا یک فرم 'AJAX Web Form' را از جعبه محاوره ای 'Add Item' اضافه نماییم ، فرم وب به طور خودکار حاوی کنترل ScriptManager خواهد بود. کنترل ScriptManager از اسکریپت های سمت کلاینت برای تمام کنترل های سمت سرور حمایت می کند.

کنترل UpdatePanel

کنترل UpdatePanel ، یک کنترل container می باشد و از کلاس Control مشتق شده است. این کنترل به عنوان یک ظرف (container) برای کنترل های فرزند داخلش عمل می کند و رابط کاربری خاصی برای خود ندارد. هنگامی که یک کنترل درون آن ، پستی را به صورت post back ارسال می کند ، کنترل UpdatePanel مداخله می کند تا ارسال پست را به صورت نامتقارن (asynchronously) شروع کرده و فقط آن بخش از صفحه را به روز نماید.

برای مثال ، وقتی که یک کنترل button در داخل پنل به روز رسانی شده و کلیک شود ، فقط کنترل های درون پنل آپدیت شده ، تحت تأثیر قرار خواهند گرفت و کنترل های سایر بخش های صفحه تحت تأثیر قرار نخواهند گرفت. به این عمل partial post back یا asynchronous post back گفته می شود.

مثال

یک فرم وب AJAX به برنامه کاربردی خود اضافه می کنیم. این فرم ه طور پیش فرض حاوی کنترل script manager می باشد. یک پنل update وارد می کنیم. یک کنترل button همراه با کنترل label درون کنترل پنل update جای می دهیم. مجموعه ای از کلید و برچسب را در خارج پنل قرار می دهیم.

Design view این مال باید مطابق تصویر زیر باشد:

کد فایل source به صورت زیر می باشد:

<form id="form1" runat="server">
   <div>
      <asp:ScriptManager ID="ScriptManager1" runat="server" />
   </div>
   
   <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
         <asp:Button ID="btnpartial" runat="server" onclick="btnpartial_Click" Text="Partial PostBack"/>
         <br />
         <br />
         <asp:Label ID="lblpartial" runat="server"></asp:Label>
      </ContentTemplate>
   </asp:UpdatePanel>
   
   <p> </p>
   <p>Outside the Update Panel</p>
   <p>
      <asp:Button ID="btntotal" runat="server" onclick="btntotal_Click" Text="Total PostBack" />
   </p>
   
   <asp:Label ID="lbltotal" runat="server"></asp:Label>
</form>

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

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

در حین اجرای صفحه مشاهده می کنید که ، اگر کلید Total PostBadck کلیک شود ، تاریخ در هر دو برچسب به روز رسانی می شود ، اما اگر کلید Partial PostBack کلیک شود ، فقط برچسب درون پنل update به روز رسانی می گردد.

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

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

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

متدهای کنترل UpdatePanel

جدول زیر متدهای کنترل update پنل را نشان می دهد:

رفتار پنل update بستگی به مقادیر خصیصه UpdateMode و خصیصه ChildrenAsTriggers   دارد.

کنترل UpdateProgress

کنترل UpdateProgress نوعی از feekback (بازخورد) را در مرورگر فراهم می کند ، در حالی که یک یا چند کنترل پنل update به روز می شوند. برای مثال ، درحالی که کاربری وارد سیستم می شود یا منتظر پاسخ سرور می باشد ، در این حین برخی از وظایف مربوط به پایگاه داده انجام می شوند.

این کنترل یک اعلام وصول بصری مانند "صفحه در حال بارگذاری است..." را ارائه می دهد که نشان دهنده پیشرفت کار می باشد.

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

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true" AssociatedUpdatePanelID="UpdatePanel1" >

   <ProgressTemplate>
      Loading...
   </ProgressTemplate>
   
</asp:UpdateProgress>

قطعه کد فوق یک پیام ساده را درون تگ ProgrewwTemplate نشان می دهد. با این حال ، یاختار می تواند به صورت یک تصویر یا سایر کنترل های مرتبط باشد. کنترل UpdateProgress برای  هر postback ناهمزمان نمایش داده می شود ، مگر این که کنترل UpdateProgress ، به یک پنل update واحد ، با استفاده از خصیصه AssociatedUpdatePanelID اختصاص داده شود.

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

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

متدهای کنترل UpdateProgress

کنترل Timer

کنترل Timer برای مقداردهی کردن post back به صورت خودکار مورد استفاده قرار می گیرد. این کار می تواند به دو روش انجام شود:

1. تنظیم نمودن خصیصه Triggers مربوط به کنترل UpdatePanel :

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

2. قرار دادن یک کنترل Timer به طور مستقیم در داخل UpdatePanel ، برای عمل کردن به عنوان یک trigger کنترل فرزند. یک تایمر واحد می تواند به عنوان trigger برای چندین UpdatePanel باشد.

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

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