کنترل AJAX در ASP.NET

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

با این حال کنترل سرور AJAX مانند سایر کنترل های سمت سرور net.asp ، مي تواند دارای روش ها و کنترل کننده های رویداد ( handler event ) باشد که البته مرتبط به هم هستند و در سمت سرور پردازش مي شوند.

در واقع آژاکس توسط مایکروسافت برای ایجاد برنامه های وب پویا ، مشتری محور ، کاربرپسند و تعاملي توسعه داده شده است. AJAX NET.ASP هم دارای کتابخانه AJAX و هم کنترل های AJAX برای توسعه UI اپليکيشن های وب مي باشد.

 

بسته جامع آموزش طراحی سایت و برنامه نویسی با تکنولوژی ASP.net

 

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

آموزش کنترل AJAX در ASP.NET در کنترل های سمت سرور (net.asp )

(AJAX server controls)

جعبه ابزار کنترل آژاکس در IDE Studio Visual شامل گروهي از کنترل ها به نام AJAX Extensions مي باشد.

 

اکنون مي خواهيم به شرح کنترل های موجود در عکس بپردازیم.

کنترل ScriptManager

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

این ابزار کنترل، کتابخانه AJAX را به مرورگر ارائه مي دهد و از ( rendering page-partial ) یا همان ارائه جزئي صفحات پشتيباني مي کند. همچنين بارگذاری های جزئي صفحه را مدیریت مي کند و دسترسي به متد سرویس وب را فراهم مي کند. بدون مدیر اسکریپت نمي توانيم از کنترل AJAX در صفحه وب استفاده کنيم. کنترلScriptManager دستورالعمل یا سينتکس زیر را دارا مي باشد:

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

اگر یک سایت با قابليت کنترل آژاکس ایجاد کنيد و یا Form Web AJAX را از کادر Item Add اضافه کنيد، فرم وب به طور خودکار حاوی کنترل ScriptManager مي شود. کنترل ScriptManager از اسکریپت سمت کاربر ( side-client ) در برابر همه کنترل های سمت سرور net.asp مراقبت مي کند.

ScriptManagerProxy

یک صفحه مي تواند فقط یک کنترل ScriptManager داشته باشد. اگر برنامه شما دارای سناریوی صفحه Content-Master است و صفحه اصلي دارای کنترل ScriptManager است ، پس مي توانيد از کنترل ScriptManagerProxy برای افزودن اسکریپت های مختلف به صفحات محتوا استفاده کنيد. گاهي اوقات ، ممکن است مواردی پيش بياید که نيازی به استفاده از کنترل آژاکس در هر صفحه وب با استفاده از کنترل ScriptManagerProxy نباشد ، بنابراین مي توانيد ویژگي های کنترل آژاکس را به صفحات خاص وب اضافه کنيد.

کنترل UpdatePanel

کنترل UpdatePanel بخشي از یک صفحه وب را مشخص مي کند که مي تواند براساس شرایطي، به روزرساني شود. به روز رساني قسمت خاصي از یک صفحه وب، با عنوان update page-partial شناخته مي شود. همچنين مي توانيد یک یا چند کنترل UpdatePanel را در صفحه وب اضافه کنيد. کنترل UpdatePanel از کتابخانه آژاکس برای پشتيباني از rendering page-partial استفاده مي کند. کنترل UpdatePanel یک ابزار کنترل دربرگيرنده ( control container ) است و از کالس کنترل گرفته مي شود.

این ابزار به عنوان ظرفي برای کنترل های فرزند ( control child ) عمل مي کند و رابط کاربری مخصوصي برای خود ندارد. هنگامي که یکي از کنترل های درون آن باعث ارسال پست مي شود ، UpdatePanel مداخله کرده و باعث مي شود ارسال پست به صورت ناهمگام و فقط برای قسمت مورد نظر به روز رساني شود. به عنوان مثال ، اگر یک دکمه کنترل در داخل کنترل UpdatePanel باشد و روی آن کليک شود ، فقط کنترل های موجود در کنترل UpdatePanel تحت تأثير قرار مي گيرند و کنترل های قسمت های دیگر صفحه به روز رساني نمي شوند. به این فرایند postback جزئي یا ناهمگام گفته مي شود.

تمرین: یک فرم وب کنترل آژاکس در برنامه خود اضافه کنيد. این فرم به طور پيش فرض حاوی کنترل ScriptManager مي باشد. یک کنترل UpdatePanel در آن قرار دهيد. حال یک دکمه کنترل به همراه یک برچسب ( lable ) کنترل نيز در آن درج کنيد. مجموعه دیگری از دکمه ها و برچسب ها را نيز خارج از پنل قرار دهيد. نمای طراحي به شرح زیر است:





فایل منبع و سينتکس آن نيز به شرح زیر است:


<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>




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


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


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

گفته های بالا را در تصویر زیر مشاهده کنید.


کنترل AJAX در ASP.NET


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

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


⦁ جدول زیر ساير ویژگی های کنترل UpdatePanel را نشان می دهد:






مشخصات
توضيحات




ChildrenAsTriggers
 این ویژگی نشان می دهد که آیا postback هاي به وجود آمده از کنترل های فرزند است که باعث به روز شدن پنل به روزرسانی می شود يا خير.




ContentTemplate
این خاصيت، الگوی محتوا است و آنچه را که در صفحه به روز رسانی هنگام ارائه نشان داده می شود ، تعریف می کند.




ContentTemplateContainer
این خاصيت یک شئ control بازیابی می کند که می توان به آن با برنامه نویسی، کنترل فرزند اضافه کرد.




IsInPartialRendering
 نشان می دهد که آیا پنل به عنوان بخشي از postback ناهمگام يا جزئي به روز رساني می شود یا خیر.




RenderMode
مقداری بازیابی می کند که نشان می دهد محتوای کنترل UpdatePanel  در یک تگ  < div > یا < span > HTML محصور شده است یا خیر. همچنين حالت های رندر را که block و inline است را نشان می دهد.




UpdateMode
با تعیین برخی شرایط حالت رندر را دریافت یا تنظیم می کند و نشان می دهد چه زمانی محتوای کنترل UpdatePanel بروز رسانی می شود.




Triggers
مجموعه ای را مشخص می کند که هر کدام مربوط به یک رویداد هستند که باعث می شود صفحه به طور خودکار به روز رسانی شود.






 


⦁ روش ها یا متد های کنترل UpdatePanel






متد ها
توضیحات




CreateContentTemplateContainer
یک شی کنترل ایجاد می کند که به عنوان ظرفی برای کنترل های فرزند عمل می کند که محتوای کنترل UpdatePanel را تعریف می کند.




CreateControlCollection
مجموعه تمام کنترل هایی را که در کنترل UpdatePanel وجود دارد برمی گرداند.




Initialize
اگر partial-page rendering فعال باشد ، مقداردهی اولیه کنترل   UpdatePanel را آغاز می کند.




Update
باعث بروزرسانی محتوای کنترل UpdatePanel می شود.






 


⦁ رفتار پنل بروزرسانی به مقادیر ویژگی UpdateMode و ویژگی ChildrenAsTriggers بستگی دارد.






UpdateMode
ChildrenAsTriggers
تأثیرات




Always
False
پارامتر های غیر مجاز




Always
True
چنانچه کل صفحه به روز رسانی شود یا یک کنترل فرزند به هنگام postback باعث به روز رسانی صفحه شود،   UpdatePanel نیز به روز رسانی می شود.




Conditional
False
چنانچه کل صفحه به روز رسانی شود یا یک کنترلی که به عنوان trigger  تعریف شده باشد بیرون از آن باعث به روز رسانی صفحه شود، کنترل UpdatePanel نیز به روز رسانی می شود.




Conditional
True
اگر کل صفحه بروز رسانی شود یا کنترل فرزند باعث شود یک postback رخ دهد و یا کنترلی که به عنوان trigger تعریف شده باشد بیرون از صفحه منجر به به روز رسانی صفحه شود، UpdatePanel  نیز بروز رسانی می شود.








کنترل UpdateProgress


برای نشان دادن پیشرفت partial-page updates برای کل صفحه ، می توانید از یک کنترل UpdateProgress استفاده کنید. همچنین ، می توانید برای هر کنترل UpdatePanel یک کنترل UpdateProgress قرار دهید. برای جذابیت بیشتر می توانید طرح و محتوای پیش فرض کنترل UpdateProgress را تنظیم کنید.

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


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


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

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


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


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






خصوصیات
توضیحات




AssociatedUpdatePanelID
شناسه پنل بروزرسانی را که این کنترل با آن مرتبط است دریافت می کند.




Attributes
ویژگی های CSS کنترل UpdateProgress را دریافت یا تنظیم می کند.




DisplayAfter
زمان را بر حسب میلی ثانیه دریافت و تنظیم می کند و پس از آن الگوی پیشرفت نمایش داده می شود. پیش فرض 500 است.




DynamicLayout
نشان می دهد که آیا الگوی پیشرفت به صورت پویا ارائه شده است یا خیر.




ProgressTemplate
الگویی را نشان می دهد که در طول ارسال ناهمزمان نشان داده می شود و نسبت به DisplayAfter زمان بیشتری می برد.






 


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






متد ها
توضیحات




GetScriptDescriptors
لیستی از مؤلفه ها ، رفتارها و کنترل های سمت کاربر را که برای عملکرد کاربر کنترل UpdateProgress لازم است ، برمی گرداند.




GetScriptReferences


لیستی از وابستگی های کتابخانه اسکریپت مشتری را برای کنترل UpdateProgress  برمی گرداند.








کنترل تایمر


کنترل تایمر در کنترل سرور AJAX برای شروع خودکار ارسال پیام استفاده می شود. این کار را می توان به دو روش انجام داد:

(1) تنظیم ویژگی Trigger های کنترل UpdatePanel:


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


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


<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>


کنترل های اعتبار سنجی اساسی ASP.NET AJAX


1) FilteredTextBoxExtender


با این کار می توانید داده های ورودی را در یک text box، فیلتر کنید.


2) MaskedEditExtender و MaskedEditValidator


این کنترل، کاربر را محدود می کند تا فقط یک الگوی خاص از نویسه ها را با استفاده از یک ماسک در ورودی ، وارد یک TextBox کند.


3) ValidatorCalloutExtender


این کنترل به اعتبار سنجی های ASP.NET پیوست شده است تا پیام های خطا را به عنوان یک ToolTip به سبک balloon-style نشان دهد.


4) NoBot


این امر باعث نمی شود که هرزنامه یا ربات فرم های ورودی را به طور خودکار توسط هر کد یا ابزاری پر کند. برای اطمینان از عدم ایجاد پاسخ هرز توسط هر ابزاری ، از آزمون Turing عمومی به طور کاملا خودکار استفاده می شود.


5) PasswordStrengthExtender


این کنترل، قدرت متن رمز ورود به سیستم را با پارامترهای مختلف مشخص شده اعتبار سنجی و اندازه گیری می کند.


نتیجه


در متن بالا به طور کامل راجع به آموزش کنترل AJAX در ASP.NET توضیحاتی داده شد. کنترل سرور AJAX از کنترل های سمت سرور asp.net می باشد و به طور گسترده مورد استفاده قرار می گیرد. AJAX server controls یا همان کنترل آژاکس دارای انواع متفاوت با کارایی های سودمند می باشد که ما سعی کردیم مهم ترین های آن را توضیح داده و به عرض شما برسانیم.

امیدواریم مطالب ذکر شده شما را در هنگام برنامه نویسی با Asp.Net AJAX یاری کرده و مورد استفاده بهینه قرار گیرد.