در طول این قسمت پس از مروری کوتاه بر اصول و زیر ساخت های AJAX به آموزش استفاده عملی از AJAX در ASP.NET به ذکر یک مثال ساده میپردازیم .تکنیک های پیشرفته استفاده از AJAX را به قسمت سوم موکول می کنیم.
همانطور که در قسمت اول خواندیم ،دیدیم AJAX ترکیبی از چند تکنولوژی موجود می باشد که هدف آن بهینه سازی تبادل داده ها بین سرورو کاربرهم در جهت کاهش حجم داده وهم نحوه نمایش مطلوب آن ها می باشد.اگر دوباره به نمودار قسمت اول دقت کنید خواهید دید که با آمدن مدل AJAX تبادل داده بین سرور و کلاینت تفاوت های اساسی کرده:صفحه قابل مشاهده کاربر برای گرفتن اطلاعات جدید در خواست خود را مستقیم به سرور نمیدهد بلکه به ماجولی در سیستم خودش به نام AJAX Engine میدهد.AJAX Engine وظیفه دارد در خواست ها را به سرور بفرستد و هنگام در یافت پاسخ ،آنهارا به صفحه در خواست کننده اعلام کند.حال وقتی صفحه پاسخ خود را دریافت کرد با کد javascript میتوان اطلاعات جدید را در قسمتی از صفحه ی خود تزریق کند.
تئوری محض کافیه...با جند مثال مطلب خیلی بهتر بیان میشه.
مثال:فرض کنید صفحه ای داریم که دارای یک dropdown است که شامل نام شهر ها است.علا وه بر این dropdown صفحه اجزای فراوان دیگر دارد(مثلا لوگو ،تصاویر و...).شما میخواهید وقتی کاربر شهر مورد نظرش را انخاب کرد ،دمای اون رودر همان لحظه پیدا کنید و زیر dropdown نمایش دهید.
خوب برای حل این مثال بدون استفاده از AJAX مجبوریم یک deropdownlist که runat=server است بگذاریم و در رخداد OnSelectedIndexChanged آن- در سمت سرور- به دنبال دمای شهر انتخاب شده بگردیم سپس دما را در یک label نمایش دهیم.این روش باعث postback شدن کل صفحه ما فقط برای نمایش یک عدد دمای شهر میشود.برای جلوگیری از این اتلاف وقت و هزینه (به خاطر postback شدن کل صفحه) از ajax استفاده میکنیم.
برای استفاده از AJAX ابتدا کتابخانه رایگان آن را از اینجا دانلود کنید.پس از گرفتن ajax.dll آن را در قسمت solution explorer-refrences با کلیک راست کردن بر روی refrences و انتخاب add refrence... وپیدا کردن فایل ajax.dll اضافه کنید.
قبل از هر کاری در فایل web.config بخش زیر را اضافه کنید:
<configuration>
<system.web>
<httpHandlers>
<add verb="POST,GET" path="ajax/*.ashx"
type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>
...
<system.web>
</configuration>
فرض کنید مثال ما در صفحه ی index رخ میدهد .ابتدا باید دررخداد Page_Load صفحه را به عنوان استفده کننده ajax معرفی کنید.که به شکل زیر این کار را میکنیم.دقت کنید که این خط برای هر صفحه aspx که میخواهد از ajax استفاده کند باید در page_load اش نوشته شود:
Ajax.Utility.RegisterTypeForAjax(typeof(yourpagecl ass));
در مثال ما کدی به شکل زیر خواهد شد:
namespace AjaxTest
{
....
public class Index : System.Web.UI.Page
{
....
private void Page_Load(object sender, System.EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(Index));
.....
}
...
حالا یک متد در سمت سرور مینویسیم تا با گرفتن نام شهر دمای آن را برگرداند.(نحوه ی پیداکردن دما برای ما اصلا اهمیت ندارد، فرض کنید این دما را از یک وب سرویس میگیرد و یا از پایگاه خود پیدا میکند در هر صورت برای ما تبادل اطلاعات بین سرور و کاربر مهم است نه نحوه یافتن آن ها،لذا در مثال ها فقط نحوه استفاده از ajax برای تبادل در خواست و نتایج بین سرور و کاربر بررسی میشود)
public int FindCityTemperature (string pCity)
{
int result=0;
...//find result
return result;
}
خوب یک متد سمت سرور نوشتیم،حالا تصمیم داریم این متد را به عنوان متدی که ajax بتواند سرویس دهد مشخص کنیم.برای مشخص کردن متد های سمت سرور به عنوان متد استفاده کننده از ajax عبارت زیر را قبل از آن متد قرار میدهیم:
[Ajax.AjaxMethod()]
پس متد FindCityTemperature ما میشود:
[Ajax.AjaxMethod()]
public int FindCityTemperature (string pCity)
{
int result=0;
...//find result
return result;
}
خسته نباشید.کد نویسی سمت سرور تمام شد.حالا باید script نویسی سمت کاربر روشروع کنیم و طبیعتا javascript رو انتخاب میکنیم(البته هیج فرقی نمیکنه چه زبانی رو انتخاب کنید، به هر حال من که حسابی از script نویسی سمت کاربر بدم میاد).دقت کنید تمام کد هایی که تا کنون نوشتیم در فایل cs مثلا index.aspx.cs بود.حالا صفحه aspx را باز کنید تا کد های سمت کلاینت رو بنویسیم.کد زیریک dropdownlist ویک div برای نمایش نتایج است .در قسمتی از body صفحه html خود قرارش دهید.دقت کنید id داده شده به select و div برای پیدا کردن آن در کد ها استفاده میشود:
<select id="MyDDL" onchange ="GetAndDispayTemp()" size="1" >
<option>تهران</option>
<option>مشهد</option>
<option>اصفهان</option>
<option>تبریز</option>
<option>شیراز</option>
</select>
<div id="TempRes"></div>
د ر قسمت meta صفحه دو خط زیر را اضافه کنید:
<script language="javascript" src="ajax/common.ashx"></script>
<script language="javascript"
src="ajax/NAMESPACE.PAGECLASS,ASSEMBLYNAME.ashx"></script>
به جای NameSpace و AssemblyName فضای نام پروژه خودتان و به جای pageclass نام کلاس صفحه را جایگزین کنید که در مثال ما میشود :
<script language="javascript" src="ajax/common.ashx"></script>
<script language="javascript"
src="ajax/AjaxTest.Index,AjaxTest.ashx"></script>
حالا وقت نوشتن کد جاوا اسکریپت رسیده:
<script>
function GetAndDispayTemp()
{
var city=document.getElementById("MyDDL").item(MyDDL.s electedIndex).text;
var citytemp=Index.FindCityTemperature(city);
document.getElementById("TempRes").innerText=cityt emp+"°C";
}
</script>
این اسکریپت رو میون تگ ها html صفحه بنویسید...حالا فکر میکنم بیموقع نباشه بهتون بگم تبریک شما اولین صفحه AJAX خود را ساختید
پاسخ با نقل قول
نوشته شده توسط adonis
همه چیز دز باره Ajax در قالب یک فایل Pdf
