کنترل 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 | زمان را بر حسب میلی ثانیه دریافت و تنظیم می کند و پس از آن الگوی پیشرفت نمایش داده می شود. پیش فرض ۵۰۰ است. |
DynamicLayout | نشان می دهد که آیا الگوی پیشرفت به صورت پویا ارائه شده است یا خیر. |
ProgressTemplate | الگویی را نشان می دهد که در طول ارسال ناهمزمان نشان داده می شود و نسبت به DisplayAfter زمان بیشتری می برد. |
⦁ جدول زیر روش های کنترل UpdateProgress را نشان می دهد:
متد ها | توضیحات |
GetScriptDescriptors | لیستی از مؤلفه ها ، رفتارها و کنترل های سمت کاربر را که برای عملکرد کاربر کنترل UpdateProgress لازم است ، برمی گرداند. |
GetScriptReferences |
لیستی از وابستگی های کتابخانه اسکریپت مشتری را برای کنترل UpdateProgress برمی گرداند. |
کنترل تایمر
کنترل تایمر در کنترل سرور AJAX برای شروع خودکار ارسال پیام استفاده می شود. این کار را می توان به دو روش انجام داد:
(۱) تنظیم ویژگی Trigger های کنترل UpdatePanel:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnpanel2" EventName="Click" />
</Triggers>
(۲) قرار دادن یک کنترلر تایمر به طور مستقیم در داخل 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
۱) FilteredTextBoxExtender
با این کار می توانید داده های ورودی را در یک text box، فیلتر کنید.
۲) MaskedEditExtender و MaskedEditValidator
این کنترل، کاربر را محدود می کند تا فقط یک الگوی خاص از نویسه ها را با استفاده از یک ماسک در ورودی ، وارد یک TextBox کند.
۳) ValidatorCalloutExtender
این کنترل به اعتبار سنجی های ASP.NET پیوست شده است تا پیام های خطا را به عنوان یک ToolTip به سبک balloon-style نشان دهد.
۴) NoBot
این امر باعث نمی شود که هرزنامه یا ربات فرم های ورودی را به طور خودکار توسط هر کد یا ابزاری پر کند. برای اطمینان از عدم ایجاد پاسخ هرز توسط هر ابزاری ، از آزمون Turing عمومی به طور کاملا خودکار استفاده می شود.
۵) PasswordStrengthExtender
این کنترل، قدرت متن رمز ورود به سیستم را با پارامترهای مختلف مشخص شده اعتبار سنجی و اندازه گیری می کند.
نتیجه
در متن بالا به طور کامل راجع به آموزش کنترل AJAX در ASP.NET توضیحاتی داده شد. کنترل سرور AJAX از کنترل های سمت سرور asp.net می باشد و به طور گسترده مورد استفاده قرار می گیرد. AJAX server controls یا همان کنترل آژاکس دارای انواع متفاوت با کارایی های سودمند می باشد که ما سعی کردیم مهم ترین های آن را توضیح داده و به عرض شما برسانیم.
امیدواریم مطالب ذکر شده شما را در هنگام برنامه نویسی با Asp.Net AJAX یاری کرده و مورد استفاده بهینه قرار گیرد.