آموزش.: ASP.NET AJAX :.

Printable View

نمايش 40 تاپيکها در يک صفحه

14-07-2010, 23:56
naser_feb8646

آموزش.: ASP.NET AJAX :.

بسم الله الرحمن الرحیم

سلام

دوستان اگر خدا بخواد و کمک کنه می خوام توی این تاپیک فناوری AJAX تحت ASP.NET رو آموزش بدم

اول از همه اینو بگم که از تمامی دوستان و اساتید که می تونن تو ارتقا و پر بارتر شدن این تاپیک کمک کنند
صمیمانه دعوت به همکاری می کنم :11::11:
تمام سعی من اینکه هر سه الی چهار روز این تاپیک دو آپدیت کنم

*********
فقط یه قانون که توی اکثر بحث های آموزشی مطرح میشه:19::19:

1- لطفاً اگر سوال دارید توی یه تاپیک جدا بپرسید تا آموزش توی این تاپیک شسته رفته باشه و دسترسی به مطالب آسان تر
*********
ما توی این آموزش دو ابزار حرفه ای VS یعنی ASP.NET AJAX Extensions و ASP.NET AJAX Control Toolkit رو مورد بررسی قرار می دیم

قبل از شروع بر اساس VS مورد استفاده خودتون یکی از سه فایل زیر رو دانلود کنید و بعد آموزش تصب اونها رو دنبال کنید
______________
VS 2005

کد:

http://naserfeb8646.persiangig.com/document/AJAX/ASP_AJAX_Control_Toolkit_2.0.rar

______________
VS 2008

کد:

http://naserfeb8646.persiangig.com/document/AJAX/AjaxControlToolkit.NET3.5.rar

______________
VS 2010

کد:

http://naserfeb8646.persiangig.com/document/AJAX/AjaxControlToolkit.Binary.NET4.zip

**************
مرحله اول فقط برای دوستانی که از VS 2005 استفاده می کنند
فایل ASPAJAXExtSetup.msi رو اجرا و مراحل نصب رو دنبال کنید تا به پایان برسد

در فایل دانلود شده VS 2005 پوشه Binaries رو در محل نصب VS کپی کنید
در فایل دانلود شده VS 2008 پوشه AjaxControlToolkit.NET3.5 رو در محل نصب VS کپی کنید
در فایل دانلود شده VS 2005 پوشه AjaxControlToolkit.Binary.NET4 رو در محل نصب VS کپی کنید

(از اینجا توضیح برای همه مشترک است)

مرحله بعدی اینکه یه پروژه وبسایت جدید ایجاد کنید و به ترتیب جلو برید
1- در پنجره Toolbox کلیک راست کرده و Add Tab رو انتخاب کنید
2- نام اون رو به AJAX Control Toolkit تعییر بدین
3- در قسمت Tab ساخته شده کلیک راست کرده و Choose Items... v رو انتخاب نمایید
4- در پنجره Choose Toolbox Items از قسمت .NET Framework Components دکمه Browse را انتخاب کرده و با توجه به مسیری که فایل رو کپی کردین (قسمت قرمز رنگ که توضیح داده شد) فایل AjaxControlToolkit.dll رو انتخاب نمایید
5- پنجره Choose Toolbox Items رو OK کنید

خوب حالا مجموعه AJAX Control Toolkit در Tab ساخته شده نمایان است

یاعلی
15-07-2010, 00:16
naser_feb8646

فهرست بندی مطالب

1- توضیحات نصب

کد:

http://forum.p30world.ir/showpost.php?p=5180009&postcount=1

2- کنترل ScriptManager

کد:

http://forum.p30world.ir/showpost.php?p=5182010&postcount=3

3- کنترل UpdatePanel قسمت اول

کد:

http://forum.p30world.ir/showpost.php?p=5183280&postcount=4

4- کنترل UpdatePanel قسمت دوم

کد:

http://forum.p30world.com/showpost.php?p=5208498&postcount=12

5- کنترل Timer

کد:

http://forum.p30world.com/showpost.php?p=5208640&postcount=13

6- کنترل UpdateProgress

کد:

http://forum.p30world.com/showpost.php?p=5211654&postcount=14

این پست به مرور تکمیل می شود ...
15-07-2010, 22:57
naser_feb8646

کنترل ScriptManager

سلام

کنترل ScriptManager

کنترل ScriptManager اصلی ترین و پایه ترین کنترل AJAX می باشد

ما برای استفاده از AJAX باید کنترلی داشته باشیم که بتونیم از طریق اون از کدهای جاوا اسکریپت در طرف سرویس گیرنده استفاده کنیم یا به عبارت دیگه ما باید کاری کنیم که بشه کتابخانه AJAX در سمت سرویس گیرنده اجرا بشه

تا چند سال پیش برای استفاده از کتابخانه AJAX در سمت سرویس گیرنده باید با زبان جاوااسکریپت آشنایی کامل می داشتید و چندین خط اسکریپت می نویشتید تا بتونید از اون استفاده کنید

اما حالا کافیه از کنترل ScriptManager استفاده کنید تا تمام کارهای مربوط به اجرای کتابخانه های AJAX در سمت سرویس گیرنده رو انجام بده

شما برای اجرای کدهای AJAX باید حتماً یک کنترل ScriptManager به صفحتون اضافه کنید

در جعبه ابزار AJAX Extensions کنترل دیگری به نام ScriptManageProxy وجود داره از این کنترل برای وبسایت هایی که با مدل MasterPage کار می کنند استفاده میشه به این صورت که اگر در MasterPage از کنترل ScriptManager بهره بگیرید اون وقت در صفحاتی که می خواهید از AJAX استفاده کنید باید کنترل ScriptManageProxy رو بکار بگیرید

یاعلی
16-07-2010, 14:04
naser_feb8646

کنترل UpdatePanel قسمت اول

سلام

کنترل UpdatePanel قسمت اول

قبل از توضیح دادن این کنترل اجازه بدین یه سری فرایند که در درخواست صفحه ASP.NET اتفاق می افته رو براتون بگم تا درک این کنترل براتون آسونتر بشه

حتماً شما دوستان می دونید که وقتی یه صفحه ASP.NET رو درخواست می کنید اون صفحه روی سرور پردازش می شه و به صورت کدهای HTML در میاد و برای شما ارسال میشه و مرورگر شما کدهای HTML رو به نمایش در میاره
حالا شما تصور کنید که یه صفحه دارید با چندین عکس و فایل فلش و غیره. توی این صفحه به طور مثال دو تا DropDownList دارید که قرار با انتخاب یک آیتم از یکی از انها DropDownList دومی مقدار دهی بشه نکته اینجاست که شما خاصیت AutoPostBack اولی رو True می کنید و با انتخاب یک آیتم از اون کل صفحه ارسال میشه و در سرور پردازش شده و برای شما بازپس فرستاده میشود این کار باعث میشه شما رمانی رو منتظر بمونید تا صفحه دوباره لود بشه

حالا کنترل UpdatePanel باعث میشه که شما از بروز رسانی جزیی استفاده کنید
یعنی چی؟
یعنی اینکه شما در مثال بالا اگر کنترل DropDownList اولی رو درون یک بلاک UpdatePanel قرار بدید دیگه کل صفحه از نو لود نمیشود بلکه فقط کنترل هایی که درون UpdatePanel قرار داره نو میشه
البته اینو بگم که در اصل کار هیچ تغییری صورت نمی گیره یعنی بعد از درخواست و PostBack شدن دوباره کل صفحه در سرور پردازش میشه و برای کلاینت بازپس فرستاده میشه در سمت کلاینت دوباره کد HTML پردازش شده و قسمتی که در بلاک UpdatePanel قرار داشته بروزرسانی شده و بقیه کد به دور ریخته میشود
این رو هم در نظر داشته باشید که وقتی از بروزسانی جزیی استفاده می کنید صفحه از دید کاربر خارج نمیشه بلکه فقط اون قسمتی که در بلاک UpdatPanel قرار داره دوباره نو میشود

اگر دقیقاً متوجه نشدید امیدوارم با ذکر یک مثال به کل قضیه پی ببرید

خوب ما یه صفحه ASP.NET می سازیم که توی اون یه تصویر GIF متحرک یک Lable و دو Button وجود داره البته فراموش نشه ما به یک کنترل ScriptManager و یک کنترل UpdatePanel هم نیاز داریم ID یکی از Button ها رو به btnRefresh تغییر داده و به همراه کنترل Label رو در بلاک UpdatePanel قرار بدین

کد قسمت Body صفحه ASP.NET باید به شکل زیر باشه

کد:

<formid="form1"runat="server"> <div> <asp:ImageID="Image1"runat="server"ImageUrl="~/Naser.gif"/> <br/> <asp:ScriptManagerID="ScriptManager1"runat="server"> </asp:ScriptManager> <asp:UpdatePanelID="UpdatePanel1"runat="server"> <ContentTemplate> <asp:LabelID="lblTime"runat="server"></asp:Label> <br/> <asp:ButtonID="btnRefresh"runat="server"Text="RefreshTime..."/> <br/> </ContentTemplate> </asp:UpdatePanel> </div> <div> <asp:ButtonID="Button2"runat="server"Text="Button"/> </div> </form> </body>

حالا در رویداد کلیک Button که در بلاک UpdatePanel قرار داره دستور زیر رو وارد کنید

کد:

lblTime.Text = DateTime.Now.ToLongTimeString

در رویداد Page_Load صفحه هم کد بالا را وارد کنید
فقط دقت داشته باشید در کد بالا قسمتی رو که با رنگ قرمز مشخص کردم نام Label ما می باشد

حالا صفحه رو اجرا کنید وقتی شما روی btnRefresh کلیک می کنید بدون اینکه کل صفحه بروزرسانی بشه ساعت جاری سرور به شما نمایش داده خواهد شد ولی اگر روی Button کلیک کنید کل صفحه بروزرسانی شده و ساعت جاری سرور نمایش داده خواهد شد

برای اینکه شما راحتتر متوجه بشین اگر به تصویر متحرکی که روی صفحه قرار داره نگاه کنید در صورتیکه روی btnRefresh کلیک کنید انیمیشن بدون هیچ وفقه ای به کار خود ادامه میده
ولی اگر روی Button کلیک کنید انیمیشن دوباره از اول شروع به اجرا میکند

اینم لینک یه تصویر GIF

کد:

http://naserfeb8646.persiangig.com/image/Naser.gif

یاعلی
16-07-2010, 15:02
L u K e !

خیلی ممنون ناصر جون
استفاده کردیم
اگه می شه یه آموزش درباره ی ساخت کنترل Ajax بنویس
16-07-2010, 18:27
naser_feb8646

نقل قول:

نوشته شده توسط L u K e ! [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

خیلی ممنون ناصر جون
استفاده کردیم
اگه می شه یه آموزش درباره ی ساخت کنترل Ajax بنویس

سلام
دوست عزیز اگر واقعیت رو بخوای من خودم هنوز در مورد ساخت کنترل ها Ajax اقدامی نکردم و به نظر خودم کنترل های آمده که در ASP.NET وجود دارن خودشون خیلی قدرتمند و کامل هستند ولی باز هم به روی چشم اگر اطلاعاتی در مورد ساخت این کنترل بدست آوردم و خودم رو در اون سطح دیدم که بتونم آموزش بدم حتماً دریغ نمی کنم :10:
17-07-2010, 10:07
L u K e !

خیلی ممنون ناصر جان
نمی دونم چرا همه ی این کنترل ها یه خطایی می دن موقع استفاده به جز کنترل Editor

این خطا رو : The TargetControlID of 'CalendarExtender1' is not valid. The value cannot be null or empty.

مشکلی تو این کد می بینید ؟

[HTML] <form id="form1" runat="server">
<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

<cc2:CalendarExtender ID="CalendarExtender1" runat="server">
</cc2:CalendarExtender>

</ContentTemplate>
</asp:UpdatePanel>

</div>
</form>[/HTML]
17-07-2010, 18:12
mahdi7s

سلام
از خطا معلوم است که باید خصیصه TargetControlID پر کنید
برای این کار به محیط طراحی بروید و یک تکست باکس به UpdatePanel اضافه کنید و سپس بر روی علامت < کنار تکست باکس کلیک کنید و Add extender و CalendarExtender را انتخاب کنید که کد شما نهایتا باید شبیه این شود:

[HTML] <asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="TextBox1_CalendarExtender" runat="server"
Enabled="True" TargetControlID="TextBox1">
</asp:CalendarExtender>
</ContentTemplate>
</asp:UpdatePanel>[/HTML]

موفق باشید
19-07-2010, 14:49
عــــلی

سلام دوستان خسته نباشید.
ناصر عزیز ممنون از آموزش هات...خیلی خیلی ممنونم.
دوستان من یک مشکل توی اجرای کد زیر دارم:
فایل html زیر رو دانلود کنید:

کد:

http://up.--------.com/Files1/643b299a1a5c4e4bbfa9.rar

من هر کاری کردم این Html رو بیارم و توی asp.net اجرا کنم نتونستم و با خطای کدهای جاوای داخل اون مواجه شدم.
خیلی از کدها رو تونستم بیارم.ولی این یکی هر کاری کردم خطا میداد.
اگه کسی میدونه لطفاً کمکم کنه خیلی ممنونم از همه دوستان.
موفق باشید.
23-07-2010, 14:32
naser_feb8646

نقل قول:

نوشته شده توسط L u K e ! [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

خیلی ممنون ناصر جان
نمی دونم چرا همه ی این کنترل ها یه خطایی می دن موقع استفاده به جز کنترل Editor

این خطا رو : The TargetControlID of 'CalendarExtender1' is not valid. The value cannot be null or empty.

مشکلی تو این کد می بینید ؟

[HTML] <form id="form1" runat="server">
<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

<cc2:CalendarExtender ID="CalendarExtender1" runat="server">
</cc2:CalendarExtender>

</ContentTemplate>
</asp:UpdatePanel>

</div>
</form>[/HTML]

سلام

اولاً ببخشید یه دیر شد آخه امام رضا طلبید یه دفعه رفتیم مشهد تا امروز که اومدم

خوب همونطور که mahdi7s عزیز گفتند بعضی از کنترل های AJAX Control Toolkit خودشون به تنهایی نمی تونند کاری انجام بدن و باید به یک کنترل ASP.NET متصل بشن تا بتونند کار مورد نظر رو انجام بدن و کنترل CalendarExtender از این دسته از کنترل ها می باشند که انشااله آموزش اون رو می زارم

و یه نکته دیگه موقعی که از کنترل AJAX Control Toolkit استفاده می کنید نیاز نیست که دیگه از کنترل UpdatePanel استفاده کنید مگر در مواقعی که بعداً می گم

نقل قول:

نوشته شده توسط hamishebahar [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

سلام دوستان خسته نباشید.
ناصر عزیز ممنون از آموزش هات...خیلی خیلی ممنونم.
دوستان من یک مشکل توی اجرای کد زیر دارم:
فایل html زیر رو دانلود کنید:

کد:

http://up.--------.com/Files1/643b299a1a5c4e4bbfa9.rar

من هر کاری کردم این Html رو بیارم و توی asp.net اجرا کنم نتونستم و با خطای کدهای جاوای داخل اون مواجه شدم.
خیلی از کدها رو تونستم بیارم.ولی این یکی هر کاری کردم خطا میداد.
اگه کسی میدونه لطفاً کمکم کنه خیلی ممنونم از همه دوستان.
موفق باشید.

سلام

توی این صفحه از کد های JQuery استفاده شده که یکی از کتابخانه های زبان JavaScript هستش
راستش رو بخاید من زیاد با JQuery کار نکردم ولی تمام تلاشم رو می کنم تا ببنیم اصلاً کدش چیکار می کنه و اون رو توی ASP.NET باز نویسی کنم

نمايش 40 تاپيکها در يک صفحه