نحوه استفاده از کنترل های asp.net ajax

[نقاب]

مقدمه :

در مورد مفاهیم اولیه AJAX یا ای جکس میتونین به این لینک مراجعه کنید . فرض بر اینه که دوستان آشنایی اولیه دارن .
مایکروسافت ازون جایی که ارادت خاصی به مشتریاش داره! اومد کار رو برای برنامه نویسان ASP.NET راحت کرد و مجموعه ای رو تحت عنوان ATLAS ارائه کرد که امکان ایجاد حرکت های نمایشی AJAX ای رو در ASP.NET فراهم میکرد !
این مجموعه توسعه یافت و تحت عنوان MS AJAX یا ASP.NET AJAX نهایی شد .
در این مجموعه کنترل هایی ارائه شده که هر کدوم کاربرد خاصی دارن و مورد استفاده در ASP.NET 2.0 هستن .
برای شروع ابتدا باید ASP.NET AJAX v1.0 رو که حدود 1.4 مگابایته از سایت مایکروسافت دانلود و نصب کنید . پس از نصب ، کنترل های مورد نظر به ToolBox ویژوال استودیو اضافه خواهد شد . در پست های بعدی راجع به کنترل های AJAX Toolkit هم صحبت میکنیم .
در ادامه یک پروژه ایجاد و از امکانات اولیه ASP.NET AJAX در اون پروژه استفاده می کنیم . .

[نقاب]

نحوه استفاده از کنترل های ASP.NET AJAX**قسمت دوم**
یه نکته و اون اینکه پس از نصب اون فایل یه سری dll در مسیر پیش فرض زیر بصورت اتوماتیک کپی میشن :
کد:
C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions
چیزی که مهمه اینه اگه خواستید سایتتون رو روی هاست Upload کنید باید این dll هارو در پوشه bin پروژتون روی هاست کپی کنید .
این مساله یکی از سوالات متداول دوستان بوده که وقتی سایتشون رو آپلود می کردن با یه سری Error های جاوا اسکریپتی مواجه میشدن که این بر میگرده به در نظر نگرفتن همین نکته .(البته در بعضی از هاست ها بدون کپی کردن این dll ها هم ای جکس سایت شما به زیبایی کار خواهد کرد که این نشون دهنده ی این موضوع هست که اون فایل رو سرور نصب شده)
خوب پس از نصب ASP.NET AJAX Extensions v1.0 ویژوال استادیو رو باز کنید . از منوی فایل گزینه New Web Site رو انتخاب کنید ، در پنجره ای که باز میشه یه آیتم جدید به نام ASP.NET AJAX-Enabled Web Site اضافه شده که شما برای استفاده از کنترل های ای جکس در پروژتون باید این گزینه رو انتخاب کنید و بعد هم OK . در Toolbox عنوانی اضافه شده به نام AJAX Extensions که اگه بازش کنین لیست کنترل های ای جکسی رو می بینین ...
کنترل های UpdatePanel و UpdateProgress بیشترین استفاده رو دارن .
توی اکثر وب سایت ها دیدید که مثلا موقع ثبت نام وقتی میخواین username رو وارد می کنین یه باتن هست که availabe بودن اون username رو بررسی میکنه وقتی روش کلیک میکنین یه چیزی مثه Please Waiting سه چهار ثانیه نمایش داده میشه و بدون اینکه صفحه Refresh شه میگه این username قبلا ثبت شده و یکی دیگه وارد کن ! این عملیات توسط همین دو کنترل به سادگی انجام میشه ...
در محیط Design روی فرم یه آبجکتی به نام ScriptManager قرار داره بهش کار نداشته باشین بزارین باشه واسه خودش! برای شروع یه Label با یه Button رو فرم بذارید و در رویداد Page Load بنویسید :
کد:
Label1.Visible=false;
و در Onclick باتن visibilty رو true کنید :
کد:
Label1.Visible=true;
وقتی برنامه رو Run کنید label دیده نمیشه و با کلیک روی باتن و Refresh شدن صفحه label ظاهر میشه ! در واقع باتن جزء کنترل هایی هست که باعث postback صفحه میشه . خوب حالا از Toolbox کنترل UpdatePanel رو انتخاب کنید و روی فرم قرار بدید label و button رو در این UpdatePanel بندازید و برنامه رو اجرا کنید حالا اگه روی button کلیک کنید اعجاب سال 2007 رو خواهید دید ! بدون اینکه صفحه Refresh بشه label ظاهر میشه .

کنترل هایی که با UpdatePanel سازگار نیستن عبارتند از :

• TreeView & Menu
• ASP.NET Web Parts Control
• FileUpload که البته راه حل داره !
• GridView & DetailsView البته زمانی که ویژگی EnableSortingAndPagingCallbacks به true ست شده باشه . در حالت پیش فرض false هست .
• Login,PasswordRecovery,ChangePassword,CreateUserWi zard
• Substitution
• Validation Controls

اگه خواستین کنترل FileUpload رو تو UpdatePanel بذارید ازین تاپیک می تونین استفاده کنید.
بقیه کنترل ها مشکل خاصی ندارن و قابل استفاده هستن .
همونطور که دیدید بدون refresh صفحه کدی که در رویداد Button بود اجرا شد . حالا این کد هر چیزی میتونه باشه مثه یه Query که از دیتابیس گرفته میشه و یه سری رکورد قراره برگردونه ... عملا به دلیل postback نشدن صفحه سایت شما UserFriendly تر میشه و بقول بچه ها به دل کاربر میشینه !
در حالتی که یه label ظاهر یا مخفی میشه این کار خیلی سریع انجام میشه اما ممکنه در button شما یه پرس و جوی دیتابیسی نوشته باشی و در حالتی که سایت Upload شده و با توجه به سرعت زیبای اینترنت در وطن مثلا 5 ثانیه زمان ببره تا کد توی رویداد کلیک باتن اجرا شه ، تو این حالت معمولا یه شکل گرافیکی با یه متن مثه لطفا صبر کنید به کاربر نمایش داده میشه تا کاربر بفهمه که پردازش در حال انجامه !
این کار توسط کنترل UpdatePrgress انجام میشه که در ادامه بهش خواهیم پرداخت . . .

[نقاب]

نحوه استفاده از کنترل های ASP.NET AJAX**قسمت سوم**
و اما UpdateProgress Control .
همونطور که در پست قبل گفتم ممکنه فرآیند پاسخگویی به کاربر مدتی زمان ببره و چون صفحه هم Refresh نمیشه یه جوری باید به کاربر فهموند که درخواستش در حال پردازشه و باید منتظر بمونه در غیر اینصورت کاربر فکر میکنه انجام نشده و ممکنه چندین بار روی Button کلیک کنه که باعث بروز خطا میشه ! برای فهم بهتر با یه مثال عملکرد UpdateProgress رو بررسی میکنیم .
یه پروژه ی جدید از نوع AJAX-Enabled Web Site ایجاد کنید یه UpdatePanel تو فرم بذارید و یه Label و یه Button توی UpdatePanel . در رویداد Page_Load کد زیر رو بنویسید :
کد:
Label1.Text=DateTime.Now();
برنامه رو اجرا کنید Time جاری در Label نمایش داده میشه و اگه روی Button کلیک کنید Time آپدیت میشه بدون Refresh صفحه ! با کلیک روی button رویداد Page_Load فراخوانی میشه و چون button در UpdatePanel هست postback ای نداریم . خوب تا اینجا دقیقا مثه مثال قبلی بود .
اما مطلب جدید اینکه چون ما برنامه مون روی localhost اجرا میشه سرعت بسیار بالاست برای شبیه سازی محیط localhost به محیط سرور اصلی (یعنی زمانی که سایت رو رو هاست Upload میکنیم) از یه خط کد استفاده میکنیم تا کاربرد UpdateProgress رو بتونیم دریابیم . این خط کد اینه :
کد:
System.Threading.Thread.Sleep(3000);
این خط رو در رویداد Page_Load اضافه کنید یعنی Page_Load بشه این :
کد:
System.Threading.Thread.Sleep(3000);
Label1.Text=DateTime.Now();
این خط کد یه delay یا تاخیر در اجرای کد ایجاد میکنه که مقدارش برابر با همون عددی هست که داخل پرانتز بهش پاس شده و این مقدار به میلی ثانیه هست یعنی الان 3 ثانیه تاخیر ایجاد میکنه حالا طبیعتا اگه بجای 3000 نوشته بودیم 5000 ، 5 ثانیه تاخیر داشتیم !
اگه برنامه رو دوباره اجرا کنید و روی button کلیک کنید بعد از 3 ثانیه Time آپدیت میشه ! بعبارت دیگه هروقت روی button کلیک کنی بعد 3 ثانیه time آپدیت میشه .
علت استفاده ازون کد فقط شبیه سازی محیط localhost با server هست وگرنه وقتی سایت رو آپلود کردید اون خط رو باید پاک کنید . چون رو سرور به اندازه کافی تاخیر هست مخصوصا اگه در باتن یه ارتباط با دیتابیس برقرار کرده باشید و مثلا یه select ساده نوشته باشین .
حالا میخوایم کاری کنیم که در طول این مدت یعنی 3 ثانیه بنویسه که Please Wait و یه شکل گرافیکی مثه سایت برنامه نویس (همین که یه گردالی میچرخه! ) رو نشون بده .
یه کنترل UpdateProgress از toolbox روی فرم قرار بدید و یه متنی رو مثه "لطفا منتظر بمانید..." توش تایپ کنید و بعد پروژه رو run کنید وقتی روی باتن کلیک کنید اون متن به مدت 3 ثانیه نمایش داده میشه و بعد time آپدیت میشه . علاوه بر متن یه فایل gif (در ضمیمه هست) هم میتونید قرار بدید . فقط دقت کنید در حالتی که سایت رو آپلود میکنید دیگه نیازی به کد Threading نیست و متن UpdateProgress بصورت اتوماتیک تا زمانی که جواب از سرور بیاد نمایش داده میشه و بعد ازون دیگه نمایش داده نمیشه .

در ادامه به کنترل های Ajax Toolkit خواهیم پرداخت ...

[نقاب]

نحوه استفاده از کنترل های ASP.NET AJAX**قسمت چهارم**
AJAX Control Toolkit
============
خوب در این پست شیوه نصب AJAX Control Toolkit رو بررسی میکنیم .
همون طور که در پست های قبلی گفته شد کنترل های Toolkit کنترل هایی هستن که هر کدوم به منظوری خاص ایجاد شدن و در واقع یه سری کنترل برای سفارشی کردن وب سایت شماست . یه نگاه به این کنترل ها بندازید تا التفات کامل حاصل شود ، در لیست سمت چپ کنترل ها رو انتخاب کنید یه نمونه میبینید که میتونید تستش کنید :
AJAX CONTROL TOOLKIT SAMPLES

برای این که بتونید از این کنترل در وب سایتتون استفاده کنید این مراحل رو باید انجام بدید :
از اینجا فایل AjaxControlToolkit.zip رو دانلود کنید بعد Unzip شدشو تو مسیر زیر کپی کنید :
کد:
C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions
تو اون پوشه ای که کپی کردید تو پوشه AjaxControlExtender یه فایل هست با پسوند VSI. این فایل رو اجرا کنید . بعد ویژوال استادیو رو باز کرد و یه وب سایت جدید NEW کنید در پنجره ی NEW یه گزینه ای به نام AJAX Control Toolkit Website اضافه شده ، اونو انتخاب کنید و پروژه رو ایجاد کنید .
سپس توی Toolbox کلیک راست کنید Add a Tab رو انتخاب کنید . توی Tab بنویسد مثلا AJAX Control Toolkit . حالا در همون قسمت کلیک راست کنید choose item رو انتخاب کنید ، بعد دکمه Browse رو بزنید تو پوشه ای که در درایو C کپی کردین یه dll به نام AjaxControlToolkit هست اونو انتخاب کنید و ....
در اون قسمت این کنترل ها تو Toolbox اضافه میشن که مثه سایر کنترل ها با یه drag-drop رو فرم قرار میگیرن و قابل استفاده هستن .
دیگه نحوه استفاده از این کنترل ها با توجه به وسعت بسیار اینترنت و sample های موجود در این زمینه کار خیلی سختی نیست !