[h=2]ساخت یک سایت ASP.Net با قابلیت ایجکس [/h] ساخت یک سایت ASP.Net با قابلیت ایجکس : در این راهکار یک سایت ساده ASP.Net را خواهیم ساخت ، که شامل صفحه ای است که برخی از قابلیت های مایکروسافت Ajax را نمایش خواهد داد . ابن برنامه اطلاعات دانشجویان را از یک پایگاه داده فرضی دریافت کرده و بر روی صفحه نمایش می دهد . برنامه از یک کنترل UpdatePanel ، برای آپدیت و به روز رسانی بخشی از صفحه که تغییر می کند استفاده کرده و مانع رفرش و Postback شدن کامل صفحه در هنگام دریافت یا ارسال اطلاعات می شود . همچنین این برنامه از یک کنترل UpdateProgress برای نمایش میزان پیشرفت عملیات انتقال اطلاعات ، استفاده می کند . 1 ) اضافه کردن یک کنترل UpdatePanel به صفحه ASP.Net : پس از اینکه یک سایت ASP.Net را ساختید ( برای دریافت اطلاعات بیشتر به راهکار ساخت یک سایت ساده در ASP.Net بروید ) ، صفحه ای را به آن اضافه نمایید که قرار است کنترل UpdatePanel را بر روی خود نگه دارد . قبل از اینکه یک کنترل UpdatePanel را به صفحه اضافه نمایید ، بایستی یک کنترل ScriptManger را نیز بر روی صفحه قرار دهید . کنترل UpdatePanel برای انجام امور آپدیت و دریافت و ارسال اطلاعات از قابلیت های کنترل ScriptManger استفاده می کند . نحوه ساخت یک صفحه جدید ASP.Net : برای شروع پروژه باید یک صفحه جدید ASP.Net را به سایت خود اصافه نماییم . برای این منظور مراحل زیر را انجام دهید : [*=right]از منوی Solution Explorer ، بر روی نام سایت کلیک سمت راست کرده و گزینه Add New Item را انتخاب نمایید . [*=right]از منوی باز شده ، نوع فایل را Web Form انتخاب کرده و سپس نام آن را به Students.aspx تغییر دهید . همچنین تیک گزینه Place code in separate file را بردارید ( تا فایل کد جداگانه ای برای صفحه ایجاد نشود ). [*=right]با زدن دکمه Add ، صفحه جدید را ایجاد کرده و به حالت Design بروید . [*=right]از منوی AJAX Extensions یک کنترل ScriptManger و یک کنترل UpdatePanel را بر روی صفحه قرار دهید . 2 ) اضافه کردن محتویات به یک کنترل UpdatePanel : کنترل UpdatePanel فقط بخشی از صفحه که قرار است ، تغییر کند را به روز رسانی کرده و کاری به بقیه صفحه ندارد . در این بخش از راهکار ، کنترل داده ای را به صفحه اضافه خواهیم کرد ، که قرار است اطلاعات را از پایگاه داده Students دریافت کرده و بر روی صفحه نمایش دهد . برای اضافه کردن محتویات جهت بروز رسانی بر روی صفحه به کنترل UpdatePanel ، مراحل زیر را انجام دهید : [*=right]از یخش Data منوی Toolbox برنامه ، یک کنترل GridView را انتخاب کرده و در بخش قابل ویرایش کنترل UpdatePanel قرار دهید . [*=right]از منوی وظایف Tasks کنترل GridView که به صورت یک فلش بر روی آن قرار دارد ، کادر کشویی Choose Data Source را کیلک کرده و سپس گزینه <New data source> را انتخاب نمایید . پنجره Data Source Configuration باز می شود . [*=right]در قسمت Where will the application get data from ، گزینه Database را انتخاب کرده و سپس دکمه Ok را بزنید . [*=right]در بخش Configure Data Source ، به پایگاه داده Students متصل شده و سپس گزینه Next را بزنید . [*=right]از مرحله Configure the Select Statement ، گزینه Specify a custom SQL statement or stored procedure را انتخاب کرده و مجددا Next را بزنید . [*=right]در بخش Select قسمت Define Custom Statement or Stored Procedures ، دستور Select زیر را وارد نمایید : [TABLE="class: ex"] [TR] [TD="class: prname"] Select دستور [/TD] [TD="class: prdes"] SELECT FirstName, LastName From Students [/TD] [/TR] [/TABLE] [*=right]سپس کلید Next و بعد از آن Ok را بزنید . [*=right]همچنین در بخش GridView Tasks ، گزینه Enable Paging را علامت بزنید تا این کنترل اطلاعات خود را صفحه بندی نماید . [*=right]تغییرات خود را ذخیره نموده و سپس کنترل های Ctrl + F5 را برای اجرا صفحه فشار دهید . همانطور که در خروجی صفحه مشاهده می کنید ، در هنگام تغییر شماره صفحه در کنترل GridView و به روز رسانی اطلاعات نمایش داده شده آن ، صفحه ASP.Net رفرش یا Postback نشده و فقط بخش جدول کنترل GridView به روز رسانی می شود . در صورتی که در حالت استفاده نکردن از کنترل UpdatePanel و تکنولوژی ایجکس ، با هر بار تغییر اطلاعات کنترل GridView ، صفحه مجبور به Postback شدن و بار گذاری مجدد می شود . اضافه کردن یک کنترل UpdateProgress به صفحه : کنترل UpdateProgress ، یک پیام یا نمایه وضعیت را زمانی که اطلاعات و محتویات در حال لود شدن برای کنترل GridView است ، نمایش می دهد . برای مثال نمونه آن را که در در اکثر سایت ها دیده اید ، ساعت یا دایره رنگی است که تا زمان آماده شدن اطلاعات در حال چرخش است . نحوه اضافه کردن یک کنترل UpdateProgress به صفحه : [*=right]از قسمت Ajax Extensions نوار ابزار Toolbox برنامه ، یک کنترل UpdateProgress را انتخاب کرده و در زیر کنترل UpdatePanel قرار دهید . [*=right]کنترل UpdateProgress را انتخاب کرده و از قسمت Properties آن ، مقدار خاصیت AssociatedUpdatePanelID آن را به UpdatePanel1 تغییر دهید . این کار کنترل UpdateProgress را به کنترل UpdatePanel که از قبل بر روی صفحه قرار داده بودید ، متصل می کند . [*=right]در قسمت قایل ویرایش کنترل UpdateProgress ، بنویسید " در حال دریافت اطلاعات ... " . [*=right]تغییرات ایجاد کرده را ذخیره کرده و برای اجرای صفحه Ctrl + F5 را بزنید . اگر تاخیر یا مدت زمانی برای دریافت اطلاعات توسط کنترل داده GridView و به روز رسانی آنها بر روی صفحه وجود داشته باشد ، در این فرصت کنترل UpdateProgress ، متن خود را به کاربر نمایش می دهد ، تا عملیات تمام شود . اضافه کردن تاخیر در اجرای کدها در صفحه ایجکس ASP.Net : اگر در مثال ارائه شده در صفحه ، کنترل داده عملیات دریافت و به روز رسانی اطلاعات را با سرعت بسیار زیادی انجام دهد ، ممکن است کاربر هیچ گاه پیام یا نمایه کنترل UpdateProgress را مشاهده نکند . عدم مشاهده این پیام ، ممکن است کاربر را به ابن اشتباه بیاندازد که اطلاعات مورد نظر در صفحه آپدیت و به روز رسانی نشده اند . کنترل UpdateProgress ، از یک خاصیت به نام DisplayAfter پشتیبانی می کند ، که این قابلیت را به طراح می دهد تا تاخیری را برای اجرا و نمایش پیام کنترل تعیین نمایید . تعیین این خاصیت مانع از فلش زدن و نمایش بسیار سریع پیام کنترل در زمانی که عملیات دریافت و به روز رسانی اطلاعات از سرور بسیار سریع است ، می شود . به طور پیش فرض این مقدار برای کنترل UpdateProgress ، نیم ثانیه ( 500 میلی ثانیه ) بوده و به این معناست که کنترل UpdateProgress ، چنانچه عملیات ارسال و به روز رسانی اطلاعات کمتر از نیم ثانیه طول بکشد ، نمایش داده نخواهد شد . در محیط برنامه خودتان می توانید یک زمان تاخیر را به کنترل UpdateProgress اضافه نمایید ، تا مطمئن شوید که این کنترل ، همانطور که انتظار دارید ، عمل کرده و حتما پیام خود را نمایش دهد . این کار یک کار کاملا اختیاری است و استفاده از آن بر طبق سلیقه طراح خواهد بود . نحوه اضافه کردن تاخیر به برنامه خودتان : [*=right]درون کنترل UpdateProgress ، کنترل GridView را انتخاب نمایید . [*=right]در قسمت Properties آن ، دکمه Event را کلیک نمایید . [*=right]رویداد PageIndexChanged کنترل را دابل کلیک نمایید ، تا صفحه کد پشت صحنه و رویداد مربوطه برای کد نویسی باز شود . [*=right]کد زیر را به event handler رویداد PageIndexChanged کنترل GridView ، اضافه نمایید تا تاخیری 3 ثانیه را به پروسه پردازشی کد ، اضافه نماید : [TABLE="class: ex"] [TR] [TD="class: prname"] کد [/TD] [TD="class: prdes, align: left"] // C# کد برای System.Threading.Thread.Sleep(3000); // VB کد برای System.Threading.Thread.Sleep(3000) [/TD] [/TR] [/TABLE] [*=right]تغییرات را ذخیره کرده و مجددا صفحه را اجرا نمایید . [*=right]با کار با کنترل GridView و مشاهده تفاوت با حالت قبل ، کاربرد تاخیر را در پروسه صفحه مشاهده نمایید . منبع: developer1
