کنترل AJAX در ASP.NET

کنترل 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 را به روز می کند.
گفته های بالا را در تصویر زیر مشاهده کنید.

یک صفحه می تواند شامل چندین پنل به روزرسانی باشد که هر پنل شامل کنترل های دیگر مانند 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 یاری کرده و مورد استفاده بهینه قرار گیرد.