تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5
تعلم كيف تنشئ لوحة إعلانات تحدث نفسها كل 3 ثوانى بـAjax
#1
كاتب الموضوع : Ahmed Moosa



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

والحمد لله رب العالمين

عمل لوحة إعلانات تحدث نفسها كل 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 .



إلى هنا نصل إلى نهاية الدرس والحمد لله رب العالمين .
}}}
تم الشكر بواسطة:



التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 1 ) ضيف كريم