Ajax . net(arabic)

ÝíämnØÛakwßaÛaëëìí‡îÐÛaåßòjnØßpby‹Ï
òjnØßòjnØßòjnØßòjnØß@@@@@pbyŠÏ@pbyŠÏ@pbyŠÏ@pbyŠÏòî†äaòî†äaòî†äaòî†äa@@@@
www.farahat-library.com/blog
ÝîàznÛÝ›ÏcâýÏaæìmŠbØÛaòÏ†ba
òjnØßòjnØßòjnØßòjnØß@@@@pbyŠÏpbyŠÏpbyŠÏpbyŠÏ@@@@òîöŠ½aòîöŠ½aòîöŠ½aòîöŠ½a@@@@@@@@
library.com/cartoon-www.farahat
@ë@ñ‡îÐ¾a@wßaÛa@ÝîàznÛä¾aévn@ @
òjnØßòjnØßòjnØßòjnØßpbyŠÏpbyŠÏpbyŠÏpbyŠÏpbî©ÜÛpbî©ÜÛpbî©ÜÛpbî©ÜÛ
library.com/software-www.farahat
@ÖaìŽüa@À@ñ‹Ïìnß@ÌÛa@pbvnä¾a@õa‹’ë@ÉîjÛ@ @
pbyŠÏ@ÞìßpbyŠÏ@ÞìßpbyŠÏ@ÞìßpbyŠÏ@Þìß@@@@@@@@
library.com/mall-www.farahat

AJAX. net
‫اﻷول‬ ‫اﻟﺠﺰء‬
‫ﻭﺇﻋﺪﺍﺩ‬ ‫ﺗﺄﻟﻴﻒ‬
‫ﺷﻴﺨﻲ‬ ‫ﺁﻭﺍﺯ‬
Ramanooo@hotmail.com
‫اﻟﻜﺘﺎب‬ ‫ﻋﻦ‬ ‫ﻟﻤﺤﺔ‬:
‫ﯾﺘﻜﻮ‬‫ﻓﻲ‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫اﺳﺘﺨﺪام‬ ‫ﻋﻦ‬ ‫ﺗﻤﺎرﯾﻦ‬ ‫ﻣﺠﻤﻮﻋﺔ‬ ‫ﻋﻠﻰ‬ ‫ﯾﺤﺘﻮي‬ ‫ﻣﻨﮫ‬ ‫ﺟﺰء‬ ‫ﻛﻞ‬ ‫ﻓﻲ‬ ‫أﺟﺰاء‬ ‫ﺛﻼث‬ ‫ﻣﻦ‬ ‫اﻟﻜﺘﺎب‬ ‫ن‬
‫وﺑﺎﻟﺘﻔﺼﯿﻞ‬ ‫ﺑﺎﻟﺼﻮر‬ ‫ﺷﺮﺣﮭﺎ‬ ‫ﯾﺘﻢ‬،‫وذﻟﻚ‬‫ا‬ ‫ﻣﻦ‬ ‫اﻷﻛﺒﺮ‬ ‫اﻻﺳﺘﻔﺎدة‬ ‫ﻟﺘﺤﻘﯿﻖ‬‫ﺣﯿﺚ‬ ‫ﻟﻜﺘﺎب‬ Visual .NET 2008‫اﻟﻌﻤﻞ‬ ‫ﺑﯿﺌﺔ‬
‫اﻟﻮب‬ ‫ﺻﻔﺤﺎت‬ ‫وﺑﺮﻣﺠﺔ‬ ‫ﺗﺼﻤﯿﻢ‬ ‫ﻓﻲ‬ ‫اﻟﻤﺘﻘﺪﻣﺔ‬ ‫اﻟﻤﮭﺎرات‬ ‫ﻣﻦ‬ ‫اﻟﻌﺪﯾﺪ‬ ‫اﻟﻄﺎﻟﺐ‬ ‫ﯾﺘﻌﻠﻢ‬‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫اﺳﺘﺨﺪام‬ ‫ﻣﻊ‬،‫ﯾﺘﻌﻠﻢ‬
‫ﺑﺮﻣﺠﯿﺔ‬ ‫ﺻﻔﻮف‬ ‫وإﻧﺸﺎء‬ Style Sheet ‫ﺑﺎﺳﺘﺨﺪام‬ ‫اﻟﺼﻔﺤﺎت‬ ‫ﺗﻨﺴﯿﻖ‬ ‫ﻓﻲ‬ ‫اﻷﺧﺮى‬ ‫اﻟﻤﮭﺎرات‬ ‫ﺑﻌﺾ‬ ‫أﯾﻀﺎ‬ ‫اﻟﻄﺎﻟﺐ‬
‫ﻟﺤﻞ‬ ‫اﺳﺘﺨﺪاﻣﮭﺎ‬ ‫ﻓﻲ‬ VB ‫وﻟﻐﺔ‬ C# ‫اﻟﺒﺮﻣﺠﺔ‬ ‫ﻟﻐﺎت‬ ‫ﻣﻊ‬ ‫واﻟﺘﻌﺎﻣﻞ‬ Standard ASP.net ‫أدوات‬ ‫واﺳﺘﺨﺪام‬ Class
‫أﺟﺰاﺋﮫ‬ ‫ﻛﺎﻓﺔ‬ ‫ﻓﻲ‬ ‫اﻟﻜﺘﺎب‬ ‫داﺧﻞ‬ ‫اﻟﻤﻮﺟﻮدة‬ ‫اﻟﻤﺘﻨﻮﻋﺔ‬ ‫اﻟﺘﻤﺎرﯾﻦ‬،‫ھﺬا‬ ‫ﺑﺎﺳﺘﺨﺪام‬ ‫اﻟﺒﺪء‬ ‫واﻟﻤﺘﻘﺪم‬ ‫اﻟﻤﺒﺘﺪئ‬ ‫ﻟﻠﺸﺨﺺ‬ ‫ﻓﯿﻤﻜﻦ‬
‫وﺑﺴﯿﻄﺔ‬ ‫ﺳﮭﻠﺔ‬ ‫وإﻋﺪاده‬ ‫ﺗﺼﻤﯿﻤﮫ‬ ‫ﻓﻄﺮﯾﻘﺔ‬ ‫اﻟﻜﺘﺎب‬،‫وﯾﺘﻌ‬ ‫ﺑﺴﮭﻮﻟﺔ‬ ‫ﺗﻤﺎرﯾﻨﮭﺎ‬ ‫ﯾﺤﻞ‬ ‫إن‬ ‫ﻟﻠﻤﺒﺘﺪئ‬ ‫ﯾﻤﻜﻦ‬ ‫ﺣﯿﺚ‬‫ﻋﻠﻰ‬ ‫ﺮف‬
‫ﺣﯿﺚ‬ ‫اﻟﻤﻮﺟﻮدة‬ ‫اﻟﺘﻤﺎرﯾﻦ‬ ‫ﺣﻞ‬ ‫ﻣﻦ‬ ‫ﯾﺴﺘﻔﺎد‬ ‫إن‬ ‫ﻟﻠﻤﺘﻘﺪم‬ ‫أﯾﻀﺎ‬ ‫وﯾﻤﻜﻦ‬ ‫ﺑﻤﺘﻌﺔ‬ ‫اﻟﺘﻤﺎرﯾﻦ‬ ‫ﺣﻞ‬ ‫ﻓﻲ‬ ‫اﻟﻤﺴﺘﺨﺪﻣﺔ‬ ‫اﻷدوات‬
‫اﺟﺎﻛﺲ‬ ‫ﺗﻘﻨﯿﺔ‬ ‫واﺳﺘﺨﺪام‬ ‫اﻟﻮب‬ ‫ﻣﻮاﻗﻊ‬ ‫وﺑﺮﻣﺠﺔ‬ ‫ﺗﺼﻤﯿﻢ‬ ‫ﻣﺠﺎل‬ ‫ﻓﻲ‬ ‫ﺧﺒﺮاﺗﮫ‬ ‫ﻟﺰﯾﺎدة‬ ‫وﻋﺪﯾﺪة‬ ‫ﻣﻜﺜﻔﺔ‬ ‫ﻣﻌﻠﻮﻣﺎت‬ ‫ﻋﻠﻰ‬ ‫ﺗﺤﺘﻮي‬
‫وﺑﺴﺎطﺔ‬ ‫ﺑﻤﺘﻌﺔ‬.

‫اﻟﻤﺤﺘﻮﯾﺎت‬
‫ﻣﻘﺪﻣﺔ‬:‫اﺟﺎ‬ ‫ﻣﻊ‬ ‫اﻟﺒﺪاﯾﺔ‬‫ﻛﺲ‬،‫وإﻋﺪاده‬ ‫اﺟﺎﻛﺲ‬ ‫ﺗﻨﺼﯿﺐ‬.
‫اﻷول‬ ‫اﻟﺪرس‬:‫ﺗﺤﺪﯾﺚ‬‫ﻋﻨﺼ‬ ‫ﺑﺎﺧﺘﯿﺎر‬ ‫ﻧﻘﻮم‬ ‫ﻧﺤﻦ‬ ‫وب‬ ‫ﺻﻔﺤﺔ‬ ‫ﻣﻦ‬ ‫ﺟﺰء‬‫ﺮ‬‫ﻛﺎﻣﻞ‬ ‫ﺗﺤﺪﯾﺚ‬ ‫دون‬ ‫ﺑﯿﺎﻧﺎﺗﮫ‬ ‫ﺗﺤﺪﯾﺚ‬ ‫ﻟﯿﺘﻢ‬ ‫ﻣﺤﺪد‬
‫اﻹرﺳﺎل‬ ‫زر‬ ‫ﻋﻠﻰ‬ ‫اﻟﻀﻐﻂ‬ ‫ﻋﻨﺪ‬ ‫اﻟﺼﻔﺤﺔ‬.
‫اﻟﺼﻔﺤﺔ‬ ‫ﻧﻔﺲ‬. ‫ﻓﻲ‬ Update Panel ‫ﻋﺪة‬ ‫اﺳﺘﺨﺪام‬ ‫ﻋﺒﺮ‬ ‫اﻟﺼﻔﺤﺔ‬ ‫ﻓﻲ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫ﻋﺪة‬ ‫ﺑﯿﺎﻧﺎت‬ ‫ﺗﺤﺪﯾﺚ‬ ‫اﻟﺜﺎﻧﻲ‬ ‫اﻟﺪرس‬:
‫ﺷﺮﯾﻂ‬ ‫إﻧﺰال‬ ‫ﺣﺘﻰ‬ ‫اﻷﻋﻠﻰ‬ ‫ﻓﻲ‬ ‫ﺛﺎﺑﺘﺎ‬ ‫وﯾﺒﻘﻰ‬ً‫اﻟﺼﻔﺤﺔ‬ ‫اﻟﺼﻔﺤﺔ‬ ‫ﯾﺴﺎر‬ ‫أو‬ ‫ﯾﻤﯿﻦ‬ ‫أﻋﻠﻰ‬ ‫ﻓﻲ‬ ‫ﯾﻈﮭﺮ‬ Panel ‫اﻟﺜﺎﻟﺚ‬ ‫اﻟﺪرس‬:
‫إﻟﻰ‬‫اﻟﺰوار‬ ‫دﺧﻮل‬ ‫ﺗﺴﺠﯿﻞ‬ ‫ﻋﺪم‬ ‫ﺣﺎﻻت‬ ‫أو‬ ‫اﻟﺪﻋﺎﺋﯿﺔ‬ ‫اﻟﺤﺎﻻت‬ ‫ﻓﻲ‬ ‫ﯾﺴﺘﺨﺪم‬ ‫اﻷﺳﻔﻞ‬‫أﺧﺮى‬ ‫ﻟﺤﺎﻻت‬ ‫أو‬ ‫اﻟﻤﻮﻗﻊ‬.
‫اﻟﺼﻔﺤﺔ‬ ‫ﺑﺪاﺧﻞ‬ ‫ﻧﺸﺎء‬ ‫اﻟﺬي‬ ‫اﻟﻤﻜﺎن‬ ‫إﻟﻰ‬ ‫وﺗﺤﺮﯾﻜﮫ‬ ‫ﺑﮫ‬ ‫اﻹﻣﺴﺎك‬ ‫ﯾﻤﻜﻨﻨﺎ‬. Panel ‫اﻟﺪرس‬‫اﻟﺮاﺑﻊ‬:
‫اﻟﺨﺎﻣﺲ‬ ‫اﻟﺪرس‬:‫ﯾﺤﺘﻮي‬ ‫اﻷﻟﻮان‬ ‫ﺣﺎﻣﻞ‬ ‫ﻟﺪﯾﻨﺎ‬ ‫ﯾﻈﮭﺮ‬ ‫اﻟﺰر‬ ‫ﻋﻠﻰ‬ ‫اﻟﻀﻐﻂ‬ ‫وﻋﻨﺪ‬ ‫ﻧﺺ‬ ‫ﺻﻨﺪوق‬ ‫ﺑﺠﺎﻧﺐ‬ ‫ﯾﻮﺟﺪ‬ ‫أﻣﺮ‬ ‫زر‬
‫ﻋﻠﻰ‬٢١٦‫اﻷﻣﺮ‬ ‫زر‬ ‫ﺑﺠﺎﻧﺐ‬ ‫اﻟﻠﻮن‬ ‫وﯾﻈﮭﺮ‬ ‫اﻟﻨﺺ‬ ‫ﺻﻨﺪوق‬ ‫ﻓﻲ‬ ‫رﻣﺰه‬ ‫ﻟﺪﯾﻨﺎ‬ ‫ﻓﯿﻈﮭﺮ‬ ‫ﻷﻟﻮان‬ ‫ا‬ ‫اﺣﺪ‬ ‫اﺧﺘﯿﺎر‬ ‫ﯾﻤﻜﻦ‬ ‫ﻟﻮن‬.
‫اﻟﺴﺎدس‬ ‫اﻟﺪرس‬:‫رﺳﺎﻟﺔ‬ ‫أو‬ ‫أﯾﻤﯿﻞ‬ ‫إرﺳﺎل‬ ‫ﻋﻨﺪ‬‫وﺟﻌﻠﮫ‬ ‫اﻟﺨﻂ‬ ‫ﺗﻠﻮﯾﻦ‬ ‫واﻟﻰ‬ ‫رﻣﻮز‬ ‫وإﺿﺎﻓﺔ‬ ‫اﻟﺨﻂ‬ ‫ﺗﻌﺪﯾﻞ‬ ‫إﻟﻰ‬ ‫ﻧﺤﺘﺎج‬
‫ﻟﻠﺘﺤﻜﻢ‬ ‫ﺻﻔﺤﺘﻨﺎ‬ ‫إﻟﻰ‬ ‫اﻟﻨﺼﻮص‬ ‫ﻣﺤﺮر‬ ‫إﺿﺎﻓﺔ‬ ‫ھﻨﺎ‬ ‫ﻓﯿﻤﻜﻨﻨﺎ‬ ‫اﻷﺧﺮى‬ ‫اﻟﺘﻨﺴﯿﻘﺎت‬ ‫ﻣﻦ‬ ‫واﻟﻌﺪﯾﺪ‬ ‫اﻟﺨﻂ‬ ‫ﻧﻤﻂ‬ ‫وﺗﻐﯿﺮ‬ ‫ﻣﺎﺋﻼ‬ً
‫اﻟﺮﺳﺎﻟﺔ‬ ‫إرﺳﺎل‬ ‫ﻗﺒﻞ‬ ‫اﻟﺨﻂ‬ ‫ﺑﺘﻨﺴﯿﻖ‬.
‫اﻟﺴﺎﺑﻊ‬ ‫اﻟﺪرس‬:‫ﻓﯿﻤﻜ‬ ‫اﻟﺨﻂ‬ ‫ﺗﻌﺪﯾﻞ‬ ‫إﻟﻰ‬ ‫ﻧﺤﺘﺎج‬ ‫رﺳﺎﻟﺔ‬ ‫أو‬ ‫أﯾﻤﯿﻞ‬ ‫إرﺳﺎل‬ ‫ﻋﻨﺪ‬‫ﻣﺎﺋﻼ‬ ‫أو‬ ‫ﻋﺮﯾﻀﺎ‬ ‫اﻟﺨﻂ‬ ‫ﻧﺠﻌﻞ‬ ‫إن‬ ‫ھﻨﺎ‬ ‫ﻨﻨﺎ‬
‫ﺑﻨﺎ‬ ‫ﺧﺎص‬ ‫ﻧﺼﻮص‬ ‫ﻣﺤﺮر‬ ‫إﻧﺸﺎء‬ ‫ﻋﺒﺮ‬ ‫ﻧﺸﺎء‬ ‫اﻟﺘﻲ‬ ‫اﻟﻌﻨﺎﺻﺮ‬ ‫ﺑﺈظﮭﺎر‬ ‫واﻟﺘﺤﻜﻢ‬ ‫ﻓﻘﻂ‬،‫ﻣﺤﺮر‬ ‫إﺿﺎﻓﺔ‬ ‫ھﻨﺎ‬ ‫ﻓﯿﻤﻜﻨﻨﺎ‬
‫اﻟﺮﺳﺎﻟﺔ‬ ‫إرﺳﺎل‬ ‫ﻗﺒﻞ‬ ‫اﻟﺨﻂ‬ ‫ﺑﺘﻨﺴﯿﻖ‬ ‫ﻟﻠﺘﺤﻜﻢ‬ ‫ﺻﻔﺤﺘﻨﺎ‬ ‫إﻟﻰ‬ ‫اﻟﻨﺼﻮص‬.
‫اﻟﺜﺎﻣﻦ‬ ‫اﻟﺪرس‬:‫ﻣﻌﯿ‬ ‫أﻣﺮ‬ ‫إرﺳﺎل‬ ‫ﺗﻨﺒﯿﮫ‬ ‫رﺳﺎﻟﺔ‬ ‫أو‬ ‫اﻟﺒﯿﺎﻧﺎت‬ ‫إرﺳﺎل‬ ‫ﺗﺄﻛﯿﺪ‬ ‫رﺳﺎﻟﺔ‬‫اﻟﻤﺨﺪم‬ ‫إﻟﻰ‬ ‫ﻦ‬.
‫اﻟﺘﺎﺳﻊ‬ ‫اﻟﺪرس‬:‫ﻓﻲ‬ ‫ﻓﻘﻂ‬ ‫أرﻗﺎم‬ ‫إدﺧﺎل‬ ‫ﻣﻦ‬ ‫اﻟﺘﺤﻘﻖ‬ ‫ﯾﻘﻮم‬ ‫ﺣﯿﺚ‬ ‫ﺑﺘﺤﺪﯾﺪھﺎ‬ ‫ﻧﻘﻮم‬ ‫ﻧﺤﻦ‬ ‫ﻗﯿﻢ‬ ‫إدﺧﺎل‬ ‫ﻣﻦ‬ ‫اﻟﺘﺤﻘﻖ‬ ‫ﻋﻨﺎﺻﺮ‬
‫ﯾﺴﻤﺢ‬ ‫وﻟﻦ‬ ‫ﻓﻘﻂ‬ ‫ﺻﻐﯿﺮة‬ ‫ﺣﺮوف‬ ‫إدﺧﺎل‬ ‫ﻣﻦ‬ ‫أﯾﻀﺎ‬ ‫واﻟﺘﺤﻘﻖ‬ ‫اﻷرﻗﺎم‬ ‫ﺳﻮا‬ ‫ﺷﻲء‬ ‫أي‬ ‫إدﺧﺎل‬ ‫ﯾﻘﺒﻞ‬ ‫وﻟﻦ‬ ‫اﻷول‬ ‫اﻟﺼﻨﺪوق‬
‫ﻋﻤﻠﯿﺔ‬ ‫إدﺧﺎل‬ ‫ﻣﻦ‬ ‫واﻟﺘﺤﻘﻖ‬ ‫اﻟﺼﻐﯿﺮة‬ ‫اﻟﺤﺮوف‬ ‫ﺳﻮا‬ ‫ﺑﺈدﺧﺎل‬‫رﯾﺎﺿﯿﺔ‬ ‫ﻋﻤﻠﯿﺔ‬ ‫إدﺧﺎل‬ ‫ﺳﻮا‬ ‫ﯾﺴﻤﺢ‬ ‫وﻟﻦ‬ ‫رﯾﺎﺿﯿﺔ‬.

‫اﺟﺎﻛﺲ‬ ‫ﻣﻊ‬ ‫اﻟﺒﺪاﯾﺔ‬:
‫ﺗﻌرﯾﻔﮭﺎ‬:
AJAX‫اﺧﺗﺻﺎر‬‫ﻟﻌﺑﺎرة‬Asynchronous JavaScript And XML.
‫اﺟﺎﻛﺲ‬ ‫ﺗﺎرﯾﺦ‬:
‫ﺑﺘﺎرﯾﺦ‬ ‫ﻣﻘﺎﻟﺔ‬ ‫ﻓﻲ‬ ‫ﻣﺮة‬ ‫أول‬ ‫ظﮭﺮ‬ ‫اﺟﺎﻛﺲ‬ ‫ﻣﺼﻄﻠﺢ‬١٨‫ﻓﺒﺮاﯾﺮ‬٢٠٠٥‫و‬ ‫ﺗﻘﻨﯿﺎت‬ ‫ﻣﺠﻤﻮﻋﺔ‬ ‫وﺻﻒ‬ ‫وﻗﺪ‬ ‫أﻣﺮﯾﻜﻲ‬ ‫ﻟﻜﺎﺗﺐ‬
‫ﺟﻮﺟﻞ‬ ‫ﻗﺒﻞ‬ ‫ﻣﻦ‬ ‫اﺳﺘﺨﺪﻣﺖ‬ ‫أﺳﺎﻟﯿﺐ‬GOOGLE‫اﻟﻤﻮﻗﻊ‬ ‫ﻣﻊ‬ ‫اﻟﺘﻌﺎﻣﻞ‬ ‫ﻣﻦ‬ ‫اﻟﻤﺴﺘﺨﺪم‬ ‫ﺗﻤﻜﻦ‬ ‫أرث‬ ‫ﺟﻮﺟﻞ‬ ‫ﻓﻲ‬
‫ﺑﺮاﻣﺞ‬ ‫ﺗﺸﺒﮫ‬ ‫ﺑﻄﺮﯾﻘﺔ‬ ‫اﻹﻟﻜﺘﺮوﻧﻲ‬‫اﻟﻤﺴﺘﺨﺪم‬ ‫ﯾﻘﻮم‬ ‫ﺣﯿﺚ‬ ، ‫اﻟﺤﺎﺳﻮب‬‫ﺑﺎﻟﻘﯿﺎم‬‫واﺣﺪة‬ ‫ﺻﻔﺤﺔ‬ ‫ﺧﻼل‬ ‫ﻣﻦ‬ ‫ﺑﺄﻋﻤﺎﻟﮫ‬.،‫ﻟﻠﺘﺬﻛﯿﺮ‬
‫اﻟﻤﻘﺎﻟﺔ‬ ‫ظﮭﻮر‬ ‫ﻗﺒﻞ‬ ‫ﻣﻮﺟﻮدة‬ ‫ﻛﺎﻧﺖ‬ ‫اﻟﺘﻘﻨﯿﺔ‬ ‫ھﺬه‬ ‫ﻓﻲ‬ ‫اﻟﻤﺴﺘﻌﻤﻠﺔ‬ ‫اﻷدوات‬ ‫ﻓﺈن‬.‫ﻓﻔﻲ‬٢٠٠١،‫اﻷﻣﺮ‬ ‫ظﮭﺮ‬XMLHttp
‫ﻣﻜﺘﺒﺔ‬ ‫داﺧﻞ‬MSXML)‫ﺻ‬ ‫اﻟﺘﻲ‬ ‫اﻟﻤﻜﺘﺒﺔ‬‫ﻤ‬‫اﻟﻤﺘﺼﻔﺢ‬ ‫ﻟﺪﻋﻢ‬ ‫اﻟﺒﺪء‬ ‫ﻓﻲ‬ ‫ﻤﺖ‬‫إﻛﺴﺒﻠﻮرر‬ ‫اﻧﺘﺮﻧﺖ‬‫اﻹﺻﺪار‬٥.(‫وظﮭﺮ‬
‫ﺑﺎﺳﻢ‬ ‫ﻟﮫ‬ ‫ﻣﻜﺎﻓﺊ‬XMLHttpRequest‫اﻷﺧﺮى‬ ‫اﻟﻤﺘﺼﻔﺤﺎت‬ ‫ﺛﻢ‬ ‫وﻣﻦ‬ ‫ﻣﻮزﯾﻼ‬ ‫ﻣﺘﺼﻔﺢ‬ ‫ﻋﻠﻰ‬.
‫اﺟﺎﻛﺲ‬ ‫ﻣﺴﺘﻘﺒﻞ‬:
‫اﻟﺒﺮﻣﺠﯿﺎت‬ ‫ﻋﺎﻟﻢ‬ ‫ﺳﯿﺘﺤﻮل‬ ‫أﻧﮫ‬ ‫ﯾﻌﺘﻘﺪون‬ ‫اﻟﻜﺜﯿﺮ‬ ‫ھﻨﺎك‬‫إﻟﻰ‬‫ا‬ ‫اﻟﺒﺮاﻣﺞ‬ ‫اﺳﺘﺨﺪام‬ ‫ﯾﻤﻜﻨﻚ‬ ‫اﻧﮫ‬ ‫ﺑﻤﻌﻨﻲ‬ ‫اﻟﻮﯾﺐ‬‫ﻣﻦ‬ ‫ﻟﻤﺨﺘﻠﻔﺔ‬
‫ﻣﻠﻔﺎﺗﻚ‬ ‫ﺗﺤﻮﯾﻞ‬ ‫ﻣﺜﻞ‬ ‫اﻟﻤﺸﻮار‬ ‫ﺑﺪأت‬ ‫ﻛﺜﯿﺮة‬ ‫ﻣﻮاﻗﻊ‬ ‫وھﻨﺎك‬ ‫اﻟﻤﺘﺼﻔﺢ‬ ‫ﺧﻼل‬‫إﻟﻰ‬، ‫اﻟﻤﺘﺼﻔﺢ‬ ‫ﺧﻼل‬ ‫ﻣﻦ‬ ‫ﻣﺨﺘﻠﻔﺔ‬ ‫ﺻﯿﻎ‬
‫ﻗﺎل‬ ‫ﻓﺒﻌﻀﮭﻢ‬‫إن‬‫ﻣﻜﺘﺐ‬ ‫ﺳﻄﺢ‬ ‫ﺗﻄﺒﯿﻘﺎت‬ ‫أﺻﺒﺤﺖ‬ ‫ﺑﻞ‬ ‫اﻵن‬ ‫ﺑﻌﺪ‬ ‫ﺻﻔﺤﺎت‬ ‫ﺗﻌﺪ‬ ‫ﻟﻢ‬ ‫اﻟﻮﯾﺐ‬ ‫ﺗﻄﺒﯿﻘﺎت‬‫ﺣﻘﯿﻘﯿﺔ‬.
‫اﻟﺒﺪء‬:
‫ﺻﻔ‬ ‫ﻟﻤﻨﺢ‬ ‫اﻧﺘﺸﺎرا‬ ‫اﻷﻛﺜﺮ‬ ‫اﻟﺘﻘﻨﯿﺔ‬ ‫اﻟﻤﺼﻮر‬ ‫ﻛﺘﺎﺑﻨﺎ‬ ‫ﻓﻲ‬ ‫ﺳﻨﺘﻌﻠﻢ‬ً‫اﻟﻮب‬ ‫ﻣﻮاﻗﻊ‬ ‫ﺤﺎت‬‫ﻋﺎﻟﻲ‬ ‫أداء‬‫وﺟﺎذﺑﯿﺔ‬‫ﻛﺒﯿﺮة‬،‫اﻋﺘﻤﺪ‬
‫دراﺳ‬ ‫ﻟﺠﻌﻞ‬ ‫اﻟﺘﻘﻨﯿﺔ‬ ‫ھﺬه‬ ‫ﻣﺤﺘﻮﯾﺎت‬ ‫ﺷﺮح‬ ‫ﻓﻲ‬ ‫اﻟﺼﻮر‬ ‫ﻋﻠﻰ‬ ‫ﻛﺒﯿﺮا‬ ‫اﻋﺘﻤﺎدا‬ ‫اﻟﻜﺘﺎب‬ ‫ھﺬا‬ً ً‫ﺘﮫ‬‫وراﺣﺔ‬ ‫ﺳﮭﻮﻟﺔ‬ ‫أﻛﺜﺮ‬
‫ﻧﯿﺖ‬ ‫اﻟﺪوت‬ ‫ﺑﯿﺌﺔ‬ ‫ﯾﺴﺘﺨﺪﻣﻮن‬ ‫اﻟﺬﯾﻦ‬ ‫اﻟﻤﻮاﻗﻊ‬ ‫ﻣﺒﺮﻣﺠﻲ‬ ‫ﻣﻦ‬ ‫اﻷﻛﺒﺮ‬ ‫اﻟﻌﺪد‬ ‫اﻟﻜﺘﺎب‬ ‫ھﺬا‬ ‫ﻣﻦ‬ ‫ﯾﺴﺘﻔﺎد‬ ‫إن‬ ‫ﻓﺄﺗﻤﻨﻰ‬ ‫ﻟﻠﻤﺘﻌﻠﻢ‬
‫ﻋﻤﻠﮭﻢ‬ ‫ﻓﻲ‬.
‫ﻧﻘﻮم‬ AJAX Extensions ‫وھﻲ‬ ‫اﺟﺎﻛﺲ‬ ‫ﻓﻲ‬ ‫اﻷﺳﺎﺳﯿﺔ‬ ‫اﻟﻌﻨﺎﺻﺮ‬ Visual Studio 2008 ‫ﻓﻲ‬ ‫ﻟﺪﯾﻨﺎ‬ ‫ﯾﻜﻮن‬
‫ﻋﻨﺎﺻﺮ‬ ‫ﻣﺠﻤﻮﻋﺔ‬ ‫ﻋﻦ‬ ‫ﻋﺒﺎرة‬ ‫ھﻲ‬ AJAX Control Toolkit ‫وھﻲ‬ ‫أﺧﺮى‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫ﺑﺈﺿﺎﻓﺔ‬
‫ﻣﻦ‬ ‫اﻟﻌﺪﯾﺪ‬ ‫ﺑﺘﻄﺒﯿﻖ‬ ‫اﻟﻘﯿﺎم‬ ‫ﻟﻨﺎ‬ ‫ﺗﺘﯿﺢ‬‫اﺟﺎﻛﺲ‬ ‫ﺣﺮﻛﺎت‬‫ﺑﺸﻜﻞ‬ ‫اﻟﻌﻨﺎﺻﺮ‬ ‫ﺗﻠﻚ‬ ‫ﺗﺤﺪﯾﺚ‬ ‫وﯾﺘﻢ‬ ‫اﻟﻮب‬ ‫ﺻﻔﺤﺔ‬ ‫ﻋﻠﻰ‬
Microsoft ‫دوري‬‫ﺷﺮﻛﺔ‬ ‫ﻗﺒﻞ‬ ‫ﻣﻦ‬
Microsoft Visual Studio 2008 ‫ﺗﻨﺼﯿﺐ‬ ‫ﻋﻨﺪ‬ ‫ﺗﻮﺟﺪ‬ ‫اﻟﺘﻲ‬ ‫اﻷﺳﺎﺳﯿﺔ‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺎﺻﺮ‬
‫اﻹ‬ ‫اﻷدوات‬ ‫ﺗﻨﺼﯿﺐ‬‫ﺿﺎﻓﯿﺔ‬‫اﺟﺎﻛﺲ‬ ‫ﻟﺘﻘﻨﯿﺔ‬‫ﻧﯿﺖ‬ ‫اﻟﺪوت‬ ‫ﺑﯿﺌﺔ‬ ‫ﺿﻤﻦ‬
AJAX Control Toolkit

‫اﻹﺿﺎﻓﯿﺔ‬‫دوت‬ ‫ﺑﯿﺌﺔ‬ ‫ﺿﻤﻦ‬‫ﻧﺖ‬: AJAX Control Toolkit ‫ﻧﻘﻮم‬‫ﺑﺈﺗﺒﺎع‬‫اﻟﺘﺎﻟﯿﺔ‬ ‫اﻟﺨﻄﻮات‬‫ﻋﻨﺎﺻ‬ ‫ﻟﺘﻨﺼﯿﺐ‬‫ﺮ‬
‫اﻟﺘﺎﻟﻲ‬ ‫اﻟﺮاﺑﻂ‬ ‫ﻣﻦ‬ ‫اﻹﺿﺎﻓﯿﺔ‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫ﺑﺘﻨﺰﯾﻞ‬ ‫ﻗﻢ‬):‫ﻧﯿﺖ‬ ‫اﻟﺪوت‬ ‫ﻣﺠﻠﺪ‬ ‫ﺿﻤﻦ‬ ‫اﻟﻌﻨﺎﺻﺮ‬ ‫ﺑﺘﻨﺰﯾﻞ‬ ‫ﻗﻢ‬٢٠٠٨(
http://www.4shared.com/file/110409699/453ec60e/AjaxControlToolkitSource.html
‫اﺗ‬‫اﻟﺘﻨﺼﯿﺐ‬ ‫ﺑﻌﺪ‬ ‫اﻟﺘﺎﻟﯿﺔ‬ ‫اﻟﺨﻄﻮات‬ ‫ﺒﻊ‬:
‫اﻟﺘﺎﻟﯿﺔ‬ ‫اﻟﺨﻄﻮات‬ ‫وﻧﺘﺒﻊ‬: Visual Studio 2008 ‫ﺑﻔﺘﺢ‬ ‫ﻧﻘﻮم‬ ٢–

٣-
Control Toolkit ٤-‫اﻟﺼ‬ ‫ﻓﻲ‬ ‫اﻟﻤﺒﯿﻦ‬ ‫اﻟﻤﻜﺎن‬ ‫ﻓﻲ‬ ‫اﻟﻌﻨﺎﺻﺮ‬ ‫اﺳﻢ‬ ‫ﻛﺘﺎﺑﺔ‬ ‫ﺑﻌﺪ‬‫اﻟﺠﺪﯾﺪة‬ ‫اﻟﻌﻨﺎﺻﺮ‬ ‫ﺑﺈﺿﺎﻓﺔ‬ ‫ﻧﻘﻮم‬ ‫ﻮرة‬

٥–‫اﺳﺘﻌﺮاض‬ ‫ﻧﺨﺘﺎر‬
٦–‫ﻓﺘﺢ‬ ‫ﻧﺨﺘﺎر‬‫اﻟﺼﻮرة‬ ‫ﻓﻲ‬ ‫اﻟﻤﺒﯿﻦ‬ ‫اﻟﻤﺠﻠﺪ‬‫ﻓﯿﮫ‬ ‫ﺑﺤﻔﻈﮫ‬ ‫ﻗﻤﻨﺎ‬ ‫اﻟﺬي‬ ‫ﺑﺎﻟﻤﻜﺎن‬ ‫وﺳﯿﻜﻮن‬
٧–‫اﻟﺠﺪﯾﺪة‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫ﺗﺤﺘﻮي‬ ‫اﻟﺘﻲ‬ ‫اﻟﻤﻜﺘﺒﺔ‬ ‫اﻟﻤﺒﯿﻦ‬ ‫اﻟﻤﺠﻠﺪ‬ ‫ﻣﻦ‬ ‫ﻧﺨﺘﺎر‬

٨–‫اﻟﻤﻜﺘﺒﺔ‬ ‫ﻧﺨﺘﺎر‬

٩–‫ﻣﻮاﻓﻖ‬ ‫ﻧﺨﺘﺎر‬
‫اﻟﺠﺪﯾﺪة‬ AJAX Control Toolkit ‫ﻋﻨﺎﺻﺮ‬

‫و‬ ‫اﻟﺠﺪﯾﺪة‬ ‫اﻟﻌﻨﺎﺻﺮ‬ ‫إدراج‬ ‫ﻓﻲ‬ ‫ﻧﺠﺤﺖ‬ ‫ﻟﻘﺪ‬‫ﻋ‬ ‫ﻟﻜﻞ‬‫ﺑﮫ‬ ‫ﯾﻘﻮم‬ ‫ﻣﻌﯿﻦ‬ ‫ﻋﻤﻞ‬ ‫اﻟﺠﺪﯾﺪة‬ ‫اﻟﻌﻨﺎﺻﺮ‬ ‫ﻣﻦ‬ ‫ﻨﺼﺮ‬،‫ﯾﻤﺘﺎز‬ ‫ﻋﻨﺼﺮ‬ ‫وﻛﻞ‬
‫ﻏﯿﺮه‬ ‫ﻋﻦ‬‫ﺑﺨﺼﺎﺋﺺ‬‫ﺗﺎﺑﻌﻮﻧﺎ‬ ‫ﻣﻨﻔﺼﻠﺔ‬ ‫ﺗﻤﺎرﯾﻦ‬ ‫ﻓﻲ‬ ‫ﺑﺴﺮدھﺎ‬ ‫ﺳﻨﻘﻮم‬ ‫ﻣﺨﺘﻠﻔﺔ‬..

‫اﻟﺪرس‬‫اﻷول‬
‫وظﯿﻔﺔ‬‫اﻟﺪرس‬‫ﻧﻘﻮم‬ ‫ﻧﺤﻦ‬ ‫وب‬ ‫ﺻﻔﺤﺔ‬ ‫ﻣﻦ‬ ‫ﺟﺰء‬ ‫ﺗﺤﺪﯾﺚ‬ ‫ھﻲ‬ ‫ﻟﺪﯾﻨﺎ‬ ‫اﻷول‬‫ﺑﺎﺧﺘﯿﺎر‬‫ﻋﻨﺼ‬‫ﺮ‬‫ﺗﺤﺪﯾﺚ‬ ‫ﻟﯿﺘﻢ‬ ‫ﻣﺤﺪد‬
‫ﺑﯿﺎﻧﺎﺗﮫ‬‫ﺗﺤﺪﯾﺚ‬ ‫دون‬‫اﻹرﺳﺎل‬ ‫زر‬ ‫ﻋﻠﻰ‬ ‫اﻟﻀﻐﻂ‬ ‫ﻋﻨﺪ‬ ‫اﻟﺼﻔﺤﺔ‬ ‫ﻛﺎﻣﻞ‬.
‫ﺑﺪاﯾﺔ‬‫ﯾﺠﺐ‬‫إن‬‫اﺟﺎﻛﺲ‬ ‫ﺗﻘﻨﯿﺔ‬ ‫ﺗﻄﺒﯿﻖ‬ ‫ﺳﯿﺘﻢ‬ ‫اﻟﺘﻲ‬ ‫اﻟﺼﻔﺤﺎت‬ ‫ﻛﺎﻓﺔ‬ ‫ﻓﻲ‬ ‫اﻷﺳﺎﺳﻲ‬ ‫اﻻﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬ ‫وﺿﻊ‬ ‫ﯾﺘﻢ‬
ScriptManager ‫اﻟﺘﺎﻟﻲ‬ ‫اﻟﻌﻨﺼﺮ‬ ‫وھﻮ‬ ‫ﻋﻠﯿﮭﺎ‬:
‫اﻟﺘﺎﻟﯿﺔ‬ ‫اﻟﺼﻮرة‬ ‫ﻓﻲ‬ ‫ﻛﻤﺎ‬ ‫اﻟﺼﻔﺤﺔ‬ ‫ﺟﺴﻢ‬ ‫أﺳﻔﻞ‬ ‫وﺿﻌﮫ‬ ‫وﯾﺘﻢ‬:
‫ﺟﺴﻢ‬ ‫ﻓﻲ‬ ‫ﻟﺪﯾﻨﺎ‬ ‫ﻟﯿﻈﮭﺮ‬‫اﻟﺘﺼﻤﯿﻢ‬ ‫وﺿﻊ‬ ‫ﻓﻲ‬ ‫اﻟﻔﺎرﻏﺔ‬ ‫اﻟﺼﻔﺤﺔ‬

‫ھﺬا‬ ‫ﻓﻲ‬‫اﻟﺪرس‬‫وﻧﺤﺘﺎج‬ ‫وب‬ ‫ﺻﻔﺤﺔ‬ ‫ﻣﻦ‬ ‫ﺟﺰء‬ ‫ﺗﺤﺪﯾﺚ‬ ‫ﻛﯿﻔﯿﺔ‬ ‫ﺳﻮﯾﺔ‬ ‫ﺳﻨﺘﻌﻠﻢ‬‫اﻟﺘﺎﻟﯿﺔ‬ ‫اﻟﻌﻨﺎﺻﺮ‬ ‫اﻟﻰ‬‫اﻟﻤﻮﺿﺤﺔ‬‫ﻓﻲ‬
‫اﻟﺼﻮرة‬
‫ﺑﯿﺰك‬ ‫ﻓﯿﺠﻮل‬ ‫ﻛﻮد‬ ‫ﻟﻜﺘﺎﺑﺔ‬‫ﻣﻦ‬ ‫ﻣﻌﺎﻟﺠﺘﮫ‬ ‫ﯾﺘﻢ‬ Page Load ‫ﺣﺪث‬ ‫ﻋﻠﻰ‬ ‫ﻣﺮﺗﯿﻦ‬ ‫اﻟﺼﻔﺤﺔ‬ ‫داﺧﻞ‬ ‫ﻓﻲ‬ ‫ﺑﺎﻟﻀﻐﻂ‬ ‫ﻧﻘﻮم‬
‫اﻟﻤﺨﺪم‬ ‫ﻗﺒﻞ‬‫اﻟﺘﺎرﯾ‬ ‫إظﮭﺎر‬ ‫وظﯿﻔﺘﮫ‬‫اﻟﺤﺎوي‬ ‫اﻟﻌﻨﺼﺮ‬ ‫داﺧﻞ‬ ‫واﻟﻮﻗﺖ‬ ‫ﺦ‬‫ﻛﺎﻟﺘﺎﻟﻲ‬ ‫ﯾﻜﻮن‬ ‫واﻟﻜﻮد‬:
‫ﺑﯿﺰك‬ ‫ﻓﯿﺠﻮل‬ ‫ﻓﻲ‬ ‫اﻟﻜﻮد‬:
‫ﺷﺎرب‬ ‫ﺳﻲ‬ ‫ﻓﻲ‬ ‫اﻟﻜﻮد‬:
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString();
}
}
‫ﻋﻨﺎﺻﺮ‬ ‫ﻣﻦ‬ ‫وھﻮ‬ Update Panel ‫اﻟﻌﻨﺎﺻﺮ‬ ‫ﺗﻨﺰﯾﻞ‬ ‫ﺑﻌﺪ‬‫اﻷﺳﺎﺳﯿﺔ‬‫اﻟﻌﻨﺼﺮ‬ ‫ﺑﺎﺳﺘﺨﺪام‬ ‫ﻧﻘﻮم‬ ‫ﻧﯿﺖ‬ ‫اﻟﺪوت‬ ‫ﺑﯿﺌﺔ‬ ‫ﻓﻲ‬
‫اﻟﺼﻮرة‬ ‫ﻓﻲ‬ ‫اﻟﻤﺒﯿﻦ‬ Ajax Extensions
‫إدراج‬ ‫ﺑﻌﺪ‬‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬‫اﻟﺘﺼﻤﯿﻢ‬ ‫ﺻﻔﺤﺔ‬ ‫ﻓﻲ‬،‫داﺧﻞ‬ ‫ﺗﺤﺪﯾﺜﮫ‬ ‫ﻧﻮد‬ ‫اﻟﺬي‬ ‫اﻟﻌﻨﺼﺮ‬ ‫ﺑﻮﺿﻊ‬ ‫ﻧﻘﻮم‬ ‫ھﻨﺎ‬‫ﻋﻨﺼﺮ‬
‫اﺟﺎﻛﺲ‬‫و‬ ‫اﻟﻤﺨﺪم‬ ‫ﻗﺒﻞ‬ ‫ﻣﻦ‬ ‫ﻣﺤﺘﻮﯾﺎﺗﮫ‬ ‫ﺗﺤﺪﯾﺚ‬ ‫ﻟﯿﺘﻢ‬‫ﺧﺎرج‬ ‫ﺗﻜﻮن‬ ‫اﻟﺘﻲ‬ ‫ﺗﺤﺪﯾﺚ‬ ‫ﺑﺪون‬ ‫اﻷﺧﺮى‬ ‫اﻟﻌﻨﺎﺻﺮ‬ ‫ﺗﺮك‬‫ﻋﻨﺼﺮ‬
‫اﻟﻤﺴﺘﺨﺪم‬ ‫اﺟﺎﻛﺲ‬

‫اﻟﺘﺎﻟﻲ‬ ‫ﻟﺪﯾﻨﺎ‬ ‫ﯾﻈﮭﺮ‬ ‫اﻟﺘﺸﻐﯿﻞ‬ ‫وﻋﻨﺪ‬:
‫اﻟﻤﺴﺘﺨﺪم‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬ ‫داﺧﻞ‬ ‫أﯾﻀﺎ‬،‫ﻓﻲ‬ ‫ﺳﻨﻘﻮم‬‫ﻣﺜﺎﻟﻨﺎ‬ Button ‫اﻹرﺳﺎل‬ ‫زر‬ ‫وﺿﻊ‬ ‫ﺗﻢ‬ ‫اﻟﺴﺎﺑﻘﺔ‬ ‫اﻟﻄﺮﯾﻘﺔ‬ ‫ﻓﻲ‬
‫ﺗﺤﺪﯾﺜﮫ‬ ‫اﻟﻤﺮاد‬ ‫اﻟﻌﻨﺼﺮ‬ ‫وﺑﺘﺤﺪﯾﺪ‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬ ‫داﺧﻞ‬ ‫ﻣﻦ‬ Button ‫ا‬‫ﻟﺘﺎﻟﻲ‬‫اﻹرﺳﺎل‬ ‫ﻋﻨﺼﺮ‬ ‫ﺑﺈﺧﺮاج‬
‫ﻛﻤﺎﯾﻠﻲ‬ ‫اﻟﻤﺴﺘﺨﺪم‬: Update Panel ‫ﻋﻨﺼﺮ‬ ‫ﺧﺼﺎص‬ ‫طﺮﯾﻖ‬ ‫ﻋﻦ‬

‫اﻟﻤﺴﺘﺨﺪم‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬ ‫داﺧﻞ‬ ‫اﻟﻤﻮﺟﻮد‬ Label2 ‫ﻟﻠﻌﻨﺼﺮ‬ ‫ﺗﺤﺪﯾﺚ‬ ‫ﻋﻤﻞ‬ ‫ﺳﯿﺘﻢ‬ ‫اﻟﺘﺸﻐﯿﻞ‬ ‫وﻋﻨﺪ‬
‫ﻧﺘﯿﺠﺔ‬ ‫ﻟﺪﯾﻨﺎ‬ ‫ﻟﯿﻜﻮن‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬ ‫ﺧﺎرج‬‫اﻟﺪرس‬‫ﻛﻤﺎﯾﻠﻲ‬: Button ‫اﻹرﺳﺎل‬ ‫ﻋﻨﺼﺮ‬ ‫وﺟﻮد‬ ‫ﻣﻊ‬
‫ﻧﮭﺎﯾﺔ‬‫اﻟﺪرس‬‫اﻷول‬‫ﻓﻲ‬‫اﺟﺎﻛﺲ‬

‫اﻟﺪرس‬‫اﻟﺜ‬‫ﺎﻧﻲ‬
‫اﻟﺼﻔﺤﺔ‬ ‫ﻧﻔﺲ‬ ‫ﻓﻲ‬ Update Panel ‫ﻋﺪة‬ ‫اﺳﺘﺨﺪام‬ ‫ﻋﺒﺮ‬ ‫اﻟﺼﻔﺤﺔ‬ ‫ﻓﻲ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫ﻋﺪة‬ ‫ﺑﯿﺎﻧﺎت‬ ‫ﺗﺤﺪﯾﺚ‬
‫اﻟﻤﺨﺪم‬ ‫إﻟﻰ‬ ‫ﻣﺤﺘﻮﯾﺎﺗﮭﺎ‬ ‫ﻹرﺳﺎل‬ Update Panel ‫ھﺬا‬ ‫ﻓﻲ‬‫اﻟﺪرس‬‫ﻣﻦ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫ﻋﺪة‬ ‫ﺑﺎﺳﺘﺨﺪام‬ ‫ﺳﻨﻘﻮم‬
‫ﻓﻲ‬ ‫اﻟﻤﺜﺎل‬ ‫ﺳﻨﺴﺘﺨﺪم‬‫اﻟﺪرس‬‫ھﺬا‬ ‫ﺗﻤﺮﯾﻨﻨﺎ‬ ‫ﺣﻞ‬ ‫وﻧﺘﺎﺑﻊ‬ ‫اﻷول‬:
‫اﻟﻣوﺟودة‬ ‫اﻟﻌﻧﺎﺻر‬ ‫ﺗﺣدﯾث‬ ‫ﺳﯾﺗم‬ ‫ﻓﺄﻧﮫ‬‫داﺧل‬ Always ‫ﻋﻠﻰ‬Update Mode ‫اﻟﺧﺎﺻﯾﺔ‬ ‫ﺗرك‬ ‫ﻋﻧد‬
، Button ‫زر‬ ‫ﻋﻠﻰ‬ ‫اﻟﻀﻐﻂ‬ ‫ﻋﻦ‬Update Panel2 ‫داﺧﻞ‬ ‫اﻟﻤﻮﺟﻮدة‬ ‫اﻟﻌﻨﺎﺻﺮ‬ ‫و‬ Update Panel1
‫وﻟﻦ‬ ‫ﻓﻘﻂ‬ Update Panel1 ‫ﻣﺤﺘﻮﯾﺎت‬ ‫ﺗﺤﺪﯾﺚ‬ ‫ﺳﯿﺘﻢ‬ ‫ﻓﺎﻧﮫ‬ Conditional ‫إﻟﻰ‬ ‫اﻟﺨﺎﺻﯿﺔ‬ ‫ﺗﻐﯿﺮ‬ ‫ﻋﻨﺪ‬ ‫وﻟﻜﻦ‬
.. ‫إﻻ‬‫ﺻﺮﯾﺢ‬ ‫ﺑﺸﻜﻞ‬ ‫ذﻟﻚ‬ ‫ﻋﻦ‬ ‫ﺑﺎﻟﺘﺼﺮﯾﺢ‬ ‫ﻗﻤﺖ‬ ‫إذا‬ Update Panel2 ‫ﻣﺤﺘﻮﯾﺎت‬ ‫ﺗﺤﺪﯾﺚ‬ ‫ﯾﺘﻢ‬
: Always -‫اﺳﺘﺨﺪام‬ ‫اﻟﺼﻮرة‬ ‫ﺗﻮﺿﺢ‬
: Conditional -‫اﺳﺘﺨﺪام‬ ‫اﻟﺼﻮرة‬ ‫ﺗﻮﺿﺢ‬

Update Panel2 ‫ﻧﺠﻌﻞ‬ ‫إن‬ ‫أﺧﺮى‬ ‫ﺑﻄﺮﯾﻘﺔ‬ ‫وﯾﻤﻜﻨﻨﺎ‬ ‫ﻓﻘﻂ‬ Update Panel1 ‫ﺗﺤﺪﯾﺚ‬ ‫ﺗﻢ‬ ‫اﻟﺴﺎﺑﻘﺔ‬ ‫اﻟﺼﻮرة‬ ‫ﻓﻲ‬
‫اﻷﺗﻲ‬ ‫ﺑﻌﻤﻞ‬ ‫ﺑﯿﺎﻧﺎﺗﮭﺎ‬ ‫ﺗﺘﺤﺪث‬:
‫اﻟﺘﺎﻟﻲ‬ ‫ﻟﻨﺎ‬ ‫ﯾﻈﮭﺮ‬ ‫اﻟﺘﺸﻐﯿﻞ‬ ‫وﻋﻨﺪ‬:
‫ﻋﻠﻰ‬ ‫اﻟﻀﻐﻂ‬ ‫ﺗﻘﻠﯿﻞ‬ ‫وﺑﺎﻟﺘﺎﻟﻲ‬ ‫وب‬ ‫ﺻﻔﺤﺔ‬ ‫ﻣﻦ‬ ‫ﺟﺰء‬ ‫ﺑﯿﺎﻧﺎت‬ ‫ﺗﺤﺪﯾﺚ‬ ‫ﻧﺮﯾﺪ‬ ‫ﻋﻨﺪﻣﺎ‬ Update Panel ‫اﺳﺘﺨﺪام‬ ‫ﻓﯿﻤﻜﻨﻨﺎ‬
‫ﻟﺪﯾﻨﺎ‬ ‫اﻟﻤﺨﺪم‬.
‫ﻧﮭﺎﯾﺔ‬‫اﻟﺪرس‬‫اﻟﺜﺎﻧﻲ‬‫ﻓﻲ‬‫اﺟﺎﻛﺲ‬

‫اﻟﺪرس‬‫اﻟﺜﺎﻟﺚ‬
‫اﻟﺴﻤﺎح‬ ‫وﻋﺪم‬ ‫اﻟﺮﻣﺎدي‬ ‫اﻟﻠﻮن‬ ‫إﻋﻄﺎﺋﮭﺎ‬ ‫ﻣﻊ‬ ‫اﻟﺼﻔﺤﺔ‬ ‫ﺑﺎﻗﻲ‬ ‫ﺗﻔﻌﯿﻞ‬ ‫وﯾﻠﻐﻲ‬‫ﺑﺎﻟﻀﻐﻂ‬ ‫اﻟﺼﻔﺤﺔ‬ ‫وﺳﻂ‬ ‫ﻓﻲ‬ ‫ﯾﻈﮭﺮ‬ Panel
‫ﺟﺪﯾﺪ‬ ‫ﻣﻦ‬ ‫اﻟﺼﻔﺤﺔ‬ ‫ﺗﻔﻌﯿﻞ‬ ‫ﻟﯿﺘﻢ‬Panel‫داﺧﻞ‬ ‫ﻋﻨﺼﺮ‬ ‫ﻋﻠﻰ‬ ‫ﺑﺎﻟﻀﻐﻂ‬ ‫ﯾﺴﻤﺢ‬ ‫ﻟﻜﻦ‬ ‫اﻟﺼﻔﺤﺔ‬ ‫إرﺟﺎء‬ ‫ﻓﻲ‬
: Default ‫ﺻﻔﺤﺔ‬ ‫ﻟﺘﺼﻤﯿﻢ‬ ‫اﻟﻌﺎﻣﺔ‬ ‫اﻟﺼﻮرة‬
‫اﻟﻌﻤﻞ‬ ‫ﻣﺤﯿﻂ‬ ‫ﺿﻤﻦ‬ ‫رﺋﯿﺴﯿﺔ‬ ‫ﺻﻔﺤﺔ‬ ‫ﻧﺪرج‬:
‫اﻟﺘﺎﻟﻲ‬ ‫ﺑﺪاﺧﻠﮭﺎ‬ ‫وﻧﻜﺘﺐ‬ ‫ﺷﯿﺖ‬ ‫ﺳﺘﺎﯾﻞ‬ ‫ﺻﻔﺤﺔ‬ ‫ﺑﺄدراج‬ ‫ﻧﻘﻮم‬:

‫اﻟﺴﺘﺎﯾﻞ‬ ‫ﻛﻮد‬‫ﺷﯿﺖ‬:
.modalBackground
}
background-color:Gray;
filter:alpha(opacity=70;(
opacity:0.7;
{
.modalPopup
}
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
{
: Default ‫ﺳﻮﯾﺎ‬ ‫ﻧﺒﯿﻦ‬‫ﺻﻮرة‬‫اﻟﻜ‬‫ﻟﻠﺼﻔﺤﺔ‬ ‫اﻟﺨﻠﻔﻲ‬ ‫ﻮد‬
‫ﻟﻠﺘﻤﺮﯾﻦ‬ ‫اﻟﻜﺎﻣﻞ‬ ‫اﻟﻜﻮد‬:
%@ Page Language=C# AutoEventWireup=true
CodeFile=Default.aspx.cs Inherits=_Default %

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd
html xmlns=http://www.w3.org/1999/xhtml
head runat=server
titleUntitled Page/title
link href=StyleSheet.css rel=stylesheet type=text/css
/
/head
body
form id=form1 runat=server
asp:ScriptManager ID=ScriptManager1 runat=server
/asp:ScriptManager
br /
asp:LinkButton ID=LinkButton1 runat=serverPlease click
/asp:LinkButtonbr /
br /
div
asp:Panel ID=Panel1 runat=server CssClass=modalPopup
Style=display: none Width=233px
p‫ﻣﺘﺄﻛﺪ‬ ‫اﻧﺖ‬ ‫/ھﻞ‬p
div align=center
asp:Button ID=OkButton runat=server Text=OK
PostBackUrl=~/Home.aspx /
asp:Button ID=CancelButton runat=server Text=Cancel
PostBackUrl=~/Default.aspx /
/div
/asp:Panel
br /
ajaxToolkit:ModalPopupExtender ID=ModalPopupExtender1
runat=server
TargetControlID=LinkButton1
PopupControlID=Panel1
BackgroundCssClass=modalBackground
DropShadow=true
OkControlID=OkButton
CancelControlID=CancelButton /
/div
/form
/body
/html
‫اﻻﻧﺘﮭﺎء‬ ‫ﻋﻨﺪ‬ ‫اﻷﺧﯿﺮ‬ ‫اﻟﺸﻜﻞ‬ ‫ﻟﺪﯾﻨﺎ‬ ‫ﯾﻈﮭﺮ‬:

‫ﻓﻲ‬ ‫اﻟﺜﺎﻟﺚ‬ ‫اﻟﺪرس‬ ‫ﻧﮭﺎﯾﺔ‬‫اﺟﺎﻛﺲ‬

‫اﻟﺪرس‬‫اﻟﺜﺎﻟﺚ‬
‫إﻟﻰ‬ ‫اﻟﺼﻔﺤﺔ‬ ‫ﺷﺮﯾﻂ‬ ‫إﻧﺰال‬ ‫ﺣﺘﻰ‬ ‫اﻷﻋﻠﻰ‬ ‫ﻓﻲ‬ ‫ﺛﺎﺑﺘﺎ‬ ‫وﯾﺒﻘﻰ‬ً ‫اﻟﺼﻔﺤﺔ‬ ‫ﯾﺴﺎر‬ ‫أو‬ ‫ﯾﻤﯿﻦ‬ ‫أﻋﻠﻰ‬ ‫ﻓﻲ‬ ‫ﯾﻈﮭﺮ‬ Panel
‫ﺗﺴ‬ ‫ﻋﺪم‬ ‫ﺣﺎﻻت‬ ‫أو‬ ‫اﻟﺪﻋﺎﺋﯿﺔ‬ ‫اﻟﺤﺎﻻت‬ ‫ﻓﻲ‬ ‫ﯾﺴﺘﺨﺪم‬ ‫اﻷﺳﻔﻞ‬‫أﺧﺮى‬ ‫ﻟﺤﺎﻻت‬ ‫أو‬ ‫اﻟﻤﻮﻗﻊ‬ ‫زوار‬ ‫دﺧﻮل‬ ‫ﺠﯿﻞ‬
‫اﻟﻌﺎﻣﺔ‬ ‫اﻟﺼﻔﺤﺔ‬‫ﻟﻠﺘﻤﺮﯾﻦ‬‫اﻟﯿﻤﯿﻦ‬ ‫ﻋﻠﻰ‬ ‫اﻟﺘﻤﺮﯾﺮ‬ ‫ﺷﺮﯾﻂ‬ ‫ﻟﺪﯾﻨﺎ‬ ‫ﻟﯿﻈﮭﺮ‬ ‫ﺑﺎﻟﻤﻌﻠﻮﻣﺎت‬ ‫اﻟﺼﻔﺤﺔ‬ ‫ﺑﻤﻞء‬ ‫ﻧﻘﻮم‬ ‫إن‬ ‫ﯾﺠﺐ‬
‫ﺣﻞ‬ ‫ﻓﻲ‬ ‫اﻟﻨﺘﺎﺋﺞ‬ ‫أﻓﻀﻞ‬ ‫ﻋﻠﻰ‬ ‫ﻟﻠﺤﺼﻮل‬‫اﻟﺪرس‬:
‫ﻛﻤﺎﯾﻠﻲ‬ ‫وﯾﻜﻮن‬ ‫اﻟﺼﻔﺤﺔ‬ ‫ﺟﺴﻢ‬ ‫إﻟﻰ‬: Panel ‫ﺑﺄدراج‬ ‫ﺳﻨﻘﻮم‬ ‫اﻟﺘﺎﻟﯿﺔ‬ ‫اﻟﺨﻄﻮة‬

Panel ‫ﻋﻠ‬ ‫ﯾﻈﮭﺮ‬‫إﺿﺎﻓﺔ‬ ‫ﺑﻌﺪ‬ ‫ﻛﻤﺎﯾﻠﻲ‬ ‫اﻟﺼﻔﺤﺔ‬ ‫ﺗﺼﻤﯿﻢ‬ ‫ﻰ‬
‫ﻛﻤﺎﯾﻠﻲ‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫اﺣﺪ‬ ‫ﻧﺴﺘﺨﺪم‬:
‫ﻟﻠﻌﻨﺼﺮ‬ ‫اﻟﺨﻠﻔﻲ‬ ‫اﻟﻜﻮد‬:

‫اﻟﺘﺎﻟﻲ‬ ‫ﻟﺪﯾﻨﺎ‬ ‫ﯾﻈﮭﺮ‬ ‫اﻻﻧﺘﮭﺎء‬ ‫وﻋﻨﺪ‬:
‫ﻣﻮﻗﻌﻨﺎ‬ ‫ﺻﻔﺤﺎت‬ ‫ﻟﺘﺼﻤﯿﻢ‬ ‫ﺑﮫ‬ ‫ﻧﺮﻏﺐ‬ ‫أﺧﺮ‬ ‫ﺷﻲء‬ ‫أي‬ ‫أو‬ ‫ﻓﻼﺷﺎت‬ ‫و‬ ‫ﺻﻮر‬ ‫ﻣﻦ‬ ‫ﻧﺮﯾﺪ‬ ‫ﻣﺎ‬ ‫وﺿﻊ‬ ‫ﺑﺈﻣﻜﺎﻧﻨﺎ‬ ‫ﻓﺎﻧﮫ‬ ‫ﻧﻌﻠﻢ‬ ‫وﻛﻤﺎ‬
‫ﻧﮭﺎﯾﺔ‬‫اﻟﺪرس‬‫ا‬‫ﻟﺜﺎﻟﺚ‬‫ﻓﻲ‬‫اﺟﺎﻛﺲ‬

‫اﻟﺪرس‬‫اﻟﺮاﺑﻊ‬
‫اﻟﺼﻔﺤﺔ‬ ‫ﺑﺪاﺧﻞ‬ ‫ﻧﺸﺎء‬ ‫اﻟﺬي‬ ‫اﻟﻤﻜﺎن‬ ‫إﻟﻰ‬ ‫وﺗﺤﺮﯾﻜﮫ‬ ‫ﺑﮫ‬ ‫اﻹﻣﺴﺎك‬ ‫ﯾﻤﻜﻨﻨﺎ‬ Panel
‫ﺻﻮرة‬‫ﻛﺎﻟﺘﺎﻟﻲ‬ ‫ﯾﻜﻮن‬ ‫اﻟﻮب‬ ‫ﺻﻔﺤﺔ‬:
‫اﻟﻤﺴﺘﺨﺪم‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬:

‫اﻟﺒﺮﻣﺠﻲ‬ ‫اﻟﻜﻮد‬‫اﻟﻮب‬ ‫ﺑﺼﻔﺤﺔ‬:
head id=Head1 runat=server
link href=StyleSheet.css rel=stylesheet type=text/css /
/head
body
asp:ScriptManager ID=ScriptManager1 runat=server /
div
ajaxToolkit:DragPanelExtender ID=DragPanelExtender1
runat=server TargetControlID=PanelContainer
DragHandleID=PanelHeader
/ajaxToolkit:DragPanelExtender
asp:Panel ID=PanelContainer runat=server
CssClass=dragContainer
asp:Panel ID=PanelHeader runat=server
CssClass=dragHeader
br /Header/asp:Panel
asp:Panel ID=PanelBody runat=server
CssClass=dragBody
br /
Onebr /br /
Twobr /br /
Threebr /br /
Four
/asp:Panel
/asp:Panel
/div
/form
script type=text/javascript
function setBodyHeightToContentHeight() {
document.body.style.height =
Math.max(document.documentElement.scrollHeight,
document.body.scrollHeight)+px;
}
setBodyHeightToContentHeight();
window.attachEvent('onresize', setBodyHeightToContentHeight);
/script
/body
/html
Style Sheet ‫ﺷﯿﺖ‬ ‫اﻟﺴﺘﺎﯾﻞ‬ ‫ﻣﻠﻒ‬

‫ﺷﯿﺖ‬ ‫اﻟﺴﺘﺎﯾﻞ‬ ‫ﻣﻠﻒ‬ ‫ﻛﻮد‬:
.dragContainer
}
background-color: #FFC0FF;
height: 282px;
width: 357px;
border-bottom-color: black;
{
.dragHeader
}
background-color: #8080FF;
height: 48px;
width: 358px;
{
.dragBody
}
background-color: #FFC0FF;
height: 213px;
width: 357px;
{
‫اﻟﻌﺎﻣﺔ‬ ‫اﻟﺼﻮرة‬‫ﻟﻤﻠﻔﺎت‬‫اﻟﺪرس‬:

‫ﻟﺪﯾﻨﺎ‬ ‫ﯾﻈﮭﺮ‬ ‫اﻟﺘﻨﻔﯿﺬ‬ ‫ﻋﻨﺪ‬:
‫ﻧﮭﺎﯾﺔ‬‫اﻟﺪرس‬‫ﻓﻲ‬ ‫اﻟﺮاﺑﻊ‬‫اﺟﺎﻛﺲ‬

‫اﻟﺪرس‬‫اﻟﺨﺎﻣﺲ‬
‫اﻟﻀ‬ ‫وﻋﻨﺪ‬ ‫ﻧﺺ‬ ‫ﺻﻨﺪوق‬ ‫ﺑﺠﺎﻧﺐ‬ ‫ﯾﻮﺟﺪ‬ ‫أﻣﺮ‬ ‫زر‬‫ﻋﻠﻰ‬ ‫ﯾﺤﺘﻮي‬ ‫اﻷﻟﻮان‬ ‫ﺣﺎﻣﻞ‬ ‫ﻟﺪﯾﻨﺎ‬ ‫ﯾﻈﮭﺮ‬ ‫اﻟﺰر‬ ‫ﻋﻠﻰ‬ ‫ﻐﻂ‬٢١٦‫ﻟﻮن‬
‫اﻷﻣﺮ‬ ‫زر‬ ‫ﺑﺠﺎﻧﺐ‬ ‫اﻟﻠﻮن‬ ‫وﯾﻈﮭﺮ‬ ‫اﻟﻨﺺ‬ ‫ﺻﻨﺪوق‬ ‫ﻓﻲ‬ ‫رﻣﺰه‬ ‫ﻟﺪﯾﻨﺎ‬ ‫ﻓﯿﻈﮭﺮ‬ ‫ﻷﻟﻮان‬ ‫ا‬ ‫اﺣﺪ‬ ‫اﺧﺘﯿﺎر‬ ‫ﯾﻤﻜﻦ‬
‫ﻟﻠﺘﻤﺮﯾﻦ‬ ‫اﻟﻌﺎم‬ ‫اﻟﺸﻜﻞ‬:
‫اﻟﻤﺴﺘﺨﺪم‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬ ‫ﺻﻮرة‬:
‫اﻟﻌﻤﻞ‬ ‫ﻟﻤﺤﯿﻂ‬ ‫اﻟﻌﺎم‬ ‫اﻟﺸﻜﻞ‬:

‫ﻓﻲ‬ ‫ﻧﺴﺘﺨﺪم‬‫درﺳﻨﺎ‬‫ﺟﺪا‬ ‫ﺟﻤﯿﻞ‬ ‫ﻋﻨﺼﺮ‬ ‫ھﺬا‬‫ﺑﺎﻧﻞ‬ ‫ﺑﺪاﺧﻞ‬ ‫ﺑﺈظﮭﺎره‬ ‫وﯾﻘﻮم‬ ‫اﻷﻟﻮان‬ ‫ﺣﺎﻣﻞ‬ ‫ﻣﻦ‬ ‫ﻟﻮن‬ ‫ﺑﺎﺧﺘﯿﺎر‬ ‫ﻟﻨﺎ‬ ‫ﯾﺴﻤﺢ‬
‫ﺧﺎرﺟﻲ‬‫اﻟﻌﻤﻞ‬ ‫إﺣﺪاث‬ ‫ﻷھﻢ‬ ‫ﺷﺮح‬ ‫اﻟﺼﻮرة‬ ‫ﻓﻲ‬:
‫اﻟﺒﺮﻣﺠﻲ‬ ‫اﻟﻜﻮد‬‫اﻟﻮب‬ ‫ﻟﺼﻔﺤﺔ‬:
%@ Register Assembly=AjaxControlToolkit
Namespace=AjaxControlToolkit TagPrefix=cc1 %
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
titleACT Color Picker COntrol/title
/head
body
asp:ScriptManager ID=ScriptManager1
runat=server/asp:ScriptManager

div
asp:TextBox runat=server ID=Color2
AutoCompleteType=None MaxLength=6 style=float:left /
asp:ImageButton runat=Server ID=Image1
style=float:left;margin:0 3px
ImageUrl=~/images/cp_button.png
AlternateText=Click to show color picker /
asp:Panel ID=Sample1
style=width:18px;height:18px;border:1px solid #000;margin:0
3px;float:left runat=server /
cc1:ColorPickerExtender ID=buttonCPE runat=server
TargetControlID=Color2
PopupButtonID=Image1
SampleControlID=Sample1
SelectedColor=33ffcc /
br /br style=clear:both /
div style=font-size: 90%em(Click the image button to
show the color picker)/em/div
/div
/form
/body
/html
‫ا‬ ‫ﻧﮭﺎﯾﺔ‬‫ﻟﺪرس‬‫ﻓﻲ‬ ‫اﻟﺨﺎﻣﺲ‬‫اﺟﺎﻛﺲ‬

‫اﻟ‬‫ﺪرس‬‫اﻟﺴﺎدس‬
‫ﻧﻤﻂ‬ ‫وﺗﻐﯿﺮ‬ ‫ﻣﺎﺋﻼ‬ ‫وﺟﻌﻠﮫ‬ ‫اﻟﺨﻂ‬ ‫ﺗﻠﻮﯾﻦ‬ ‫واﻟﻰ‬ ‫رﻣﻮز‬ ‫وإﺿﺎﻓﺔ‬ ‫اﻟﺨﻂ‬ ‫ﺗﻌﺪﯾﻞ‬ ‫إﻟﻰ‬ ‫ﻧﺤﺘﺎج‬ ‫رﺳﺎﻟﺔ‬ ‫أو‬ ‫أﯾﻤﯿﻞ‬ ‫إرﺳﺎل‬ ‫ﻋﻨﺪ‬ً
‫ﻗﺒﻞ‬ ‫اﻟﺨﻂ‬ ‫ﺑﺘﻨﺴﯿﻖ‬ ‫ﻟﻠﺘﺤﻜﻢ‬ ‫ﺻﻔﺤﺘﻨﺎ‬ ‫إﻟﻰ‬ ‫اﻟﻨﺼﻮص‬ ‫ﻣﺤﺮر‬ ‫إﺿﺎﻓﺔ‬ ‫ھﻨﺎ‬ ‫ﻓﯿﻤﻜﻨﻨﺎ‬ ‫اﻷﺧﺮى‬ ‫اﻟﺘﻨﺴﯿﻘﺎت‬ ‫ﻣﻦ‬ ‫واﻟﻌﺪﯾﺪ‬ ‫اﻟﺨﻂ‬
‫اﻟﺮﺳﺎﻟﺔ‬ ‫إرﺳﺎل‬
‫اﻟ‬ ‫اﻟﺼﻮرة‬‫ﻟﻠﺘﻤﺮﯾﻦ‬ ‫ﻌﺎﻣﺔ‬:
‫اﻟﻤﺴﺘﺨﺪم‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬ ‫ﻋﻦ‬ ‫ﺻﻮرة‬:

‫ﻟﻠﺼﻔﺤﺔ‬ ‫اﻟﺒﺮﻣﺠﻲ‬ ‫اﻟﻜﻮد‬ ‫ﺗﺸﺮح‬ ‫اﻟﺼﻮرة‬:
‫ﻟﻠﺼﻔﺤﺔ‬ ‫اﻟﺒﺮﻣﺠﻲ‬ ‫اﻟﻜﻮد‬:
Namespace=AjaxControlToolkit.HTMLEditor
TagPrefix=cc1 %
head runat=server
title/title
/head
body
/asp:ScriptManager
div
centercc1:Editor ID=Editor1 runat=server Width=600px
//centerbr /br /
asp:Button ID=Button1 runat=server Text=Button
onclick=Button1_Click /br /br /
asp:Label ID=Label1 runat=server
Text=Label/asp:Label
/div
/form
/body
/html
‫وﻧﻜﺘﺐ‬‫ﺷﺎرب‬ ‫ﺳﻲ‬ ‫ﺑﺎﻟﻠﻐﺔ‬ ‫اﻟﺘﻠﻲ‬ ‫اﻟﻜﻮد‬: Button1 ‫اﻷﻣﺮ‬ ‫زر‬ ‫ﻋﻠﻰ‬ ‫ﻣﺮﺗﯿﻦ‬ ‫ﻧﻀﻐﻂ‬
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

{
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = Editor1.Content;
}
}
‫ﻓﻲ‬ ‫اﻟﺴﺎدس‬ ‫اﻟﺪرس‬ ‫ﻧﮭﺎﯾﺔ‬‫اﺟﺎﻛﺲ‬

‫اﻟ‬‫ﺪرس‬‫اﻟﺴﺎﺑﻊ‬
‫رﺳﺎ‬ ‫أو‬ ‫أﯾﻤﯿﻞ‬ ‫إرﺳﺎل‬ ‫ﻋﻨﺪ‬‫واﻟﺘﺤﻜﻢ‬ ‫ﻓﻘﻂ‬ ‫ﻣﺎﺋﻼ‬ ‫أو‬ ‫ﻋﺮﯾﻀﺎ‬ ‫اﻟﺨﻂ‬ ‫ﻧﺠﻌﻞ‬ ‫إن‬ ‫ھﻨﺎ‬ ‫ﻓﯿﻤﻜﻨﻨﺎ‬ ‫اﻟﺨﻂ‬ ‫ﺗﻌﺪﯾﻞ‬ ‫إﻟﻰ‬ ‫ﻧﺤﺘﺎج‬ ‫ﻟﺔ‬
‫ﺑﻨﺎ‬ ‫ﺧﺎص‬ ‫ﻧﺼﻮص‬ ‫ﻣﺤﺮر‬ ‫إﻧﺸﺎء‬ ‫ﻋﺒﺮ‬ ‫ﻧﺸﺎء‬ ‫اﻟﺘﻲ‬ ‫اﻟﻌﻨﺎﺻﺮ‬ ‫ﺑﺈظﮭﺎر‬،‫إﻟﻰ‬ ‫اﻟﻨﺼﻮص‬ ‫ﻣﺤﺮر‬ ‫إﺿﺎﻓﺔ‬ ‫ھﻨﺎ‬ ‫ﻓﯿﻤﻜﻨﻨﺎ‬
‫اﻟﺮﺳﺎﻟﺔ‬ ‫إرﺳﺎل‬ ‫ﻗﺒﻞ‬ ‫اﻟﺨﻂ‬ ‫ﺑﺘﻨﺴﯿﻖ‬ ‫ﻟﻠﺘﺤﻜﻢ‬ ‫ﺻﻔﺤﺘﻨﺎ‬
‫اﻻﻧﺘﮭﺎء‬ ‫ﺑﻌﺪ‬ ‫ﻟﻠﺘﻤﺮﯾﻦ‬ ‫اﻟﻌﺎﻣﺔ‬ ‫اﻟﺼﻮرة‬:
‫ا‬‫اﻟﻌﻤﻞ‬ ‫ﻟﻤﺤﯿﻂ‬ ‫اﻟﻌﺎﻣﺔ‬ ‫ﻟﺼﻮرة‬:
‫اﻋﺘﻤﺎدا‬ ‫ﺟﺪﯾﺪ‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬ ‫ﺑﺒﻨﺎء‬ ‫ﻧﻘﻮم‬ ‫ﺳﻮف‬ ‫ھﻨﺎ‬ ‫ﺑﻞ‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫إﻟﻰ‬ ‫ﺑﺤﺎﺟﺔ‬ ‫ﻟﺴﻨﺎ‬ ‫ﻧﺤﻦ‬ ‫اﻟﺘﻤﺮﯾﻦ‬ ‫ھﺬا‬ ‫ﻓﻲ‬ً
‫ﺣﺎﺟﺘﻨﺎ‬ ‫ﯾﻠﺒﻲ‬ ‫ﻟﻜﻲ‬ ‫اﻟﻘﺪﯾﻢ‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬ ‫ﻋﻠﻰ‬ ‫ﺗﻌﺪﯾﻞ‬ ‫ﺑﺈﺟﺮاء‬ ‫ﺳﻨﻘﻮم‬ ‫أي‬ ‫ﻣﺴﺒﻘﺎ‬ ‫ﻣﻮﺟﻮد‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬ ‫ﻋﻠﻰ‬ً
‫ﻛﺎﻟﺘﺎﻟﻲ‬ ‫ھﻲ‬ ‫ﺟﺪﯾﺪ‬ ‫ﺻﻒ‬ ‫إﻧﺸﺎء‬ ‫طﺮﯾﻘﺔ‬: -

‫ا‬ ‫ﻋﻨﺪ‬‫اﻟﺘﺎﻟﻲ‬ ‫ﺑﺪاﺧﻠﮫ‬ ‫ﻧﻜﺘﺐ‬ ‫اﻟﺼﻒ‬ ‫إﻧﺸﺎء‬ ‫ﻣﻦ‬ ‫ﻻﻧﺘﮭﺎء‬:
‫ﺷﺎرب‬ ‫ﺳﻲ‬ ‫ﻓﻲ‬ ‫اﻟﻜﻮد‬:
using System;
using System.Linq;
using System.Web;
using AjaxControlToolkit.HTMLEditor;
namespace JoesAjaxControls
{
public class SimpleEditor : Editor
{
protected override void FillTopToolbar()
{
TopToolbar.Buttons.Add(new
AjaxControlToolkit.HTMLEditor.ToolbarButton.Bold());
TopToolbar.Buttons.Add(new
AjaxControlToolkit.HTMLEditor.ToolbarButton.Italic());
}

protected override void FillBottomToolbar()
{
BottomToolbar.Buttons.Add(new
AjaxControlToolkit.HTMLEditor.ToolbarButton.DesignMode());
BottomToolbar.Buttons.Add(new
AjaxControlToolkit.HTMLEditor.ToolbarButton.PreviewMode());
}
}
}
‫اﻟﻮب‬ ‫ﺻﻔﺤﺔ‬ ‫ﻛﻮد‬ ‫ﺻﻮرة‬:
‫اﻟﻮب‬ ‫ﻟﺼﻔﺤﺔ‬ ‫اﻟﺒﺮﻣﺠﻲ‬ ‫اﻟﻜﻮد‬:
%@ Register Namespace=JoesAjaxControls TagPrefix=Awaz %
head runat=server
title/title
/head
body
/asp:ScriptManager
div
Awaz:SimpleEditor id=Editor1 runat=server width=640px
/
asp:Button ID=Button1 runat=server Text=Button
onclick=Button1_Click /br /br /
Text=Label/asp:Label
/div
/form
/body
/html
. Label ‫ﻧﺘﯿﺠﺔ‬ ‫ﯾﻈﮭﺮ‬ ‫اﻟﺰر‬ ‫ﻋﻠﻰ‬ ‫اﻟﻀﻐﻂ‬ ‫ﻓﻌﻨﺪ‬‫إرﺳﺎل‬‫داﺧﻞ‬ ‫اﻟﺒﯿﺎﻧﺎت‬ : Button ‫ﻟﺰر‬ ‫اﻟﺨﻠﻔﻲ‬ ‫اﻟﻜﻮد‬‫اﻷﻣﺮ‬

using System;
using System.Linq;
using System.Web;
{
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = Editor1.Content;
}
}
‫ﻣﻼﺣﻈﺔ‬:‫ﺟﺪﯾﺪ‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬ ‫ﺑﺒﻨﺎء‬ ‫ﻗﻤﻨﺎ‬ ‫ﺑﻞ‬ ‫اﻟﺘﻤﺮﯾﻦ‬ ‫ھﺬا‬ ‫ﻓﻲ‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫ﻣﻦ‬ ‫ﻋﻨﺼﺮ‬ ‫أي‬ ‫اﺳﺘﺨﺪام‬ ‫ﯾﺘﻢ‬ ‫ﻟﻢ‬
. AjaxControlToolkit.HTMLEditor ‫اﻟﺒﺮﻣﺠﻲ‬ ‫اﻟﺼﻒ‬ ‫ﺑﺎﺳﺘﺨﺪام‬ ‫وذﻟﻚ‬ ‫واﺳﺘﺨﺪاﻣﮫ‬
‫اﻟﺘﻤ‬ ‫ﻧﮭﺎﯾﺔ‬‫ﻓﻲ‬ ‫اﻟﺴﺎﺑﻊ‬ ‫اﻟﺪرس‬ ‫ﺮﯾﻦ‬‫اﺟﺎﻛﺲ‬

‫اﻟ‬‫ﺪرس‬‫اﻟ‬‫ﺜﺎﻣﻦ‬
‫اﻟﻤﺨﺪم‬ ‫إﻟﻰ‬ ‫ﻣﻌﯿﻦ‬ ‫أﻣﺮ‬ ‫إرﺳﺎل‬ ‫ﺗﻨﺒﯿﮫ‬ ‫رﺳﺎﻟﺔ‬ ‫أو‬ ‫اﻟﺒﯿﺎﻧﺎت‬ ‫إرﺳﺎل‬ ‫ﺗﺄﻛﯿﺪ‬ ‫رﺳﺎﻟﺔ‬
‫ﻟﻠﺘﻤﺮﯾﻦ‬ ‫اﻟﻌﺎﻣﺔ‬ ‫اﻟﺼﻮرة‬:
‫اﻟﻤﺴﺘﺨﺪم‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬ ‫ﻋﻦ‬ ‫ﺻﻮرة‬:
‫اﻟﺒﺮﻣﺠﻲ‬ ‫اﻟﻜﻮد‬ ‫ﻟﻨﺎ‬ ‫ﺗﺸﺮح‬ ‫اﻟﺼﻮرة‬:

‫ﻧﻘ‬ ‫اﻟﻤﺤﺪد‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬ ‫ﺗﻨﺰﯾﻞ‬ ‫ﺑﻌﺪ‬‫ﺗﻤﺮﯾﻨﻨﺎ‬ ‫ﯾﻼءم‬ ‫ﻟﻜﻲ‬ ‫ﺧﺼﺎﺋﺼﮫ‬ ‫ﻋﻠﻰ‬ ‫ﺑﺎﻟﺘﻌﺪﯾﻞ‬ ‫ﻮم‬:

‫ﻟﺘﻔﻌﯿﻞ‬ ‫اﻷﻣﺮ‬ ‫زر‬ ‫ﻋﻠﻰ‬ ‫ﻣﺮﺗﯿﻦ‬ ‫ﺑﺎﻟﻀﻐﻂ‬ ‫ﻋﻤﻠﻨﺎ‬ ‫ﻧﻨﮭﻲ‬ ‫اﻟﻤﺴﺘﺨﺪم‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬ ‫ﺧﺼﺎﺋﺺ‬ ‫ﺗﻌﺪﯾﻞ‬ ‫ﻣﻦ‬ ‫ﻧﻨﺘﮭﻲ‬ ‫ﻋﻨﺪﻣﺎ‬
‫اﻟﻤﺨﺪم‬ ‫إﻟﻰ‬ ‫واﻟﺬھﺎب‬ ‫اﻟﺰر‬ ‫ﻋﻠﻰ‬ ‫اﻟﻀﻐﻂ‬ ‫ﺣﺪث‬:
‫اﻟ‬ ‫إرﺳﺎل‬ ‫ﺗﺄﻛﯿﺪ‬ ‫رﺳﺎﻟﺔ‬ ‫ﻟﺪﯾﻨﺎ‬ ‫ﯾﻈﮭﺮ‬ ‫ﺳﻮف‬ ‫اﻟﺘﻤﺮﯾﻦ‬ ‫ﺗﺸﻐﯿﻞ‬ ‫ﻋﻨﺪ‬ ‫اﻟﻨﮭﺎﯾﺔ‬ ‫وﻓﻲ‬‫اﻟﻤﺨﺪم‬ ‫إﻟﻰ‬ ‫ﺒﯿﺎﻧﺎت‬.
‫اﻟ‬ ‫اﻟﺪرس‬ ‫ﻧﮭﺎﯾﺔ‬‫ﺜﺎﻣﻦ‬‫ﻓﻲ‬‫اﺟﺎﻛﺲ‬

‫اﻟ‬‫ﺪرس‬‫اﻟﺘﺎﺳﻊ‬
‫اﻷول‬ ‫اﻟﺼﻨﺪوق‬ ‫ﻓﻲ‬ ‫ﻓﻘﻂ‬ ‫أرﻗﺎم‬ ‫إدﺧﺎل‬ ‫ﻣﻦ‬ ‫اﻟﺘﺤﻘﻖ‬ ‫ﯾﻘﻮم‬ ‫ﺣﯿﺚ‬ ‫ﺑﺘﺤﺪﯾﺪھﺎ‬ ‫ﻧﻘﻮم‬ ‫ﻧﺤﻦ‬ ‫ﻗﯿﻢ‬ ‫إدﺧﺎل‬ ‫ﻣﻦ‬ ‫اﻟﺘﺤﻘﻖ‬ ‫ﻋﻨﺎﺻﺮ‬
‫ﺻﻐ‬ ‫ﺣﺮوف‬ ‫إدﺧﺎل‬ ‫ﻣﻦ‬ ‫أﯾﻀﺎ‬ ‫واﻟﺘﺤﻘﻖ‬ ‫اﻷرﻗﺎم‬ ‫ﺳﻮا‬ ‫ﺷﻲء‬ ‫أي‬ ‫إدﺧﺎل‬ ‫ﯾﻘﺒﻞ‬ ‫وﻟﻦ‬‫ﺳﻮا‬ ‫ﺑﺈدﺧﺎل‬ ‫ﯾﺴﻤﺢ‬ ‫وﻟﻦ‬ ‫ﻓﻘﻂ‬ ‫ﯿﺮة‬
‫رﯾﺎﺿﯿﺔ‬ ‫ﻋﻤﻠﯿﺔ‬ ‫إدﺧﺎل‬ ‫ﺳﻮا‬ ‫ﯾﺴﻤﺢ‬ ‫وﻟﻦ‬ ‫رﯾﺎﺿﯿﺔ‬ ‫ﻋﻤﻠﯿﺔ‬ ‫إدﺧﺎل‬ ‫ﻣﻦ‬ ‫واﻟﺘﺤﻘﻖ‬ ‫اﻟﺼﻐﯿﺮة‬ ‫اﻟﺤﺮوف‬
‫اﻟﻤﺴﺘﺨﺪم‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬ ‫ﺻﻮرة‬:

‫اﻟﻮب‬ ‫ﺻﻔﺔ‬ ‫ﻛﻮد‬ ‫ﺻﻮرة‬:
‫اﻟﻮب‬ ‫ﻟﺼﻔﺤﺔ‬ ‫اﻟﻜﺎﻣﻞ‬ ‫اﻟﻜﻮد‬:
/head
body
div
ajaxToolkit:FilteredTextBoxExtender
ID=FilteredTextBoxExtender1
runat=server TargetControlID=TextBox1
FilterType=Numbers
/ajaxToolkit:FilteredTextBoxExtender
FilterType=LowercaseLetters
FilterType=Custom, Numbers ValidChars=+-=/*().
table border=0
tr
tdOnly digits are allowed here:/td
td
asp:TextBox ID=TextBox1 runat=server
/asp:TextBox
/td
/tr
tr
td
Only lower-case letters are allowed

here:/td
td
/asp:TextBox/td
/tr
tr
td
Only math symbols (+,-,*,/,=,.) and
numbers:/td
td
asp:TextBox ID=TextBox3
runat=server/asp:TextBox/td
/tr
/table
/div
/form
/body
/html
‫ﻣﻼﺣﻈ‬‫ﺔ‬:‫اﻟ‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬ ‫ﺧﻼل‬ ‫ﻣﻦ‬ ‫ﯾﻤﻜﻦ‬‫ﺗﺠﺮﯾﺒﮭﺎ‬ ‫ﯾﻤﻜﻨﻚ‬ ‫أﺧﺮى‬ ‫ﺗﺤﻘﻖ‬ ‫ﺑﻌﻤﻠﯿﺎت‬ ‫اﻟﻘﯿﺎم‬ ‫اﻟﺘﻤﺮﯾﻦ‬ ‫ھﺬا‬ ‫ﻓﻲ‬ ‫ﻤﺴﺘﺨﺪم‬.
‫ﻓﻲ‬ ‫اﻟﺘﺎﺳﻊ‬ ‫اﻟﺪرس‬ ‫ﻧﮭﺎﯾﺔ‬‫اﺟﺎﻛﺲ‬
‫اﻟﻤﺼﺎدر‬:
•‫ﻟﺘﻘﺮﯾﺮ‬ ‫اﻟﻤﻜﺘﺒﺎت‬ ‫ﻓﻲ‬ ‫اﻟﺘﻘﻨﯿﺔ‬ ‫ﺑﺎﺳﺘﺨﺪام‬ ‫اﻟﺨﺎص‬ ‫اﻟﺠﺰء‬‫ﺳﻮن‬ ‫ﻟﺠﺎ‬‫أ‬.‫ﻛﻼرك‬
•‫ﻣﻮﻗﻊ‬ASP.NET

‫ﺑﺴ‬‫ــ‬‫ﺍﻟﺮﺣﻴ‬ ‫ﺍﻟﺮﺣﻤﻦ‬ ‫ﺍﷲ‬ ‫ﻢ‬‫ــ‬‫ﻢ‬
AJAX.net
AJAX=Asynchronous JavaScript And XML
‫ﺑﺎﻟﺘﻤﺎرﯾﻦ‬
Part 2
‫ﻭ‬ ‫ﺗﺄﻟﻴﻒ‬‫ﺇ‬‫ﻋﺪﺍﺩ‬
‫ﺷﻴﺨﻲ‬ ‫ﺁﻭﺍﺯ‬
Ramanooo@hotmail.com
00963955264766
‫ﺗﺎرﯾﺦ‬‫اﺟﺎﻛﺲ‬:
‫ﻣﺼﻄﻠﺢ‬‫اﺟﺎﻛﺲ‬‫ﻇﮭﺮ‬‫أول‬‫ﻣﺮة‬‫ﻓﻲ‬‫ﻣﻘﺎﻟﺔ‬‫ﺑﺘﺎرﯾﺦ‬١٨‫ﻓﺒﺮاﯾﺮ‬٢٠٠٥‫ﻟﻜﺎﺗﺐ‬‫أﻣﺮﯾﻜﻲ‬‫وﻗﺪ‬‫وﺻﻒ‬‫ﻣﺠﻤﻮﻋﺔ‬‫ﺗﻘﻨﯿﺎت‬‫و‬
‫أﺳﺎﻟﯿﺐ‬‫اﺳﺘﺨﺪﻣﺖ‬‫ﻣﻦ‬‫ﻗﺒﻞ‬‫ﺟﻮﺟﻞ‬‫ﻓﻲ‬‫ﺟﻮﺟﻞ‬‫أرث‬‫ﺗﻤﻜﻦ‬‫اﻟﻤﺴﺘﺨﺪم‬‫ﻣﻦ‬‫اﻟﺘﻌﺎﻣﻞ‬‫ﻣﻊ‬‫اﻹﻟﻜﺘﺮوﻧﻲ‬ ‫اﻟﻤﻮﻗﻊ‬‫ﺑﻄﺮﯾﻘﺔ‬‫ﺗﺸﺒﮫ‬
‫ﺑﺮاﻣﺞ‬، ‫اﻟﺤﺎﺳﻮب‬‫ﺣﯿﺚ‬‫ﯾﻘﻮم‬‫اﻟﻤﺴﺘﺨﺪم‬‫ﺑﺎﻟﻘﯿﺎم‬‫ﺑﺄﻋﻤﺎﻟﮫ‬‫ﻣﻦ‬‫ﺧﻼل‬‫ﺻﻔﺤﺔ‬‫واﺣﺪة‬.
‫ﻣﺴﺘﻘﺒﻞ‬‫اﺟﺎﻛﺲ‬:
‫ھﻨﺎك‬‫اﻟﻜﺜﯿﺮ‬‫ﯾﻌﺘﻘﺪون‬‫أﻧﮫ‬‫ﺳﯿﺘﺤﻮل‬‫ﻋﺎﻟﻢ‬‫اﻟﺒﺮﻣﺠﯿﺎت‬‫إﻟﻰ‬‫اﻟﻮﯾﺐ‬‫ﺑﻤﻌﻨﻲ‬‫اﻧﮫ‬‫ﯾﻤﻜﻨﻚ‬‫اﺳﺘﺨﺪام‬‫اﻟﺒﺮاﻣﺞ‬‫اﻟﻤﺨﺘﻠﻔﺔ‬‫ﻣﻦ‬‫ﺧﻼل‬
‫اﻟﻤﺘﺼﻔﺢ‬‫وھﻨﺎك‬‫ﻣﻮاﻗﻊ‬‫ﻛﺜﯿﺮة‬‫ﺑﺪأت‬‫اﻟﻤﺸﻮار‬‫ﻣﺜﻞ‬‫ﺗﺤﻮﯾﻞ‬‫ﻣﻠﻔﺎﺗﻚ‬‫إﻟﻰ‬‫ﺻﯿﻎ‬‫ﻣﺨﺘﻠﻔﺔ‬‫ﻣﻦ‬‫ﺧﻼل‬‫اﻟﻤﺘﺼﻔﺢ‬،‫ﻓﺒﻌﻀﮭﻢ‬‫ﻗﺎل‬
‫إن‬‫ﺗﻄﺒﯿﻘﺎت‬‫اﻟﻮﯾﺐ‬‫ﻟﻢ‬‫ﺗﻌﺪ‬‫ﺻﻔﺤﺎت‬‫ﺑﻌﺪ‬‫اﻵن‬‫ﺑﻞ‬‫أﺻﺒﺤﺖ‬‫ﺗﻄﺒﯿﻘﺎت‬‫ﺳﻄﺢ‬‫ﻣﻜﺘﺐ‬‫ﺣﻘﯿﻘﯿﺔ‬.
‫اﻟﺒﺪء‬ ‫ﻗﺒﻞ‬ ‫ﻣﮭﻢ‬ ‫ﺗﻨﻮﯾﮫ‬:‫ﺑﺒﯿﺌﺔ‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫رﺑﻂ‬ ‫ﻛﯿﻔﯿﺔ‬ ‫وﺗﻌﻠﻢ‬ ‫اﻟﻜﺘﺎب‬ ‫ﻣﻦ‬ ‫اﻷول‬ ‫اﻟﺠﺰء‬ ‫ﺗﺤﻤﯿﻞ‬ ‫ﯾﺠﺐ‬.NET
2008‫اﻟﻜﺘﺎب‬ ‫ﻣﻦ‬ ‫اﻷول‬ ‫اﻟﺠﺰء‬ ‫ﻓﻲ‬ ‫اﻷول‬ ‫اﻟﺪرس‬ ‫ﺧﻼل‬ ‫ﻣﻦ‬‫اﻟﺘﺎﻟﻲ‬ ‫اﻟﺮاﺑﻂ‬ ‫ﻣﻦ‬ ‫ﺗﺤﻤﯿﻠﮫ‬ ‫ﯾﻤﻜﻦ‬:
http://www.4shared.com/file/110593220/71ee5e0d/AJAXnet.html

‫اﻟﻤﺤﺘﻮﯾﺎت‬
-‫ﺗﻄﺒﻴﻖ‬ ‫ﺗﻢ‬ ‫اﻟﺘﻤﺮﻳﻦ‬ ‫ﻫﺬا‬ ‫ﻓﻲ‬ ‫اﻟﺼﻔﺤﺔ‬ ‫ﻛﺎﻣﻞ‬ ‫اﺳﺘﺪﻋﺎء‬ ‫ﺑﺪون‬ ‫اﻟﺼﻔﺤﺔ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫أﻟﻮان‬ ‫ﺗﺒﺪﻳﻞ‬
‫ﺗﻌﺪﻳﻞ‬‫أﻟﻮان‬‫اﻟﺼﻔﺤﺔ‬ ‫ﻧﻔﺲ‬ ‫ﻓﻲ‬ ‫ﻣﺘﻌﺪدة‬ ‫ﻋﻨﺎﺻﺮ‬ ‫ﻋﻠﻰ‬ ‫اﻟﺘﻐﻴﺮ‬ ‫ﺗﻄﺒﻴﻖ‬ ‫وﻳﻤﻜﻦ‬ ‫وﺣﻴﺪ‬ ‫ﻋﻨﺼﺮ‬.
-‫ﻋﻠﻰ‬ ‫ﻳﺘﻢ‬ ‫واﻟﺘﺤﻘﻖ‬ ‫ﻓﺮاغ‬ ‫ﺗﺮﻛﻬﺎ‬ ‫وﻋﺪم‬ ‫اﻟﺤﻘﻮل‬ ‫ﻓﻲ‬ ‫ﺻﺤﻴﺤﺔ‬ ‫ﻗﻴﻤﺔ‬ ‫إدﺧﺎل‬ ‫ﻣﻦ‬ ‫اﻟﺘﺤﻘﻖ‬
‫ﻣﺴﺘ‬‫اﻟﺼﻔﺤﺔ‬ ‫ﻮى‬.
-‫ﺣﺠﻢ‬ ‫وﺑﺘﺤﺪﻳﺪ‬ ‫اﻟﺼﻔﺤﺔ‬ ‫داﺧﻞ‬ ‫وﺗﻜﺒﻴﺮﻫﺎ‬ ‫ﺑﺘﺼﻐﻴﺮﻫﺎ‬ ‫اﻟﺘﺤﻜﻢ‬ ‫ﻳﺘﻢ‬ ‫ﻣﻌﻴﻦ‬ ‫ﺑﺤﺠﻢ‬ ‫ﺻﻮرة‬
‫واﻟﺘﺼﻐﻴﺮ‬ ‫اﻟﺘﻜﺒﻴﺮ‬.
-‫ﻋﻠﻴﻬﺎ‬ ‫اﻟﺮواﺑﻂ‬ ‫ﻋﺪد‬ ‫زﻳﺎدة‬ ‫وﻳﻤﻜﻦ‬ ‫اﻟﺸﻬﻴﺮ‬ ‫ﻳﺎﻫﻮو‬ ‫ﻣﻮﻗﻊ‬ ‫ﻓﻲ‬ ‫ﺗﻈﻬﺮ‬ ‫ﻟﻘﺎﺋﻤﺔ‬ ‫ﻣﺸﺎﺑﻬﺔ‬ ‫ﻗﺎﺋﻤﺔ‬
‫ﺑﺸﻜﻞ‬ ‫اﻟﺮواﺑﻂ‬ ‫ﺗﻠﻚ‬ ‫اﺳﺘﺪﻋﺎء‬ ‫وﻳﺘﻢ‬ ‫اﻟﺒﻴﺎﻧﺎت‬ ‫ﻣﻦ‬ ‫ﻣﺠﻤﻮﻋﺔ‬ ‫ﻋﻠﻰ‬ ‫راﺑﻂ‬ ‫ﻛﻞ‬ ‫ﻳﺤﺘﻮي‬ ‫وان‬
‫ﻣﺒﺎﺷﺮ‬.
-‫ﻣﺤﺪد‬ ‫ﺷﻜﻞ‬ ‫وﻓﻖ‬ ‫ﻣﻌﻠﻮﻣﺎت‬ ‫إدﺧﺎل‬ ‫ﻋﻠﻰ‬ ‫اﻟﻤﺴﺘﺨﺪم‬ ‫ﻹﺟﺒﺎر‬ ‫ﻣﻌﻴﻦ‬ ‫ﺷﻜﻞ‬ ‫ﻧﻤﻂ‬ ‫وﺿﻊ‬ ‫ﻳﺘﻢ‬
‫ﺻﺤﻴﺢ‬ ‫ﺑﺸﻜﻞ‬ ‫اﻟﺒﻴﺎﻧﺎت‬ ‫ﻛﻞ‬ ‫إدﺧﺎل‬ ‫ﻣﻦ‬ ‫واﻟﺘﺤﻘﻖ‬.
-‫اﻹدﺧﺎل‬ ‫ﻳﺠﺐ‬ ‫ﻣﺎذا‬ ‫ﻣﻌﺮﻓﺔ‬ ‫ﻋﻠﻰ‬ ‫اﻟﻤﺴﺘﺨﺪم‬ ‫ﺗﺴﺎﻋﺪ‬ ‫ﻋﺒﺎرة‬ ‫ﺑﺪاﺧﻠﻪ‬ ‫ﻳﻈﻬﺮ‬ ‫ﻧﺺ‬ ‫ﺻﻨﺪوق‬
‫اﻟﻤﺴﺘﺨﺪم‬ ‫ﻹﺟﺒﺎر‬ ‫اﻟﺘﺤﻘﻖ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫ﺗﻄﺒﻴﻖ‬ ‫وﻳﻤﻜﻦ‬ ‫ﺷﻴﺖ‬ ‫ﺳﺘﺎﻳﻞ‬ ‫ﺑﺎﺳﺘﺨﺪام‬ ‫اﻟﺼﻨﺪوق‬ ‫داﺧﻞ‬
‫ﻋﻠﻰ‬‫ﻣﻌﻴﻨﺔ‬ ‫ﻗﻴﻢ‬ ‫إدﺧﺎل‬.
-‫أو‬ ‫ﻧﺼﻮص‬ ‫ﻋﻠﻰ‬ ‫ﻳﺤﺘﻮي‬ ‫ﻓﻼش‬ ‫ﺷﻜﻞ‬ ‫ﻋﻠﻰ‬ ‫ﺻﻨﺪوق‬ ‫ﻟﺪﻳﻨﺎ‬ ‫ﻳﻈﻬﺮ‬ ‫ﻋﻠﻴﻪ‬ ‫اﻟﻀﻐﻂ‬ ‫ﻋﻨﺪ‬ ‫أﻣﺮ‬ ‫زر‬
‫ﻋﻨﺎﺻﺮ‬ ‫ﻣﻦ‬ ‫ﻋﻨﺼﺮ‬ ‫إي‬html‫اﻟﺼﻨﺪوق‬ ‫إﻏﻼق‬ ‫ﻳﺘﻢ‬ ‫إن‬ ‫إﻟﻰ‬ ‫اﻟﺰر‬ ‫ﻋﻠﻰ‬ ‫اﻟﻀﻐﻂ‬ ‫إﻟﻐﺎء‬ ‫وﻳﺘﻢ‬
‫اﻟﻤﻔﺘﻮح‬.
-‫ﻟﻌﻨﺼﺮ‬ ‫اﻟﻤﺘﻌﺪد‬ ‫اﻻﺧﺘﯿﺎر‬ ‫ﻣﻔﮫﻮم‬ ‫ﺗﻐﯿﺮ‬ ‫ﺗﻢ‬CheckBox‫وﺣﯿ‬ ‫ﻋﻨﺼﺮ‬ ‫ﺑﺎﺧﺘﯿﺎر‬ ‫اﻟﻤﺴﺘﺨﺪم‬ ‫ﺳﯿﻘﻮم‬ ‫ﺣﯿﺚ‬‫ﺪ‬
‫اﻟﻤﺘﻌﺪد‬ ‫اﻻﺧﺘﯿﺎر‬ ‫وﻻﻳﻤﻜﻨﻪ‬ ‫اﻟﻤﺘﻮﻓﺮة‬ ‫اﻟﻌﻨﺎﺻﺮ‬ ‫ﻣﻦ‬.
-‫ﻣﻌﻠﻮﻣﺎت‬ ‫ﻋﻠﻰ‬ ‫ﺗﺤﺘﻮي‬ ‫ﻗﺎﺋﻤﺔ‬ ‫ﺗﺴﺪل‬ ‫ﻋﻠﯿﻪ‬ ‫اﻟﻀﻐﻂ‬ ‫ﻋﻨﺪ‬ ‫اﻟﺼﻔﺤﺔ‬ ‫ﻓﻲ‬ ‫ﺷﺮﻳﻂ‬
‫اﻟﻤﻌﻠﻮﻣﺎت‬ ‫ﺗﺨﺘﻔﻲ‬ ‫أﺧﺮى‬ ‫ﻣﺮة‬ ‫ﻋﻠﯿﻪ‬ ‫اﻟﻀﻐﻂ‬ ‫وﻋﻨﺪ‬ ‫اﻟﺸﺮﻳﻂ‬ ‫ﺗﻔﺎﺻﯿﻞ‬ ‫ﻋﻦ‬ ‫ﻣﺨﺘﻠﻔﺔ‬
‫ﺟﻤﯿﻠﺔ‬ ‫ﺑﻄﺮﻗﺔ‬.

‫اﻟﺘﻤﺮﯾﻦ‬‫اﻷول‬:
‫ﻟﻠﺘﻤﺮﯾﻦ‬ ‫اﻟﻌﺎم‬ ‫اﻟﺸﻜﻞ‬
‫اﻟﻌﻤﻞ‬ ‫ﻟﺒﯿﺌﺔ‬ ‫اﻟﻌﺎم‬ ‫اﻟﺸﻜﻞ‬
‫اﻟﺘﻤﺮﯾﻦ‬ ‫ﻓﻲ‬ ‫اﻟﻤﺴﺘﺨﺪﻣﺔ‬ ‫اﻟﻌﻨﺎﺻﺮ‬
-asp:ScriptManager
-asp:UpdatePanel
-asp:Label
-asp:DropDownList
‫ﻛﻮد‬‫ﺻﻔﺤﺔ‬Default.aspx
‫ﺗﺑدﻳل‬‫أﻟوان‬‫ﻛﺎﻣل‬ ‫اﺳﺗدﻋﺎء‬ ‫ﺑدون‬ ‫اﻟﺻﻔﺣﺔ‬ ‫ﻋﻧﺎﺻر‬‫وﺣﻳد‬ ‫ﻋﻧﺻر‬ ‫اﻟوان‬ ‫ﺗﻌدﻳل‬ ‫ﺗطﺑﻳق‬ ‫ﺗم‬ ‫اﻟﺗﻣرﻳن‬ ‫ھذا‬ ‫ﻓﻲ‬ ‫اﻟﺻﻔﺣﺔ‬
‫اﻟﺻﻔﺣﺔ‬ ‫ﻧﻔس‬ ‫ﻓﻲ‬ ‫ﻣﺗﻌددة‬ ‫ﻋﻧﺎﺻر‬ ‫ﻋﻠﻰ‬ ‫اﻟﺗﻐﻳر‬ ‫ﺗطﺑﻳق‬ ‫وﻳﻣﻛن‬

head runat=server
style type=text/css
.style1
{
font-size: x-large;
font-weight: bold;
}
/style
/head
body
div style=text-align: left; background-color: #C0C0C0;
/asp:ScriptManager
span class=style1AJAX/spanbr /
br /
br /
asp:UpdatePanel ID=UpdatePanel1 runat=server
ContentTemplate
Width=201px CssClass=ClassWhite/asp:Label
br /
/ContentTemplate
Triggers
asp:AsyncPostBackTrigger ControlID=DropDownList1
EventName=SelectedIndexChanged /
/Triggers
/asp:UpdatePanel
br /
asp:DropDownList ID=DropDownList1 runat=server
AutoPostBack=True
OnSelectedIndexChanged=DropDownList1_SelectedIndexChanged
Height=22px
Width=218px
asp:ListItemWhite/asp:ListItem
asp:ListItemRed/asp:ListItem
asp:ListItemGreen/asp:ListItem
asp:ListItemBlue/asp:ListItem
asp:ListItemYellow/asp:ListItem
/asp:DropDownList
/div
/form
/body
/html
‫اﻟﺨﻠﻔﻲ‬ ‫اﻟﻜﻮد‬ ‫ﺻﻔﺤﺔ‬Default.aspx.cs
using System;

using System.Data;
using System.Linq;
using System.Web;
using System.Xml.Linq;
{
{
}
protected void DropDownList1_SelectedIndexChanged(object sender,
EventArgs e)
{
if (DropDownList1.SelectedValue == Red)
{
Label1.CssClass = ClassRed;
}
else if (DropDownList1.SelectedValue == Blue)
{
Label1.CssClass = ClassBlue;
}
else if (DropDownList1.SelectedValue == Green)
{
Label1.CssClass = ClassGreen;
}
else if (DropDownList1.SelectedValue == Yellow)
{
Label1.CssClass = ClassYellow;
}
else
{
Label1.CssClass = ClassWhite;
}
}
}
‫ﺻﻔﺤﺔ‬ ‫ﻛﻮد‬StyleSheet.css
.ClassRed
{
background-color: Red;
}
.ClassBlue {
background-color: Blue;
}
.ClassYellow {
background-color: Yellow;
}
.ClassGreen {

background-color: Green;
}
.ClassWhite {
background-color: White;
}
‫اﻻ‬ ‫اﻟﺘﻤﺮﯾﻦ‬ ‫ﻧﮭﺎﯾﺔ‬‫ول‬

‫اﻟﺜﺎﻧﻲ‬ ‫اﻟﺘﻤﺮﯾﻦ‬:
‫ﻣﺳﺗوى‬ ‫ﻋﻠﻰ‬ ‫ﻳﺗم‬ ‫واﻟﺗﺣﻘق‬ ‫ﻓراغ‬ ‫ﺗرﻛﮫﺎ‬ ‫وﻋدم‬ ‫اﻟﺣﻘول‬ ‫ﻓﻲ‬ ‫ﺻﺣﻳﺣﺔ‬ ‫ﻗﻳﻣﺔ‬ ‫ادﺧﺎل‬ ‫ﻣن‬ ‫اﻟﺗﺣﻘق‬
‫اﻟﺻﻔﺣﺔ‬
‫اﻟﻌﻤﻞ‬ ‫ﻟﺒﯿﺌﺔ‬ ‫اﻟﻌﺎم‬ ‫اﻟﺸﻜﻞ‬:
‫ﺻﻔﺤﺔ‬ ‫ﻛﻮد‬Default.aspx:

head runat=server
/head
body
/asp:ScriptManager
div
table
tr
tdName:/td
td
asp:TextBox runat=server ID=NameTextBox
BorderStyle=solid BorderWidth=1px BorderColor=#a9a9a9 /
/td
/tr
tr
tdPhone Number:/td
td
asp:TextBox runat=server
ID=PhoneNumberTextBox BorderStyle=solid BorderWidth=1px
BorderColor=#a9a9a9 /
/td
/tr
/table
br /
asp:RequiredFieldValidator runat=server ID=NReq
ControlToValidate=NameTextBox
Display=None
ErrorMessage=bRequired Field Missing/bbr /A name
is required.
/asp:RequiredFieldValidator
cc1:ValidatorCalloutExtender ID=NReqE runat=server
TargetControlID=NReq
HighlightCssClass=validatorCalloutHighlight
/cc1:ValidatorCalloutExtender
asp:RequiredFieldValidator ID=PNReq runat=server
ControlToValidate=PhoneNumberTextBox
Display=None
ErrorMessage=bRequired Field Missing/bbr /A phone
number is required.div style='margin-top:5px;padding:5px;border:1px
solid #e9e9e9;background-color:white;'bOther Options:/bbr /a
href='javascript:alert(quot;No phone number available in
profile.quot;);'Extract from Profile/a/div
/asp:RequiredFieldValidator
cc1:ValidatorCalloutExtender runat=Server ID=PNReqE
TargetControlID=PNReq
Width=350px
asp:RegularExpressionValidator runat=server ID=PNRegEx
ControlToValidate=PhoneNumberTextBox
Display=None
ValidationExpression=(((d{3}) ?)|(d{3}-))?d{3}-
d{4}
ErrorMessage=bInvalid Field/bbr /Please enter a
phone number in the format:br /(###) ###-####

/asp:RegularExpressionValidator
cc1:ValidatorCalloutExtender runat=Server ID=PNReqEx
TargetControlID=PNRegEx
asp:Button ID=Button1 runat=server Text=Submit
OnClick=Button1_OnClick /br /br /
asp:UpdatePanel ID=UpdatePanel1 runat=server
ContentTemplate
asp:Label id=lblMessage runat=server /
/ContentTemplate
Triggers
asp:AsyncPostBackTrigger ControlID=Button1
EventName=Click /
/Triggers
/asp:UpdatePanel
/div
/form
/body
/html
‫اﻟﺨﻠﻔﻲ‬ ‫اﻟﻜﻮد‬ ‫ﺻﻔﺤﺔ‬Default.aspx.cs
using System;
using System.Data;
using System.Linq;
using System.Web;
using System.Xml.Linq;
{
{
}
protected void Button1_OnClick(object sender, EventArgs e)
{
lblMessage.Text = String.Format(Thanks {0}, we'll give you a
call at {1}., NameTextBox.Text, PhoneNumberTextBox.Text);
}
}
body, div, p, h1, h2, h3, h4, ul, li, table
{
margin:0;
padding:0;
border:none;
}

body
{
background: #B4B4B4 url(images/body_bg.gif) repeat left top;
font-family: Tahoma, Arial, sans-serif;
font-size:75%;
}
.validatorCalloutHighlight
{
background-color: lemonchiffon;
}
‫اﻟﺜﺎﻧﻲ‬ ‫اﻟﺘﻤﺮﯾﻦ‬ ‫ﻧﮭﺎﯾﺔ‬

‫اﻟﺜﺎﻟﺚ‬ ‫اﻟﺘﻤﺮﯾﻦ‬:
‫اﻟﺗﻛﺑﻳر‬ ‫ﺣﺟم‬ ‫وﺑﺗﺣدﻳد‬ ‫اﻟﺻﻔﺣﺔ‬ ‫داﺧل‬ ‫وﺗﻛﺑﻳرھﺎ‬ ‫ﺑﺗﺻﻐﻳرھﺎ‬ ‫اﻟﺗﺣﻛم‬ ‫ﻳﺗم‬ ‫ﻣﻌﻳن‬ ‫ﺑﺣﺟم‬ ‫ﺻورة‬
‫واﻟﺗﺻﻐﻳر‬
‫ﻟﻠﺘﻤﺮﯾﻦ‬ ‫اﻟﻌﺎﻣﺔ‬ ‫اﻟﺼﻮرة‬
‫اﻟ‬ ‫اﻟﺸﻜﻞ‬‫اﻟﻌﻤﻞ‬ ‫ﻟﺒﯿﺌﺔ‬ ‫ﻌﺎم‬
‫اﻟﻤﺴﺘﺨﺪم‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬

‫ﺻﻔﺤﺔ‬ ‫ﻛﻮد‬Default.aspx
head runat=server
/head
body
div
strongResizable image with buttons for automatic
resizing/strong
br /br /
asp:Panel ID=PanelImage runat=server CssClass=frameImage
asp:Image ID=Image1 runat=server
ImageUrl=~/image/AJAX.gif
AlternateText=ASP.NET AJAX style=width:100%;
height:100%; /
/asp:Panel
ASP.NET AJAX is a free framework for building a new generation
of richer, more interactive, highly personalized cross-browser web
applications. This new web development technology from Microsoft
integrates cross-browser client script libraries with the ASP.NET 2.0
server-based development framework. In addition, ASP.NET AJAX offers
you the same type of development platform for client-based web pages
that ASP.NET offers for server-based pages. And because ASP.NET AJAX
is an extension of ASP.NET, it is fully integrated with server-based
services. ASP.NET AJAX makes it possible to easily take advantage of
AJAX techniques on the web and enables you to create ASP.NET pages
with a rich, responsive UI and server communication. However, AJAX
isn't just for ASP.NET. You can take advantage of the rich client
framework to easily build client-centric web applications that
integrate with any backend data provider and run on most modern
browsers.
br /br /
strongResizable text with onresize event handler/strong
br /br /
ASP.NET AJAX is a free framework for building a new generation of
richer, more interactive, highly personalized cross-browser web

applications. This new web development technology from Microsoft
integrates cross-browser client script libraries with the ASP.NET 2.0
server-based development framework. In addition, ASP.NET AJAX offers
you the same type of development platform for client-based web pages
that ASP.NET offers for server-based pages. And because ASP.NET AJAX
is an extension of ASP.NET, it is fully integrated with server-based
services. ASP.NET AJAX makes it possible to easily take advantage of
AJAX techniques on the web and enables you to create ASP.NET pages
with a rich, responsive UI and server communication. However, AJAX
isn't just for ASP.NET. You can take advantage of the rich client
framework to easily build client-centric web applications that
integrate with any backend data provider and run on most modern
browsers.
br /br /
cc1:ResizableControlExtender ID=ResizableControlExtender1
runat=server
BehaviorID=ResizableControlBehavior1
TargetControlID=PanelImage
ResizableCssClass=resizingImage
HandleCssClass=handleImage
MinimumWidth=50
MinimumHeight=26
MaximumWidth=250
MaximumHeight=170
HandleOffsetX=3
HandleOffsetY=3
/cc1:ResizableControlExtender
/div
/form
/body
/html
{
margin:0;
padding:0;
border:none;
}
body
{
font-size:75%;
}
.handleImage
{
width:15px;
height:16px;
background-image:url(images/HandleHand.png);
overflow:hidden;
cursor:se-resize;
}
.resizingImage
{

padding:0px;
border-style:solid;
border-width:3px;
border-color:#B4D35D;
}
.frameImage
{
width:130px;
height:65px;
overflow:hidden;
float:left;
padding:3px;
}
.frameText
{
width:100px;
height:100px;
overflow:auto;
float:left;
background-color:#ffffff;
border-style:solid;
border-width:2px;
border-color:Gray;
font-family:Helvetica;
line-height:normal;
}
‫اﻟﺜﺎﻟﺚ‬ ‫اﻟﺘﻤﺮﯾﻦ‬ ‫ﻧﮭﺎﯾﺔ‬

‫اﻟﺮاﺑﻊ‬ ‫اﻟﺘﻤﺮﯾﻦ‬:
‫ﻓﻲ‬ ‫ﺗظﮫر‬ ‫ﻟﻘﺎﺋﻣﺔ‬ ‫ﻣﺷﺎﺑﮫﺔ‬ ‫ﻗﺎﺋﻣﺔ‬‫وان‬ ‫ﻋﻠﻳﮫﺎ‬ ‫اﻟرواﺑط‬ ‫ﻋدد‬ ‫زﻳﺎدة‬ ‫وﻳﻣﻛن‬ ‫اﻟﺷﮫﻳر‬ ‫ﻳﺎھوو‬ ‫ﻣوﻗﻊ‬
‫ﻣﺑﺎﺷر‬ ‫ﺑﺷﻛل‬ ‫اﻟرواﺑط‬ ‫ﺗﻠك‬ ‫اﺳﺗدﻋﺎء‬ ‫وﻳﺗم‬ ‫اﻟﺑﻳﺎﻧﺎت‬ ‫ﻣن‬ ‫ﻣﺟﻣوﻋﺔ‬ ‫ﻋﻠﻰ‬ ‫راﺑط‬ ‫ﻛل‬ ‫ﻳﺣﺗوي‬
‫ﻟﻠﺘﻤﺮﯾﻦ‬ ‫اﻟﻌﺎﻣﺔ‬ ‫اﻟﺼﻮرة‬

head runat=server
/head
body
script type=text/javascript
function PanelClick(sender, e)
{
}
function ActiveTabChanged(sender, e)
{
}
/script
div
cc1:TabContainer ID=TabContainer1 runat=server
cc1:TabPanel runat=Server ID=Panel1 HeaderText=Tab
One
ContentTemplate
br /PAGE ONE - Sample HTML Content for Tab
/ContentTemplate
/cc1:TabPanel
cc1:TabPanel runat=Server ID=Panel2 HeaderText=Tab
Two
ContentTemplate
PAGE TWO - Sample HTML Content for Tab
/ContentTemplate
/cc1:TabPanel
cc1:TabPanel runat=Server ID=Panel3
OnClientClick=PanelClick HeaderText=Tab Three
ContentTemplate
br /PAGE THREE - Sample HTML Content for Tab
/ContentTemplate
/cc1:TabPanel
/cc1:TabContainer
/div
/form
/body
/html
‫اﻟﺮاﺑﻊ‬ ‫اﻟﺘﻤﺮﯾﻦ‬ ‫ﻧﮭﺎﯾﺔ‬

‫اﻟﺨﺎﻣﺲ‬ ‫اﻟﺘﻤﺮﯾﻦ‬:
‫واﻟﺗﺣﻘق‬ ‫ﻣﺣدد‬ ‫ﺷﻛل‬ ‫وﻓق‬ ‫ﻣﻌﻠوﻣﺎت‬ ‫ادﺧﺎل‬ ‫ﻋﻠﻰ‬ ‫اﻟﻣﺳﺗﺧدم‬ ‫ﻻﺟﺑﺎر‬ ‫ﻣﻌﻳن‬ ‫ﺷﻛل‬ ‫ﻧﻣط‬ ‫وﺿﻊ‬ ‫ﻳﺗم‬
‫ادﺧﺎل‬ ‫ﻣن‬‫ﻛل‬‫ﺻﺣﻳﺢ‬ ‫ﺑﺷﻛل‬ ‫اﻟﺑﻳﺎﻧﺎت‬

head runat=server
/head
body
/asp:ScriptManager
div
br /br /
Enter a Date in the format 99/99/9999 (culture sensitive) br
/
asp:TextBox ID=TextBox1 runat=server/asp:TextBox
cc1:MaskedEditExtender ID=MaskedEditExtender1
runat=server
TargetControlID=TextBox1
Mask=99/99/9999
MaskType=Date
MessageValidatorTip=true
OnFocusCssClass=MaskedEditFocus
OnInvalidCssClass=MaskedEditError
/cc1:MaskedEditExtender
cc1:MaskedEditValidator ID=MaskedEditValidator1
runat=server
ControlToValidate=TextBox1
ControlExtender=MaskedEditExtender1
Display=Dynamic
TooltipMessage=PLease enter a date
IsValidEmpty=false
EmptyValueMessage=A Date is Required
InvalidValueMessage=Ths date is invalid
/cc1:MaskedEditValidator
br /br /
Enter a Number in the format $99,999.00 br /
runat=server
Mask=99,999.99
MaskType=Number
InputDirection=RightToLeft
DisplayMoney=Left
AcceptNegative=Left
runat=server
Display=Dynamic
TooltipMessage=Please enter a value between -100 and
12000

IsValidEmpty=false
EmptyValueMessage=A Number is Required
InvalidValueMessage=This Number is invalid
MinimumValue=-100
MinimumValueMessage=The value is too small.
MaximumValue=12000
MaximumValueMessage=The number is too large
br /br /
Enter a Time in the Format 99:99:99 (type A or P for AM and
PM)br /
runat=server
Mask=99:99:99
MaskType=Time
AcceptAMPM=true
runat=server
Display=Dynamic
TooltipMessage=Please Enter a Time
IsValidEmpty=false
EmptyValueMessage=A Time is Required
InvalidValueMessage=This Time is invalid
br /br /
/div
/form
/body
/html
{
margin:0;
padding:0;
border:none;
}
body
{
font-size:75%;
}
.MaskedEditFocus
{
background-color: #ffffcc;
color: #000000;

}
.MaskedEditError
{
background-color: #ffcccc;
}
‫ﻧﮭﺎ‬‫ﯾ‬‫اﻟﺨﺎﻣﺲ‬ ‫اﻟﺘﻤﺮﯾﻦ‬ ‫ﺔ‬

‫اﻟﺴﺎدس‬ ‫اﻟﺘﻤﺮﯾﻦ‬:
‫ﻋﻠ‬ ‫اﻟﻣﺳﺗﺧدم‬ ‫ﺗﺳﺎﻋد‬ ‫ﻋﺑﺎرة‬ ‫ﺑداﺧﻠﻪ‬ ‫ﻳظﮫر‬ ‫ﻧص‬ ‫ﺻﻧدوق‬‫داﺧل‬ ‫اﻹدﺧﺎل‬ ‫ﻳﺟب‬ ‫ﻣﺎذا‬ ‫ﻣﻌرﻓﺔ‬ ‫ﻰ‬
‫إدﺧﺎل‬ ‫ﻋﻠﻰ‬ ‫اﻟﻣﺳﺗﺧدم‬ ‫ﻹﺟﺑﺎر‬ ‫اﻟﺗﺣﻘق‬ ‫ﻋﻧﺎﺻر‬ ‫ﺗطﺑﻳق‬ ‫وﻳﻣﻛن‬ ‫ﺷﻳت‬ ‫ﺳﺗﺎﻳل‬ ‫ﺑﺎﺳﺗﺧدام‬ ‫اﻟﺻﻧدوق‬
‫ﻣﻌﻳﻧﺔ‬ ‫ﻗﻳم‬
‫ﻟﻠﺘﻤﺮﯾﻦ‬ ‫اﻟﻌﺎم‬ ‫اﻟﺸﻜﻞ‬
TextBoxWatermarkExtender‫إﻟﻰ‬ ‫إﺿﺎﻓﺘﮫ‬ ‫ﯾﺘﻢ‬ ‫ﻧﺺ‬ ‫ﺻﻨﺪوق‬ ‫ﻛﻞ‬ ‫ﻣﻊ‬ ‫ﻓﺮدي‬ ‫ﺑﺸﻜﻞ‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬ ‫ﯾﺴﺘﺨﺪم‬
‫ﻋﺒﺮ‬ ‫اﻟﺮﺑﻂ‬ ‫وﯾﺘﻢ‬ ‫اﻟﺼﻔﺤﺔ‬TargetControlID‫ﻓﻲ‬ ‫اﻷﺳﺎﺳﯿﺔ‬ ‫اﻟﻌﻨﺎﺻﺮ‬ ‫ﺑﯿﻦ‬ ‫اﻟﺮﺑﻂ‬ ‫ﻣﻔﺘﺎح‬ ‫ﯾﻌﺘﺒﺮ‬ ‫اﻟﺬي‬ASP
‫ﻟﻠﻌﻨﺼﺮ‬ ‫اﻷﺳﺎﺳﻲ‬ ‫اﻟﻤﻌﺮف‬ ‫ﻋﺒﺮ‬ ‫اﻟﺮﺑﻂ‬ ‫ﯾﺘﻢ‬ ‫ﺣﯿﺚ‬ ‫اﻻﺟﺎﻛﺲ‬ ‫وﻋﻨﺎﺻﺮ‬.
‫اﻟﺘﻤﺮﯾﻦ‬ ‫ﻓﻲ‬ ‫اﻟﻤﺴﺘﺨﺪم‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬:

head runat=server
title6/title
/head
body
/asp:ScriptManager
div
Width=307px/asp:TextBoxbr /
Width=307px/asp:TextBoxbr /
asp:Button ID=Button1 runat=server Text=Button /br
/
cc1:TextBoxWatermarkExtender ID=TextBoxWatermarkExtender1
WatermarkCssClass=watermark WatermarkText=Please enter a phone
number (963) 955-264766
/cc1:TextBoxWatermarkExtender
cc1:TextBoxWatermarkExtender ID=TextBoxWatermarkExtender2
WatermarkCssClass=watermark WatermarkText=Enter anything
/cc1:TextBoxWatermarkExtender
/div
/form
/body
/html

.watermark
{
background: #FFAAFF;
}
‫ﺑﻮاﺳﻄﺔ‬ ‫اﺟﺎﻛﺲ‬ ‫ﻋﻨﺼﺮ‬ ‫ﻋﺒﺮ‬ ‫ﻣﻨﺎداﺗﮫ‬ ‫ﯾﺘﻢ‬ ‫ﺻﻒ‬ ‫ﻋﻠﻰ‬ ‫اﻟﺘﻨﺴﯿﻖ‬ ‫ﺻﻔﺤﺔ‬ ‫ﺗﺤﺘﻮي‬WatermarkCssClass‫ﯾﺘﻢ‬ ‫ﺣﯿﺚ‬
‫اﻟﺼﻔﺤﺔ‬ ‫ﻋﺒﺮ‬ ‫ﻣﻨﺎداﺗﮫ‬ ‫ﻋﻦ‬ ‫اﻟﺼﻒ‬ ‫اﺳﻢ‬ ‫ذﻛﺮ‬.
‫اﻟﺴﺎدس‬ ‫اﻟﺘﻤﺮﯾﻦ‬ ‫ﻧﮭﺎﯾﺔ‬

‫اﻟﺘﻤﺮﯾﻦ‬‫اﻟﺴﺎﺑﻊ‬:
‫إي‬ ‫أو‬ ‫ﻧﺻوص‬ ‫ﻋﻠﻰ‬ ‫ﻳﺣﺗوي‬ ‫ﻓﻼش‬ ‫ﺷﻛل‬ ‫ﻋﻠﻰ‬ ‫ﺻﻧدوق‬ ‫ﻟدﻳﻧﺎ‬ ‫ﻳظﮫر‬ ‫ﻋﻠﻳﻪ‬ ‫اﻟﺿﻐط‬ ‫ﻋﻧد‬ ‫أﻣر‬ ‫زر‬
‫ﻋﻧﺎﺻر‬ ‫ﻣن‬ ‫ﻋﻧﺻر‬html‫اﻟﻣﻔﺗوح‬ ‫اﻟﺻﻧدوق‬ ‫إﻏﻼق‬ ‫ﻳﺗم‬ ‫إن‬ ‫إﻟﻰ‬ ‫اﻟزر‬ ‫ﻋﻠﻰ‬ ‫اﻟﺿﻐط‬ ‫إﻟﻐﺎء‬ ‫وﻳﺗم‬.
‫اﺳﺘﺨﺪاﻣﮭﺎ‬ ‫اﻟﻤﻤﻜﻦ‬ ‫وﻣﻦ‬ ‫ﺟﺪا‬ ‫ﻗﻮﯾﺔ‬ ‫اﻟﺘﻤﺮﯾﻦ‬ ‫ھﺬا‬ ‫ﻓﻲ‬ ‫اﻟﻤﺴﺘﺨﺪﻣﺔ‬ ‫اﻟﺤﺮﻛﺔ‬‫اﻟﻤﻮﻗﻊ‬ ‫ﺻﻔﺤﺎت‬ ‫ﺿﻤﻦ‬ ‫ﻛﺒﯿﺮ‬ ‫ﺑﺸﻜﻞ‬
‫ﻋﻨﺎﺻﺮ‬ ‫اﻏﻠﺐ‬ ‫ﻋﻠﻰ‬ ‫اﻟﺼﻨﺪوق‬ ‫ﯾﺤﺘﻮي‬ ‫إن‬ ‫اﻟﻤﻤﻜﻦ‬ ‫ﻣﻦ‬ ‫و‬ ‫اﻟﺼﻔﺤﺔ‬ ‫ﻓﻲ‬ ‫ﺟﻤﯿﻠﺔ‬ ‫ﺣﺮﻛﺔ‬ ‫ﻟﺪﯾﻨﺎ‬ ‫ﻓﯿﻜﻮن‬ ‫اﻻﻟﻜﺘﺮوﻧﻲ‬html
‫ﻓﻲ‬ ‫اﻟﻤﻔﺎھﯿﻢ‬ ‫وﺑﻌﺾ‬ ‫اﻟﻌﻤﻞ‬ ‫ﻣﻦ‬ ‫اﻟﻘﻠﯿﻞ‬ ‫إﻟﻰ‬ ‫اﻟﺘﻤﺮﯾﻦ‬ ‫ھﺬا‬ ‫ﻓﻲ‬ ‫اﻟﺒﺮﻣﺠﻲ‬ ‫اﻟﻜﻮد‬ ‫ﺗﺮﻛﺐ‬ ‫ﯾﺤﺘﺎج‬JavaScript‫وﯾﻤﻜﻦ‬
‫ﺑﺴﮭﻮﻟﺔ‬ ‫ﻋﻠﯿﮫ‬ ‫اﻟﺘﻄﻮﯾﺮ‬.
‫ﻟﺒﯿﺌ‬ ‫اﻟﻌﺎم‬ ‫اﻟﺸﻜﻞ‬‫اﻟﻌﻤﻞ‬ ‫ﺔ‬:

head runat=server
title7/title
link href=AnimSheet.css rel=stylesheet type=text/css /
/head
body
/asp:ScriptManager
div class=demoarea
Any HTML content that you want.
br /br /
!-- Button used to launch the animation --
asp:Button ID=btnInfo OnClientClick=return false;
runat=server Text=Click Here /
!-- Wire frame div used to transition from the button to
the info panel --
div id=flyout class=wireFrame/div
!-- Info panel to be displayed as a flyout when the button
is clicked --
div id=info style=display: none; width: 250px; z-index:
2; opacity: 0; filter:
progid:DXImageTransform.Microsoft.Alpha(opacity=0); font-size: 12px;
border: solid 1px #CCCCCC; background-color: #FFFFFF; padding: 5px;
div id=btnCloseParent style=float: right; opacity: 100;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
asp:LinkButton ID=btnClose runat=server
OnClientClick=return false; Text=X ToolTip=Close
Style=background-color: #666666; color: #FFFFFF; text-align: center;
font-weight: bold; text-decoration: none; border: outset thin
#FFFFFF; padding: 5px; /
/div
Once you get the general idea of the animation's markup, you'll
want to play a bit. All of
the animations are created from simple, reusable building
blocks that you can compose together.
Before long you'll be creating dazzling visuals. By grouping
steps together and specifying
them to be run either in sequence or in parallel, you'll

achieve almost anything you can
imagine, without writing a single line of code!
/div
script type=text/javascript language=javascript
// Move an element directly on top of another element (and
optionally
// make it the same size)
function Cover(bottom, top, ignoreSize) {
var location = Sys.UI.DomElement.getLocation(bottom);
top.style.position = 'absolute';
top.style.top = location.y + 'px';
top.style.left = location.x + 'px';
if (!ignoreSize) {
top.style.height = bottom.offsetHeight + 'px';
top.style.width = bottom.offsetWidth + 'px';
}
}
/script
cc1:AnimationExtender ID=OpenAnimation runat=server
TargetControlID=btnInfo
Animations
OnClick
Sequence
%-- Disable the button so it can't be clicked again --%
EnableAction Enabled=false /
%-- Position the wire frame and show it --%
ScriptAction Script=Cover($get('btnInfo'),
$get('flyout')); /
StyleAction AnimationTarget=flyout
Attribute=display Value=block/
%-- Move the wire frame from the button's bounds to
the info panel's bounds --%
Parallel AnimationTarget=flyout Duration=.3
Fps=25
Move Horizontal=150 Vertical=-50 /
Resize Width=260 Height=280 /
Color PropertyKey=backgroundColor
StartValue=#AAAAAA EndValue=#FFFFFF /
/Parallel
%-- Move the panel on top of the wire frame, fade it
in, and hide the frame --%
ScriptAction Script=Cover($get('flyout'),
$get('info'), true); /
StyleAction AnimationTarget=info
Attribute=display Value=block/
FadeIn AnimationTarget=info Duration=.2/
StyleAction AnimationTarget=flyout
Attribute=display Value=none/
/Sequence
/OnClick
/Animations
/cc1:AnimationExtender
cc1:AnimationExtender id=CloseAnimation runat=server
TargetControlID=btnClose
Animations
OnClick
Sequence AnimationTarget=info
%-- Shrink the panel out of view --%
StyleAction Attribute=overflow Value=hidden/
Parallel Duration=.3 Fps=15

Scale ScaleFactor=0.05 Center=true
ScaleFont=true FontUnit=px /
FadeOut /
/Parallel
%-- Reset the target --%
StyleAction Attribute=display Value=none/
StyleAction Attribute=width Value=250px/
StyleAction Attribute=height Value=/
StyleAction Attribute=fontSize Value=12px/
%-- Enable the button --%
EnableAction AnimationTarget=btnInfo Enabled=true
/
/Sequence
/OnClick
/Animations
/cc1:AnimationExtender
/div
/form
/body
/html
.demoarea {
padding:20px;
background:#FFF url(images/demotop.png) no-repeat left top;
}
.demoarea p
{
padding:5px;
}
.demoheading {
padding-bottom:20px;
color:#5377A9;
font-family:Arial, Sans-Serif;
font-weight:bold;
font-size:1.5em;
}
.demobottom {
height:8px;
background:#FFF url(images/demobottom.png) no-repeat left
bottom;
}
wireFrame {
display: none;
overflow: hidden;
z-index: 2;
background-color: #FFFFFF;
border: solid 1px #D0D0D0;
}
CloseButtonStyle {
background-color: #666666;

color: #FFFFFF;
text-align: center;
font-weight: bold;
text-decoration: none;
border: outset thin #FFFFFF;
padding: 5px;
}
‫اﻟﺴﺎﺑﻊ‬ ‫اﻟﺘﻤﺮﯾﻦ‬ ‫ﻧﮭﺎﯾﺔ‬

‫اﻟﺜﺎﻣﻦ‬ ‫اﻟﺘﻤﺮﯾﻦ‬:
‫ﻟﻌﻧﺻر‬ ‫اﻟﻣﺗﻌدد‬ ‫اﻻﺧﺗﻳﺎر‬ ‫ﻣﻔﮫوم‬ ‫ﺗﻐﻳر‬ ‫ﺗم‬CheckBox‫اﻟﻌﻧﺎﺻر‬ ‫ﻣن‬ ‫وﺣﻳد‬ ‫ﻋﻧﺻر‬ ‫ﺑﺎﺧﺗﻳﺎر‬ ‫اﻟﻣﺳﺗﺧدم‬ ‫ﺳﻳﻘوم‬ ‫ﺣﻳث‬
‫اﻟﻣﺗﻌدد‬ ‫اﻻﺧﺗﻳﺎر‬ ‫وﻻﻳﻣﻛﻧﻪ‬ ‫اﻟﻣﺗوﻓرة‬.

head runat=server
/head
body
div
br /
table
tr
td style=width: 163px; height: 30px;
IS over 25 Years of Age/td
/tr
tr
td style=width: 163px
asp:CheckBox ID=IsOver25 runat=server
Text=I am over 25 years old. /br /
ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID=IsOver25Ex
runat=server
TargetControlID=IsOver25
Key=AgeChoice /
/td
Text=I am Over 35 years old. /br /
ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID=IsNotOver35Ex
runat=server
Key=AgeChoice /
/td
Text=I am Over 45 years old. /br /
ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID=IsNotOver5Ex
runat=server
Key=AgeChoice /
/td
/tr
/table

/div
/form
/body
/html
{
margin:0;
padding:0;
border:none;
}
body
{
font-size:75%;
}
‫اﻟﺜﺎﻣﻦ‬ ‫اﻟﺘﻤﺮﯾﻦ‬ ‫ﻧﮭﺎﯾﺔ‬

‫اﻟﺘﺎﺳﻊ‬ ‫اﻟﺘﻤﺮﯾﻦ‬:
‫ﺗﻔﺎﺻﻳل‬ ‫ﻋن‬ ‫ﻣﺧﺗﻠﻔﺔ‬ ‫ﻣﻌﻠوﻣﺎت‬ ‫ﻋﻠﻰ‬ ‫ﺗﺣﺗوي‬ ‫ﻗﺎﺋﻣﺔ‬ ‫ﺗﺳدل‬ ‫ﻋﻠﻳﻪ‬ ‫اﻟﺿﻐط‬ ‫ﻋﻧد‬ ‫اﻟﺻﻔﺣﺔ‬ ‫ﻓﻲ‬ ‫ﺷرﻳط‬
‫ﻣ‬ ‫ﻋﻠﻳﻪ‬ ‫اﻟﺿﻐط‬ ‫وﻋﻧد‬ ‫اﻟﺷرﻳط‬‫ﺟﻣﻳﻠﺔ‬ ‫ﺑطرﻗﺔ‬ ‫اﻟﻣﻌﻠوﻣﺎت‬ ‫ﺗﺧﺗﻔﻲ‬ ‫أﺧرى‬ ‫رة‬.

head runat=server
titleS9/title
/head
body
asp:ScriptManager ID=MasterScriptManager
EnableScriptGlobalization=false runat=server
/asp:ScriptManager
cc1:CollapsiblePanelExtender ID=cpe runat=server
TargetControlID=ContentPanel
ExpandControlID=TitlePanel
CollapseControlID=TitlePanel
Collapsed=True
TextLabelID=Label1
ExpandedText=(Hide Details...)
CollapsedText=(Show Details...)
SuppressPostBack=true
/cc1:CollapsiblePanelExtender

Ajax . net(arabic)

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Ajax . net(arabic)