تبلیغات متنی و بنر

آموزش Ajax > مایکروسافت Ajax > ساخت یک سایت ASP.Net با قابلیت ایجکس

ساخت یک سایت 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 را به سایت خود اصافه نماییم . برای این منظور مراحل زیر را انجام دهید :
  1. از منوی Solution Explorer ، بر روی نام سایت کلیک سمت راست کرده و گزینه Add New Item را انتخاب نمایید .
  2. از منوی باز شده ، نوع فایل را Web Form انتخاب کرده و سپس نام آن را به Students.aspx تغییر دهید . همچنین تیک گزینه Place code in separate file را بردارید ( تا فایل کد جداگانه ای برای صفحه ایجاد نشود ).
  3. با زدن دکمه Add ، صفحه جدید را ایجاد کرده و به حالت Design بروید .
  4. از منوی AJAX Extensions یک کنترل ScriptManger و یک کنترل UpdatePanel را بر روی صفحه قرار دهید .

2 ) اضافه کردن محتویات به یک کنترل UpdatePanel :

کنترل UpdatePanel فقط بخشی از صفحه که قرار است ، تغییر کند را به روز رسانی کرده و کاری به بقیه صفحه ندارد . در این بخش از راهکار ، کنترل داده ای را به صفحه اضافه خواهیم کرد ، که قرار است اطلاعات را از پایگاه داده Students دریافت کرده و بر روی صفحه نمایش دهد . برای اضافه کردن محتویات جهت بروز رسانی بر روی صفحه به کنترل UpdatePanel ، مراحل زیر را انجام دهید :

  1. از یخش Data منوی Toolbox برنامه ، یک کنترل GridView را انتخاب کرده و در بخش قابل ویرایش کنترل UpdatePanel قرار دهید .
  2. از منوی وظایف Tasks کنترل GridView که به صورت یک فلش بر روی آن قرار دارد ، کادر کشویی Choose Data Source را کیلک کرده و سپس گزینه <New data source> را انتخاب نمایید .
    پنجره Data Source Configuration باز می شود .
  3. در قسمت Where will the application get data from ، گزینه Database را انتخاب کرده و سپس دکمه Ok را بزنید .
  4. در بخش Configure Data Source ، به پایگاه داده Students متصل شده و سپس گزینه Next را بزنید .
  5. از مرحله Configure the Select Statement ، گزینه Specify a custom SQL statement or stored procedure را انتخاب کرده و مجددا Next را بزنید .
  6. در بخش Select قسمت Define Custom Statement or Stored Procedures ، دستور Select زیر را وارد نمایید :
    Select دستور SELECT FirstName, LastName From Students 
  7. سپس کلید Next و بعد از آن Ok را بزنید .
  8. همچنین در بخش GridView Tasks ، گزینه Enable Paging را علامت بزنید تا این کنترل اطلاعات خود را صفحه بندی نماید .
  9. تغییرات خود را ذخیره نموده و سپس کنترل های Ctrl + F5 را برای اجرا صفحه فشار دهید .

همانطور که در خروجی صفحه مشاهده می کنید ، در هنگام تغییر شماره صفحه در کنترل GridView و به روز رسانی اطلاعات نمایش داده شده آن ، صفحه ASP.Net رفرش یا Postback نشده و فقط بخش جدول کنترل GridView به روز رسانی می شود .
در صورتی که در حالت استفاده نکردن از کنترل UpdatePanel و تکنولوژی ایجکس ، با هر بار تغییر اطلاعات کنترل GridView ، صفحه مجبور به Postback شدن و بار گذاری مجدد می شود .

اضافه کردن یک کنترل UpdateProgress به صفحه :

کنترل UpdateProgress ، یک پیام یا نمایه وضعیت را زمانی که اطلاعات و محتویات در حال لود شدن برای کنترل GridView است ، نمایش می دهد .
برای مثال نمونه آن را که در در اکثر سایت ها دیده اید ، ساعت یا دایره رنگی است که تا زمان آماده شدن اطلاعات در حال چرخش است .

نحوه اضافه کردن یک کنترل UpdateProgress به صفحه :

  1. از قسمت Ajax Extensions نوار ابزار Toolbox برنامه ، یک کنترل UpdateProgress را انتخاب کرده و در زیر کنترل UpdatePanel قرار دهید .
  2. کنترل UpdateProgress را انتخاب کرده و از قسمت Properties آن ، مقدار خاصیت AssociatedUpdatePanelID آن را به UpdatePanel1 تغییر دهید .
    این کار کنترل UpdateProgress را به کنترل UpdatePanel که از قبل بر روی صفحه قرار داده بودید ، متصل می کند .
  3. در قسمت قایل ویرایش کنترل UpdateProgress ، بنویسید " در حال دریافت اطلاعات ... " .
  4. تغییرات ایجاد کرده را ذخیره کرده و برای اجرای صفحه Ctrl + F5 را بزنید .

اگر تاخیر یا مدت زمانی برای دریافت اطلاعات توسط کنترل داده GridView و به روز رسانی آنها بر روی صفحه وجود داشته باشد ، در این فرصت کنترل UpdateProgress ، متن خود را به کاربر نمایش می دهد ، تا عملیات تمام شود .

اضافه کردن تاخیر در اجرای کدها در صفحه ایجکس ASP.Net :

اگر در مثال ارائه شده در صفحه ، کنترل داده عملیات دریافت و به روز رسانی اطلاعات را با سرعت بسیار زیادی انجام دهد ، ممکن است کاربر هیچ گاه پیام یا نمایه کنترل UpdateProgress را مشاهده نکند .
عدم مشاهده این پیام ، ممکن است کاربر را به ابن اشتباه بیاندازد که اطلاعات مورد نظر در صفحه آپدیت و به روز رسانی نشده اند .
کنترل UpdateProgress ، از یک خاصیت به نام DisplayAfter پشتیبانی می کند ، که این قابلیت را به طراح می دهد تا تاخیری را برای اجرا و نمایش پیام کنترل تعیین نمایید .
تعیین این خاصیت مانع از فلش زدن و نمایش بسیار سریع پیام کنترل در زمانی که عملیات دریافت و به روز رسانی اطلاعات از سرور بسیار سریع است ، می شود .
به طور پیش فرض این مقدار برای کنترل UpdateProgress ، نیم ثانیه ( 500 میلی ثانیه ) بوده و به این معناست که کنترل UpdateProgress ، چنانچه عملیات ارسال و به روز رسانی اطلاعات کمتر از نیم ثانیه طول بکشد ، نمایش داده نخواهد شد .
در محیط برنامه خودتان می توانید یک زمان تاخیر را به کنترل UpdateProgress اضافه نمایید ، تا مطمئن شوید که این کنترل ، همانطور که انتظار دارید ، عمل کرده و حتما پیام خود را نمایش دهد . این کار یک کار کاملا اختیاری است و استفاده از آن بر طبق سلیقه طراح خواهد بود .

نحوه اضافه کردن تاخیر به برنامه خودتان :

  1. درون کنترل UpdateProgress ، کنترل GridView را انتخاب نمایید .
  2. در قسمت Properties آن ، دکمه Event را کلیک نمایید .
  3. رویداد PageIndexChanged کنترل را دابل کلیک نمایید ، تا صفحه کد پشت صحنه و رویداد مربوطه برای کد نویسی باز شود .
  4. کد زیر را به event handler رویداد PageIndexChanged کنترل GridView ، اضافه نمایید تا تاخیری 3 ثانیه را به پروسه پردازشی کد ، اضافه نماید :
    کد // C# کد برای
    System.Threading.Thread.Sleep(3000);


    // VB کد برای
    System.Threading.Thread.Sleep(3000)
  5. تغییرات را ذخیره کرده و مجددا صفحه را اجرا نمایید .
  6. با کار با کنترل GridView و مشاهده تفاوت با حالت قبل ، کاربرد تاخیر را در پروسه صفحه مشاهده نمایید .

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

نطر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :               
آدرس Email :  

نظر شما :      
سوال امنیتی : پایتخت ایران ؟