آموزش ASP.Net

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

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

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

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

ajax extensions

کنترل ScriptManager

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

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


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

مثال

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


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

scriptmanager

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

<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 دارای کد یکسان برای 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 بروز رسانی می شود.

update panel

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

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

 

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

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

خواص

شرح

ChildrenAsTriggers

مقداری بازیابی کرده یا تنظیم می کند که نشانگر این است که آیا postback های آمده از کنترل های فرزند (child control) محتوای panel را بروزرسانی می کنند یا خیر. چنانچه مایلید postback های آمده از child control ها باعث بروز رسانی محتویات panel شوند، این خاصیت را روی مقدار true تنظیم کنید.

ContentTemplate

این خاصیت قالبی (template) که محتویات کنترل UpdatePanel را تعریف می کند، بازیابی یا مقداردهی می کند.

ContentTemplateContainer

این property یک شئ control بازیابی می کند که می توان به آن به صورت برنامه نویسی / با برنامه نویسی (programmatically) کنترل فرزند اضافه کرد.

IsInPartialRendering

مقداری را برمی گرداند که تعیین می کند آیا کنترل UpdatePanel در نتیجه ی روی دادن postback ناهمگام (asynchronous postback) بروز رسانی می شود یا خیر.
مشخص می کند آیا panel در نتیجه (به عنوان بخشی از postback ) جزئی (partial postback) آپدیت می شود یا خیر.

RenderMode

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

چنانچه به خاصیت RenderMode مقدار Inline تخصیص داده شود، محتوای کنترل UpdatePanel داخل تگ < span > render می شود. اگر خاصیت RenderMode روی مقدار Block تنظیم شده باشد، داخل المان render می شود.

UpdateMode

مقداری بازیابی یا تنظیم می کند که نشان می دهد چه زمانی محتوای کنترل UpdatePanel بروز رسانی می شود.
این خاصیتmode rendering(حالت ارائه ی ماشینی تصویر) را با مشخص کردن برخی شرایط بازیابی و مقداردهی می کند.

Triggers

آرایه ای از اشیاء trigger تعریف کرده که هر یک مربوطه به یک رخداد است. این رخدادها باعث می شوند panel به صورت خودکار بروز رسانی شود.

مقداری برمی گرداند که نشانگر آرایه یا مجموعه ای از اشیاء از نوع AsyncPostBackTrigger و PostBackTrigger می باشد.

خاصیت Triggers آرایه ای از کل trigger ها که برای کنترل UpdatePanel تعریف شده است برمی گرداند.

 

توابع کنترل UpdatePanel

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

متدها

شرح

CreateContentTemplateContainer

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

CreateControlCollection

آرایه ای از کلیه ی کنترل های موجود در UpdatePanel control را بازیابی می کند.

Initialize

در صورتی کهpartial-page rendering )ارائه ی ماشینی تصویر به صورت جزئی) فعال شده باشد، آرایه ای از trigger های کنترل UpdatePanel را مقداردهی اولیه می کند.

Update

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

 
 

 

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

UpdateMode

ChildrenAsTriggers

نتیجه

Always

 

False

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

Always

 

True

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

Conditional

False

چنانچه کل صفحه بازسازی / بروز رسانی (refresh) شود یا یک triggering control (کنترلی که به عنوان trigger تعریف شده باشد) بیرون از آن باعث بازسازی صفحه شود، کنترل UpdatePanel نیز refresh می شود.

Conditional

True


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

 
 

 

کنترل UpdateProgress


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

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

<asp:UpdateProgress ID="UpdateProgress1" 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

خواص

شرح

AssociatedUpdatePanelID

شناسه (ID) مرتبط با با کنترل update panel را بازگردانی کرده یا مقداردهی می کند.

Attributes

خصیصه های (attribute) CSS کنترل UpdateProgress را بازیابی کرده یا مقداردهی می کند.

DisplayAfter

مدت زمانی که باید سپری شود تا progress template (قالب پیشروی پروسه) نمایش داده شود را بر حسب میلی ثانیه خوانده و مقداردهی می کند. پیش فرض 500 می باشد.

DynamicLayout

مقداری خوانده و تنظیم می کند که نشان می دهد آیا progress template به صورت پویا (dynamic) render می شود یا خیر.
این خاصیت تعیین می کند آیا فضای لازم برای محتوای progress template تنها زمانی به صفحه تخصیص داده شود که لازم است یا خیر.

ProgressTemplate

قالبی (template) که محتوای کنترل UpdateProgress را تعریف می کند، مقداردهی کرده یا برمی گرداند.

نشانگر قالبی است که حین عمل postback ناهمگام نمایش داده می شود. این فرایند زمان بیشتری نسبت به DisplayAfter طول می کشد.

 

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

متدها

شرح

GetScriptDescriptors

فهرستی از مولفه ها (component)، عملکردها (behavior) و کنترل های سمت سرویس گیرنده (client control) بازیابی می کند که برای راه اندازی قابلیت های کنترل UpdateProgress سمت سرویس گیرنده لازم و ضروری می باشد.

این متد را برای تعریف کامپوننت ها، عملکردها یا کنترل های client از کتابخانه ی ایجکس مایکروسافت (Microsoft AJAX Library) که server control ها به آن نیاز دارند، پیاده سازی کنید.

GetScriptReferences

آرایه ای از اشیاء ScriptReference بازمی گرداند که تعریف کننده ی منابع اسکریپت (script resources) بوده و کنترل مورد نظر به آن نیاز دارد.

 

کنترل 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="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>
در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش ASP.Net

Learn ASP.Net

سرفصل ها

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...