+- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (http://vb4arb.com/vb)
+-- قسم : قسم برمجة وتطوير المواقع (http://vb4arb.com/vb/forumdisplay.php?fid=51)
+--- قسم : قسم ASP.NET (http://vb4arb.com/vb/forumdisplay.php?fid=52)
+---- قسم : قسم مقالات ASP.NET (http://vb4arb.com/vb/forumdisplay.php?fid=54)
+---- الموضوع : تعلم كيف تنشئ لوحة إعلانات تحدث نفسها كل 3 ثوانى بـAjax (/showthread.php?tid=5745)
تعلم كيف تنشئ لوحة إعلانات تحدث نفسها كل 3 ثوانى بـAjax - RaggiTech - 15-10-12
كاتب الموضوع : Ahmed Moosa
بسم الله الرحمن الرحيم
والحمد لله رب العالمين
عمل لوحة إعلانات تحدث نفسها كل 3 ثوانى .
الصورة التى سنصل إليها
" لم أرفعها "
بسم الله الرحمن الرحيم
والحمد لله رب العالمين
عمل لوحة إعلانات تحدث نفسها كل 3 ثوانى .
الصورة التى سنصل إليها
" لم أرفعها "
" للمعرفة "
يتم تنفيذ هذا الدرس بتقنية Ajax فى Visual Web Developer أو Visual Studio
الأهداف :-
- إستخدام أداة Timer فى Ajax .
- معرفة كيفية تحديث Update Panel بإستخدام Timer >
فكرة العمل :-
لوحة إعلانات بها أكثر من إعلان يتم عرض الأعلان وراء الإعلان دون إعادة تحميل الصفحة أثناء العرض فى كل مرة . هذا الأمر يعمل كأنك قد صممت إعلان على برنامج Flash يتوالى فى العرض .
الأدوات االمستخدمه داخل الدرس :-
• Update Panel .
• Timer
• AdRotator
الخطوات :-
1- قم بفتح مشروع جديد من File واختر New ومنها إختر Web Site .
2- تظهر لك نافذة إختر منها ASP.Net Ajax Enabled-Web Site .
3- قم بإدراج Timer من اداوات Ajax
4- قم بإدراج أداة Update Panel .
5- إدراج داخلها أداة Ad Rotator .
6- إنشئ ملف Xml من Add New Item ولتكن محتوياته كالتالى :-
كود :
[color=#000000][COLOR=#0000bb]<?xml version[/color][color=#007700]=[/color][color=#dd0000]"1.0" [/color][color=#0000bb]encoding[/color][color=#007700]=[/color][color=#dd0000]"utf-8" [/color][COLOR=#0000bb]?>
[/COLOR]<Advertisements>
<Ad>
<ImageUrl>ahmed_Moosa.gif</ImageUrl>
<AlternateText>Computer Instructor</AlternateText>
<NavigateUrl>mailto:ahmed_moosa83@yahoo.com</NavigateUrl>
</Ad>
<Ad>
<ImageUrl>ali.gif</ImageUrl>
<AlternateText>Web Developer</AlternateText>
<NavigateUrl>mailto:ali@yahoo.com</NavigateUrl>
</Ad>
<Ad>
<ImageUrl>Hossam.gif</ImageUrl>
<AlternateText>Programmer </AlternateText>
<NavigateUrl>mailto:hossam@yahoo.com</NavigateUrl>
</Ad>
</Advertisements>[/COLOR]7- قم بزيارة صفحة Default.aspx وأكتب فيها الخصائص التالية :-
كود :
[color=#000000][COLOR=#0000bb][/color][color=#007700]<[/color][color=#0000bb]form id[/color][color=#007700]=[/color][color=#dd0000]"form1" [/color][color=#0000bb]runat[/color][color=#007700]=[/color][color=#dd0000]"server"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]ScriptManager ID[/color][color=#007700]=[/color][color=#dd0000]"ScriptManager1" [/color][color=#0000bb]runat[/color][color=#007700]=[/color][color=#dd0000]"server" [/color][COLOR=#007700]/>
<[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]Timer ID[/color][color=#007700]=[/color][color=#dd0000]"Timer1" [/color][color=#0000bb]runat[/color][color=#007700]=[/color][color=#dd0000]"server" [/color][color=#0000bb]Interval[/color][color=#007700]=[/color][color=#dd0000]"3000"[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]Timer[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]div[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]UpdatePanel ID[/color][color=#007700]=[/color][color=#dd0000]"UpdatePanel1" [/color][color=#0000bb]runat[/color][color=#007700]=[/color][color=#dd0000]"server"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]ContentTemplate[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]AdRotator ID[/color][color=#007700]=[/color][color=#dd0000]"AdRotator1" [/color][color=#0000bb]runat[/color][color=#007700]=[/color][color=#dd0000]"server" [/color][color=#0000bb]AdvertisementFile[/color][color=#007700]=[/color][color=#dd0000]"~/XMLFile.xml" [/color][COLOR=#007700]/>
</[/COLOR][color=#0000bb]ContentTemplate[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Triggers[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]AsyncPostBackTrigger ControlID[/color][color=#007700]=[/color][color=#dd0000]"Timer1" [/color][color=#0000bb]EventName[/color][color=#007700]=[/color][color=#dd0000]"Tick" [/color][COLOR=#007700]/>
</[/COLOR][color=#0000bb]Triggers[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]UpdatePanel[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]div[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]form[/color][COLOR=#007700]>
[/COLOR][color=#0000bb][/color][/COLOR]التحليل
- بعد إدراج أداة Timer تم ضبط الخاصية interval التى سيتم تغيرالوقت بها كل 3000 ملى ثانية ما يساوى 3 ثوانى .
- لتحديث Update Panel طبقاً لتغير التوقيت قمنا بضبط الأمر Triggers . وأسندنا أداة التحكم فيه إلى أداة Timer 1 .
- وكذلك ضبط الحدث Tick الخاص بالأداة Timer التى ستعطينا التوقيت . الذى سيقوم بتحديث أداة Update Panel طبقاً لتنفيذ هذا الحدث .
- كذلك لاحظ ضبط مصدر الإعلانات للأداة AdRotator إلى ملف Xml الذى قمنا بتصميمه بالأعلى .
التنفيذ :-
- قم بالتنفيذ من الأمر Run أو من قائمة file نختار View in Browser .
- فقط إنظر إلى الصفحة وهى تعرض الصورة الموجودة وراء بعضهما البعض . كأنه ملف Flash .
- قل الحمد لله رب العالمين
إبدع
قم بالتفكير فى عمل آخر تستخدم فيه أداة Timer .
قم بالتفكير فى عمل آخر تستخدم فيه أداة Timer .
إلى هنا نصل إلى نهاية الدرس والحمد لله رب العالمين .