چند روزه که بد جوری تو نخ آجاکس جی کوئری هستم چون خیلی توپه شما براحتی و بدون کد نویسی های چند صد خطی می تونید با فراخوانی یک Web Method در سمت سرور توسط تابع $.ajax جی کوئری هر کاری کنید باور کنید برای یه برنامه نویس رویایی تر از این نمی شه . تصمیم گرفتم در یک مثال عملی کمی از شیرینی بچشیم .

ایجاد یک برنامه نمونه برای کار با Ajax در جی کوئری

برای شروع کار باید خاطر نشان کنم ما از Visual Studio 2010 استفاده می کنیم ولی در ورژن های پایین تر هم امکان استفاده فراهم هست . خب بریم سر کارمون یک پروژه وب جدید بسازید :

بعد از زدن دکمه ok و ایجاد پروژه ( توجه کنید پروژه VB باشه نه C#) یک User control جدید در ریشه پروژه ایجاد کنید که اسمش mycontrol.ascx باشه .

خب ما در این User Control قصد خواندن و نمایش اطلاعاتی از دیتابیس رو داریم و چون قصد ورود به موارد دیتابیس را نداریم خیلی ساده یک دیتابیس بسازید و جدولی به نام tbl1 ایجاد کنید با محتویاتی که در عکس زیر می بینید . ( حتما ساختن دیتابیس و ایجاد جدول رو که دیگه می دونید )

خب حالا یک دیتابیس داریم که جدولی به نام tbl1 در آن ساختیم با محتویات بالا . به User Control برگردید و در حالت Design درون آن یک Gridview و یک SqlDataSource قرار دهید . Sqldatasource را طوری تنظیم کنید که محتویات جدول tbl1 رو برگردونه و خاصیت DataSourceID ی Gridview را روی همین SqlDataSource تنظیم کنید . کد شما باید شبیه زیر باشد :

تا اینجای کار کارهای خیلی ساده و ابتدایی انجام دادیم که بارها در پروژه های زیادی انجام دادیم . ما برای شروع کار باید دو فایل جاوا اسکریپت جی کوئری با نام های

• jquery-1.4.1.min.js

• jquery.blockUI.js

نیاز داریم البته در مورد فایل جی کوئری فکر کنم ورژن های پایین تر هم جواب بده . این فایل ها در پروژه نمونه که آخر مقاله برای دانلود قرار داده ام وجود دارد . حالا به صفحه Default.aspx برگردید و فایل های جاوا را به صفحه اضافه کنید .

علاوه بر اسکریپت های بالا به کد Ajax جی کوئری هم نیاز داریم تا عملیات Load کنترل را انجام بده پس Script زیر را هم به پروژه اضافه کنید :

حالا در حالت Design یک Input(button) به صفحه اضافه کنید و بعد از آن یک Div که User Control را در آن لود می کنیم ایجاد می کنیم توجه کنید ID ای که برای Div در نظر می گیرید حتما همان باشد که در اسکریپت آژاکس نوشته شده در اینجا result می باشد مثل کد زیر :

حالا نوبت اصلی ترین مرحله هست که همون کد نویسی Server Side هست . به قسمت code view صفحه default بروید . دو Name space زیر را وارد کنید :

بعد از وارد کردن این دو Name Space نوبت WebMethod می باشد که تابع load ی که برای User Control نیاز داریم رو فراخوانی می کنه و به شکل زیر می باشد :

و تابع فراخواننده :

خب کار تمامه برنامه را اجرا کنید

بله با زدن دکمه یک پیغام چند لحظه صبر کنید ظاهر می شود و با Render شدن User Control پیغام محو شده و صفحه به شکل بالا User Control مثل شعبده بازی ظاهر می شه . این همون روش خیلی معروف هست که سایت های بزرگ از آن استفاده می کننده حتما دید .

برای دانلود نمونه برنامه اینجا کلیک کنید.