آموزش Load یک User control با Ajax جی کوئری در Asp.net

[mmnoody2006]

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

http://www.dl.emroozweb.com/dl/008/003/001.gif
بعد از زدن دکمه ok و ایجاد پروژه ( توجه کنید پروژه VB باشه نه C#) یک User control جدید در ریشه پروژه ایجاد کنید که اسمش mycontrol.ascx باشه .

http://www.dl.emroozweb.com/dl/008/003/002.gif
خب ما در این User Control قصد خواندن و نمایش اطلاعاتی از دیتابیس رو داریم و چون قصد ورود به موارد دیتابیس را نداریم خیلی ساده یک دیتابیس بسازید و جدولی به نام tbl1 ایجاد کنید با محتویاتی که در عکس زیر می بینید . ( حتما ساختن دیتابیس و ایجاد جدول رو که دیگه می دونید )

http://www.dl.emroozweb.com/dl/008/003/003.gif
خب حالا یک دیتابیس داریم که جدولی به نام tbl1 در آن ساختیم با محتویات بالا . به User Control برگردید و در حالت Design درون آن یک Gridview و یک SqlDataSource قرار دهید . Sqldatasource را طوری تنظیم کنید که محتویات جدول tbl1 رو برگردونه و خاصیت DataSourceID ی Gridview را روی همین SqlDataSource تنظیم کنید . کد شما باید شبیه زیر باشد :

http://www.dl.emroozweb.com/dl/008/003/004.gif
تا اینجای کار کارهای خیلی ساده و ابتدایی انجام دادیم که بارها در پروژه های زیادی انجام دادیم . ما برای شروع کار باید دو فایل جاوا اسکریپت جی کوئری با نام های
jquery-1.4.1.min.js
jquery.blockUI.js
نیاز داریم البته در مورد فایل جی کوئری فکر کنم ورژن های پایین تر هم جواب بده . این فایل ها در پروژه نمونه که آخر مقاله برای دانلود قرار داده ام وجود دارد . حالا به صفحه Default.aspx برگردید و فایل های جاوا را به صفحه اضافه کنید .

http://www.dl.emroozweb.com/dl/008/003/005.gif
علاوه بر اسکریپت های بالا به کد Ajax جی کوئری هم نیاز داریم تا عملیات Load کنترل را انجام بده پس Script زیر را هم به پروژه اضافه کنید :

http://www.dl.emroozweb.com/dl/008/003/006.gif


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

http://www.dl.emroozweb.com/dl/008/003/007.gif


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

http://www.dl.emroozweb.com/dl/008/003/008.gif
بعد از وارد کردن این دو Name Space نوبت WebMethod می باشد که تابع load ی که برای User Control نیاز داریم رو فراخوانی می کنه و به شکل زیر می باشد :

http://www.dl.emroozweb.com/dl/008/003/009.gif


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

http://www.dl.emroozweb.com/dl/008/003/010.gif
خب کار تمامه برنامه را اجرا کنید

http://www.dl.emroozweb.com/dl/008/003/011.gif
بله با زدن دکمه یک پیغام چند لحظه صبر کنید ظاهر می شود و با Render شدن User Control پیغام محو شده و صفحه به شکل بالا User Control مثل شعبده بازی ظاهر می شه . این همون روش خیلی معروف هست که سایت های بزرگ از آن استفاده می کننده حتما دید .

برای دانلود نمونه برنامه اینجا (http://www.dl.emroozweb.com/dl/008/003/WebSite4.zip) کلیک کنید.

[Program.net]

چرا با c# نمیشه؟؟!؟!؟!؟!؟!؟:ناراحت:

[NIMA_1981]

http://www.aspxtutorial.com/post/2011/01/02/Load-aspnet-web-user-control-using-jQuery-and-web-method.aspx

[mmnoody2006]

در آدرسی که دوست بالایی دادن بصورت C# می تونید کدها رو داشته باشید

[ricky22]

پلاگینی هم آقای نصیری برای این کار تهیه کردند با یک آموزش بسیار مفید.
http://www.dotnettips.info/2009/07/blog-post_06.html

[mmnoody2006]

پلاگینی هم آقای نصیری برای این کار تهیه کردند با یک آموزش بسیار مفید.
http://www.dotnettips.info/2009/07/blog-post_06.html

واقعا آقای نصیری یکی از بزرگترین های دات نت ایران هستند و من هم همیشه از مقالاتشون لذت می برم ولی روشی که من گفتم استفاده از web method هست نه استفاده از متد های وب سرویس .

[javad.nic63]

فقط برادر یه چیزی رو مشخص نکردی. اونم اینه که این data source رو که توی صفحه میندازی برای تنظیم کانکشن استرینگش چطوری از کانکشن استرینگ web.config استفاده کنیم؟

[mmnoody2006]

فقط برادر یه چیزی رو مشخص نکردی. اونم اینه که این data source رو که توی صفحه میندازی برای تنظیم کانکشن استرینگش چطوری از کانکشن استرینگ web.config استفاده کنیم؟

کاری نداره که شما یه کانکشن می سازی و به sqldatasource نصبت می دی تمام