‫‪AJAX‬‬ ‫‪.

net‬‬

‫اﻟﺠﺰء اﻷول‬

‫ﺗﺄﻟﻴﻒ ﻭﺇﻋﺪﺍﺩ‬
‫ﺁﻭﺍﺯ ﺷﻴﺨﻲ‬
‫‪Ramanooo@hotmail.com‬‬

‫ﻟﻤﺤﺔ ﻋﻦ اﻟﻜﺘﺎب ‪:‬‬

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

‫اﻟﺪرس اﻷول ‪ :‬ﺗﺤﺪﯾﺚ ﺟﺰء ﻣﻦ ﺻﻔﺤﺔ وب ﻧﺤﻦ ﻧﻘﻮم ﺑﺎﺧﺘﯿﺎر ﻋﻨﺼﺮ ﻣﺤﺪد ﻟﯿﺘﻢ ﺗﺤﺪﯾﺚ ﺑﯿﺎﻧﺎﺗﮫ دون ﺗﺤﺪﯾﺚ ﻛﺎﻣﻞ‬
‫اﻟﺼﻔﺤﺔ ﻋﻨﺪ اﻟﻀﻐﻂ ﻋﻠﻰ زر اﻹرﺳﺎل ‪.‬‬

‫اﻟﺪرس اﻟﺜﺎﻧﻲ ‪ :‬ﺗﺤﺪﯾﺚ ﺑﯿﺎﻧﺎت ﻋﺪة ﻋﻨﺎﺻﺮ ﻓﻲ اﻟﺼﻔﺤﺔ ﻋﺒﺮ اﺳﺘﺨﺪام ﻋﺪة ‪ Update Panel‬ﻓﻲ ﻧﻔﺲ اﻟﺼﻔﺤﺔ ‪.‬‬

‫اﻟﺪرس اﻟﺜﺎﻟﺚ ‪ Panel :‬ﯾﻈﮭﺮ ﻓﻲ أﻋﻠﻰ ﯾﻤﯿﻦ أو ﯾﺴﺎر اﻟﺼﻔﺤﺔ وﯾﺒﻘﻰ ﺛﺎﺑﺘﺎ ً ﻓﻲ اﻷﻋﻠﻰ ﺣﺘﻰ إﻧﺰال ﺷﺮﯾﻂ اﻟﺼﻔﺤﺔ‬
‫إﻟﻰ اﻷﺳﻔﻞ ﯾﺴﺘﺨﺪم ﻓﻲ اﻟﺤﺎﻻت اﻟﺪﻋﺎﺋﯿﺔ أو ﺣﺎﻻت ﻋﺪم ﺗﺴﺠﯿﻞ دﺧﻮل اﻟﺰوار اﻟﻤﻮﻗﻊ أو ﻟﺤﺎﻻت أﺧﺮى ‪.‬‬

‫اﻟﺪرس اﻟﺮاﺑﻊ ‪ Panel :‬ﯾﻤﻜﻨﻨﺎ اﻹﻣﺴﺎك ﺑﮫ وﺗﺤﺮﯾﻜﮫ إﻟﻰ اﻟﻤﻜﺎن اﻟﺬي ﻧﺸﺎء ﺑﺪاﺧﻞ اﻟﺼﻔﺤﺔ ‪.‬‬

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

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

‫اﻟﺪرس اﻟﺴﺎﺑﻊ ‪ :‬ﻋﻨﺪ إرﺳﺎل أﯾﻤﯿﻞ أو رﺳﺎﻟﺔ ﻧﺤﺘﺎج إﻟﻰ ﺗﻌﺪﯾﻞ اﻟﺨﻂ ﻓﯿﻤﻜﻨﻨﺎ ھﻨﺎ إن ﻧﺠﻌﻞ اﻟﺨﻂ ﻋﺮﯾﻀﺎ أو ﻣﺎﺋﻼ‬
‫ﻓﻘﻂ واﻟﺘﺤﻜﻢ ﺑﺈظﮭﺎر اﻟﻌﻨﺎﺻﺮ اﻟﺘﻲ ﻧﺸﺎء ﻋﺒﺮ إﻧﺸﺎء ﻣﺤﺮر ﻧﺼﻮص ﺧﺎص ﺑﻨﺎ ‪ ،‬ﻓﯿﻤﻜﻨﻨﺎ ھﻨﺎ إﺿﺎﻓﺔ ﻣﺤﺮر‬
‫اﻟﻨﺼﻮص إﻟﻰ ﺻﻔﺤﺘﻨﺎ ﻟﻠﺘﺤﻜﻢ ﺑﺘﻨﺴﯿﻖ اﻟﺨﻂ ﻗﺒﻞ إرﺳﺎل اﻟﺮﺳﺎﻟﺔ ‪.‬‬

‫اﻟﺪرس اﻟﺜﺎﻣﻦ ‪ :‬رﺳﺎﻟﺔ ﺗﺄﻛﯿﺪ إرﺳﺎل اﻟﺒﯿﺎﻧﺎت أو رﺳﺎﻟﺔ ﺗﻨﺒﯿﮫ إرﺳﺎل أﻣﺮ ﻣﻌﯿﻦ إﻟﻰ اﻟﻤﺨﺪم ‪.‬‬

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

‫ﺗﻌرﯾﻔﮭﺎ ‪:‬‬

‫‪ AJAX‬اﺧﺗﺻﺎر ﻟﻌﺑﺎرة ‪. Asynchronous JavaScript And XML‬‬

‫ﺗﺎرﯾﺦ اﺟﺎﻛﺲ ‪:‬‬

‫ﻣﺼﻄﻠﺢ اﺟﺎﻛﺲ ظﮭﺮ أول ﻣﺮة ﻓﻲ ﻣﻘﺎﻟﺔ ﺑﺘﺎرﯾﺦ ‪ ١٨‬ﻓﺒﺮاﯾﺮ ‪ ٢٠٠٥‬ﻟﻜﺎﺗﺐ أﻣﺮﯾﻜﻲ وﻗﺪ وﺻﻒ ﻣﺠﻤﻮﻋﺔ ﺗﻘﻨﯿﺎت و‬
‫أﺳﺎﻟﯿﺐ اﺳﺘﺨﺪﻣﺖ ﻣﻦ ﻗﺒﻞ ﺟﻮﺟﻞ ‪ GOOGLE‬ﻓﻲ ﺟﻮﺟﻞ أرث ﺗﻤﻜﻦ اﻟﻤﺴﺘﺨﺪم ﻣﻦ اﻟﺘﻌﺎﻣﻞ ﻣﻊ اﻟﻤﻮﻗﻊ‬
‫اﻹﻟﻜﺘﺮوﻧﻲ ﺑﻄﺮﯾﻘﺔ ﺗﺸﺒﮫ ﺑﺮاﻣﺞ اﻟﺤﺎﺳﻮب ‪ ،‬ﺣﯿﺚ ﯾﻘﻮم اﻟﻤﺴﺘﺨﺪم ﺑﺎﻟﻘﯿﺎم ﺑﺄﻋﻤﺎﻟﮫ ﻣﻦ ﺧﻼل ﺻﻔﺤﺔ واﺣﺪة‪ .‬ﻟﻠﺘﺬﻛﯿﺮ‪،‬‬
‫ﻓﺈن اﻷدوات اﻟﻤﺴﺘﻌﻤﻠﺔ ﻓﻲ ھﺬه اﻟﺘﻘﻨﯿﺔ ﻛﺎﻧﺖ ﻣﻮﺟﻮدة ﻗﺒﻞ ظﮭﻮر اﻟﻤﻘﺎﻟﺔ‪ .‬ﻓﻔﻲ ‪ ،٢٠٠١‬ظﮭﺮ اﻷﻣﺮ ‪XMLHttp‬‬
‫داﺧﻞ ﻣﻜﺘﺒﺔ ‪) MSXML‬اﻟﻤﻜﺘﺒﺔ اﻟﺘﻲ ﺻ ﻤﻤﺖ ﻓﻲ اﻟﺒﺪء ﻟﺪﻋﻢ اﻟﻤﺘﺼﻔﺢ اﻧﺘﺮﻧﺖ إﻛﺴﺒﻠﻮرر اﻹﺻﺪار ‪ .(٥‬وظﮭﺮ‬
‫ﻣﻜﺎﻓﺊ ﻟﮫ ﺑﺎﺳﻢ ‪ XMLHttpRequest‬ﻋﻠﻰ ﻣﺘﺼﻔﺢ ﻣﻮزﯾﻼ وﻣﻦ ﺛﻢ اﻟﻤﺘﺼﻔﺤﺎت اﻷﺧﺮى‪.‬‬

‫ﻣﺴﺘﻘﺒﻞ اﺟﺎﻛﺲ ‪:‬‬

‫ھﻨﺎك اﻟﻜﺜﯿﺮ ﯾﻌﺘﻘﺪون أﻧﮫ ﺳﯿﺘﺤﻮل ﻋﺎﻟﻢ اﻟﺒﺮﻣﺠﯿﺎت إﻟﻰ اﻟﻮﯾﺐ ﺑﻤﻌﻨﻲ اﻧﮫ ﯾﻤﻜﻨﻚ اﺳﺘﺨﺪام اﻟﺒﺮاﻣﺞ اﻟﻤﺨﺘﻠﻔﺔ ﻣﻦ‬
‫ﺧﻼل اﻟﻤﺘﺼﻔﺢ وھﻨﺎك ﻣﻮاﻗﻊ ﻛﺜﯿﺮة ﺑﺪأت اﻟﻤﺸﻮار ﻣﺜﻞ ﺗﺤﻮﯾﻞ ﻣﻠﻔﺎﺗﻚ إﻟﻰ ﺻﯿﻎ ﻣﺨﺘﻠﻔﺔ ﻣﻦ ﺧﻼل اﻟﻤﺘﺼﻔﺢ ‪،‬‬
‫ﻓﺒﻌﻀﮭﻢ ﻗﺎل إن ﺗﻄﺒﯿﻘﺎت اﻟﻮﯾﺐ ﻟﻢ ﺗﻌﺪ ﺻﻔﺤﺎت ﺑﻌﺪ اﻵن ﺑﻞ أﺻﺒﺤﺖ ﺗﻄﺒﯿﻘﺎت ﺳﻄﺢ ﻣﻜﺘﺐ ﺣﻘﯿﻘﯿﺔ ‪.‬‬

‫اﻟﺒﺪء ‪:‬‬

‫ﺳﻨﺘﻌﻠﻢ ﻓﻲ ﻛﺘﺎﺑﻨﺎ اﻟﻤﺼﻮر اﻟﺘﻘﻨﯿﺔ اﻷﻛﺜﺮ اﻧﺘﺸﺎراً ﻟﻤﻨﺢ ﺻﻔﺤﺎت ﻣﻮاﻗﻊ اﻟﻮب أداء ﻋﺎﻟﻲ وﺟﺎذﺑﯿﺔ ﻛﺒﯿﺮة‪،‬اﻋﺘﻤﺪ‬
‫ھﺬا اﻟﻜﺘﺎب اﻋﺘﻤﺎدا ً ﻛﺒﯿﺮاً ﻋﻠﻰ اﻟﺼﻮر ﻓﻲ ﺷﺮح ﻣﺤﺘﻮﯾﺎت ھﺬه اﻟﺘﻘﻨﯿﺔ ﻟﺠﻌﻞ دراﺳﺘﮫ أﻛﺜﺮ ﺳﮭﻮﻟﺔ وراﺣﺔ‬
‫ﻟﻠﻤﺘﻌﻠﻢ ﻓﺄﺗﻤﻨﻰ إن ﯾﺴﺘﻔﺎد ﻣﻦ ھﺬا اﻟﻜﺘﺎب اﻟﻌﺪد اﻷﻛﺒﺮ ﻣﻦ ﻣﺒﺮﻣﺠﻲ اﻟﻤﻮاﻗﻊ اﻟﺬﯾﻦ ﯾﺴﺘﺨﺪﻣﻮن ﺑﯿﺌﺔ اﻟﺪوت ﻧﯿﺖ‬
‫ﻓﻲ ﻋﻤﻠﮭﻢ ‪.‬‬
‫ﯾﻜﻮن ﻟﺪﯾﻨﺎ ﻓﻲ ‪ Visual Studio 2008‬اﻟﻌﻨﺎﺻﺮ اﻷﺳﺎﺳﯿﺔ ﻓﻲ اﺟﺎﻛﺲ وھﻲ ‪ AJAX Extensions‬ﻧﻘﻮم‬
‫ﺑﺈﺿﺎﻓﺔ ﻋﻨﺎﺻﺮ اﺟﺎﻛﺲ أﺧﺮى وھﻲ ‪ AJAX Control Toolkit‬ھﻲ ﻋﺒﺎرة ﻋﻦ ﻣﺠﻤﻮﻋﺔ ﻋﻨﺎﺻﺮ‬
‫ﺗﺘﯿﺢ ﻟﻨﺎ اﻟﻘﯿﺎم ﺑﺘﻄﺒﯿﻖ اﻟﻌﺪﯾﺪ ﻣﻦ ﺣﺮﻛﺎت اﺟﺎﻛﺲ ﻋﻠﻰ ﺻﻔﺤﺔ اﻟﻮب وﯾﺘﻢ ﺗﺤﺪﯾﺚ ﺗﻠﻚ اﻟﻌﻨﺎﺻﺮ ﺑﺸﻜﻞ‬
‫دوري ﻣﻦ ﻗﺒﻞ ﺷﺮﻛﺔ ‪Microsoft‬‬

‫ﺗﻨﺼﯿﺐ اﻷدوات اﻹﺿﺎﻓﯿﺔ ﻟﺘﻘﻨﯿﺔ اﺟﺎﻛﺲ ﺿﻤﻦ ﺑﯿﺌﺔ اﻟﺪوت ﻧﯿﺖ‬

‫‪AJAX Control Toolkit‬‬

‫ﻋﻨﺎﺻﺮ اﺟﺎﻛﺲ اﻷﺳﺎﺳﯿﺔ اﻟﺘﻲ ﺗﻮﺟﺪ ﻋﻨﺪ ﺗﻨﺼﯿﺐ ‪Microsoft Visual Studio 2008‬‬
 ‫ﻧﻘﻮم ﺑﺈﺗﺒﺎع اﻟﺨﻄﻮات اﻟﺘﺎﻟﯿﺔ ﻟﺘﻨﺼﯿﺐ ﻋﻨﺎﺻﺮ ‪ 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‬‬
‫;)(‪Label2.Text = DateTime.Now.ToString‬‬
‫;)(‪Label3.Text = DateTime.Now.ToString‬‬
‫}‬
‫}‬

‫ﺑﻌﺪ ﺗﻨﺰﯾﻞ اﻟﻌﻨﺎﺻﺮ اﻷﺳﺎﺳﯿﺔ ﻓﻲ ﺑﯿﺌﺔ اﻟﺪوت ﻧﯿﺖ ﻧﻘﻮم ﺑﺎﺳﺘﺨﺪام اﻟﻌﻨﺼﺮ ‪ Update Panel‬وھﻮ ﻣﻦ ﻋﻨﺎﺻﺮ‬
‫‪ Ajax Extensions‬اﻟﻤﺒﯿﻦ ﻓﻲ اﻟﺼﻮرة‬

‫ﺑﻌﺪ إدراج ﻋﻨﺼﺮ اﺟﺎﻛﺲ ﻓﻲ ﺻﻔﺤﺔ اﻟﺘﺼﻤﯿﻢ ‪ ،‬ھﻨﺎ ﻧﻘﻮم ﺑﻮﺿﻊ اﻟﻌﻨﺼﺮ اﻟﺬي ﻧﻮد ﺗﺤﺪﯾﺜﮫ داﺧﻞ ﻋﻨﺼﺮ‬
‫اﺟﺎﻛﺲ ﻟﯿﺘﻢ ﺗﺤﺪﯾﺚ ﻣﺤﺘﻮﯾﺎﺗﮫ ﻣﻦ ﻗﺒﻞ اﻟﻤﺨﺪم وﺗﺮك اﻟﻌﻨﺎﺻﺮ اﻷﺧﺮى ﺑﺪون ﺗﺤﺪﯾﺚ اﻟﺘﻲ ﺗﻜﻮن ﺧﺎرج ﻋﻨﺼﺮ‬
‫اﺟﺎﻛﺲ اﻟﻤﺴﺘﺨﺪم‬
 ‫وﻋﻨﺪ اﻟﺘﺸﻐﯿﻞ ﯾﻈﮭﺮ ﻟﺪﯾﻨﺎ اﻟﺘﺎﻟﻲ ‪:‬‬

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

‫ﻧﮭﺎﯾﺔ اﻟﺪرس اﻷول ﻓﻲ اﺟﺎﻛﺲ‬

 ‫اﻟﺪرس اﻟﺜﺎﻧﻲ‬

‫ﺗﺤﺪﯾﺚ ﺑﯿﺎﻧﺎت ﻋﺪة ﻋﻨﺎﺻﺮ ﻓﻲ اﻟﺼﻔﺤﺔ ﻋﺒﺮ اﺳﺘﺨﺪام ﻋﺪة ‪ Update Panel‬ﻓﻲ ﻧﻔﺲ اﻟﺼﻔﺤﺔ‬

‫ﻓﻲ ھﺬا اﻟﺪرس ﺳﻨﻘﻮم ﺑﺎﺳﺘﺨﺪام ﻋﺪة ﻋﻨﺎﺻﺮ ﻣﻦ ‪ Update Panel‬ﻹرﺳﺎل ﻣﺤﺘﻮﯾﺎﺗﮭﺎ إﻟﻰ اﻟﻤﺨﺪم‬
‫ﺳﻨﺴﺘﺨﺪم اﻟﻤﺜﺎل ﻓﻲ اﻟﺪرس اﻷول وﻧﺘﺎﺑﻊ ﺣﻞ ﺗﻤﺮﯾﻨﻨﺎ ھﺬا ‪:‬‬

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

‫‪ -‬ﺗﻮﺿﺢ اﻟﺼﻮرة اﺳﺘﺨﺪام ‪: Conditional‬‬

 ‫ﻓﻲ اﻟﺼﻮرة اﻟﺴﺎﺑﻘﺔ ﺗﻢ ﺗﺤﺪﯾﺚ ‪ Update Panel1‬ﻓﻘﻂ وﯾﻤﻜﻨﻨﺎ ﺑﻄﺮﯾﻘﺔ أﺧﺮى إن ﻧﺠﻌﻞ ‪Update Panel2‬‬
‫ﺗﺘﺤﺪث ﺑﯿﺎﻧﺎﺗﮭﺎ ﺑﻌﻤﻞ اﻷﺗﻲ ‪:‬‬

‫وﻋﻨﺪ اﻟﺘﺸﻐﯿﻞ ﯾﻈﮭﺮ ﻟﻨﺎ اﻟﺘﺎﻟﻲ ‪:‬‬

‫ﻓﯿﻤﻜﻨﻨﺎ اﺳﺘﺨﺪام ‪ 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">
<title>Untitled 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="server">Please click
</asp:LinkButton><br />
<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‬ﯾﻤﻜﻨﻨﺎ اﻹﻣﺴﺎك ﺑﮫ وﺗﺤﺮﯾﻜﮫ إﻟﻰ اﻟﻤﻜﺎن اﻟﺬي ﻧﺸﺎء ﺑﺪاﺧﻞ اﻟﺼﻔﺤﺔ‬

‫ﺻﻮرة ﺻﻔﺤﺔ اﻟﻮب ﯾﻜﻮن ﻛﺎﻟﺘﺎﻟﻲ ‪:‬‬

‫ﻋﻨﺼﺮ اﺟﺎﻛﺲ اﻟﻤﺴﺘﺨﺪم ‪:‬‬

 :‫اﻟﻜﻮد اﻟﺒﺮﻣﺠﻲ ﺑﺼﻔﺤﺔ اﻟﻮب‬

<%@ 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 id="Head1" runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<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 />
One<br /><br />
Two<br /><br />
Three<br /><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;
{

: ‫اﻟﺼﻮرة اﻟﻌﺎﻣﺔ ﻟﻤﻠﻔﺎت اﻟﺪرس‬

 ‫ﻋﻨﺪ اﻟﺘﻨﻔﯿﺬ ﯾﻈﮭﺮ ﻟﺪﯾﻨﺎ ‪:‬‬

‫ﻧﮭﺎﯾﺔ اﻟﺪرس اﻟﺮاﺑﻊ ﻓﻲ اﺟﺎﻛﺲ‬

 ‫اﻟﺪرس اﻟﺨﺎﻣﺲ‬

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

‫اﻟﺸﻜﻞ اﻟﻌﺎم ﻟﻠﺘﻤﺮﯾﻦ ‪:‬‬

‫ﺻﻮرة ﻋﻨﺼﺮ اﺟﺎﻛﺲ اﻟﻤﺴﺘﺨﺪم ‪:‬‬

‫اﻟﺸﻜﻞ اﻟﻌﺎم ﻟﻤﺤﯿﻂ اﻟﻌﻤﻞ ‪:‬‬

 ‫ﻧﺴﺘﺨﺪم ﻓﻲ درﺳﻨﺎ ھﺬا ﻋﻨﺼﺮ ﺟﻤﯿﻞ ﺟﺪا ﯾﺴﻤﺢ ﻟﻨﺎ ﺑﺎﺧﺘﯿﺎر ﻟﻮن ﻣﻦ ﺣﺎﻣﻞ اﻷﻟﻮان وﯾﻘﻮم ﺑﺈظﮭﺎره ﺑﺪاﺧﻞ ﺑﺎﻧﻞ‬
: ‫ﺧﺎرﺟﻲ ﻓﻲ اﻟﺼﻮرة ﺷﺮح ﻷھﻢ إﺣﺪاث اﻟﻌﻤﻞ‬

: ‫اﻟﻜﻮد اﻟﺒﺮﻣﺠﻲ ﻟﺼﻔﺤﺔ اﻟﻮب‬

<%@ Page Language="C#" AutoEventWireup="true"

CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ 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">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>ACT Color Picker COntrol</title>
</head>
<body>
<form id="form1" runat="server">
<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>

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

 ‫اﻟﺪرس اﻟﺴﺎدس‬

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

‫اﻟﺼﻮرة اﻟﻌﺎﻣﺔ ﻟﻠﺘﻤﺮﯾﻦ ‪:‬‬

‫ﺻﻮرة ﻋﻦ ﻋﻨﺼﺮ اﺟﺎﻛﺲ اﻟﻤﺴﺘﺨﺪم ‪:‬‬

 : ‫اﻟﺼﻮرة ﺗﺸﺮح اﻟﻜﻮد اﻟﺒﺮﻣﺠﻲ ﻟﻠﺼﻔﺤﺔ‬

: ‫اﻟﻜﻮد اﻟﺒﺮﻣﺠﻲ ﻟﻠﺼﻔﺤﺔ‬

<%@ Page Language="C#" AutoEventWireup="true"

CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit"

Namespace="AjaxControlToolkit.HTMLEditor"
TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<center><cc1:Editor ID="Editor1" runat="server" Width="600px"
/></center><br /><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;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = Editor1.Content;
}
}

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

 ‫اﻟﺪرس اﻟﺴﺎﺑﻊ‬

‫ﻋﻨﺪ إرﺳﺎل أﯾﻤﯿﻞ أو رﺳﺎﻟﺔ ﻧﺤﺘﺎج إﻟﻰ ﺗﻌﺪﯾﻞ اﻟﺨﻂ ﻓﯿﻤﻜﻨﻨﺎ ھﻨﺎ إن ﻧﺠﻌﻞ اﻟﺨﻂ ﻋﺮﯾﻀﺎ أو ﻣﺎﺋﻼ ﻓﻘﻂ واﻟﺘﺤﻜﻢ‬
‫ﺑﺈظﮭﺎر اﻟﻌﻨﺎﺻﺮ اﻟﺘﻲ ﻧﺸﺎء ﻋﺒﺮ إﻧﺸﺎء ﻣﺤﺮر ﻧﺼﻮص ﺧﺎص ﺑﻨﺎ ‪ ،‬ﻓﯿﻤﻜﻨﻨﺎ ھﻨﺎ إﺿﺎﻓﺔ ﻣﺤﺮر اﻟﻨﺼﻮص إﻟﻰ‬
‫ﺻﻔﺤﺘﻨﺎ ﻟﻠﺘﺤﻜﻢ ﺑﺘﻨﺴﯿﻖ اﻟﺨﻂ ﻗﺒﻞ إرﺳﺎل اﻟﺮﺳﺎﻟﺔ‬

‫اﻟﺼﻮرة اﻟﻌﺎﻣﺔ ﻟﻠﺘﻤﺮﯾﻦ ﺑﻌﺪ اﻻﻧﺘﮭﺎء ‪:‬‬

‫اﻟﺼﻮرة اﻟﻌﺎﻣﺔ ﻟﻤﺤﯿﻂ اﻟﻌﻤﻞ ‪:‬‬

‫ﻓﻲ ھﺬا اﻟﺘﻤﺮﯾﻦ ﻧﺤﻦ ﻟﺴﻨﺎ ﺑﺤﺎﺟﺔ إﻟﻰ ﻋﻨﺎﺻﺮ اﺟﺎﻛﺲ ﺑﻞ ھﻨﺎ ﺳﻮف ﻧﻘﻮم ﺑﺒﻨﺎء ﻋﻨﺼﺮ اﺟﺎﻛﺲ ﺟﺪﯾﺪ اﻋﺘﻤﺎداً‬
‫ﻋﻠﻰ ﻋﻨﺼﺮ اﺟﺎﻛﺲ ﻣﻮﺟﻮد ﻣﺴﺒﻘﺎ ً أي ﺳﻨﻘﻮم ﺑﺈﺟﺮاء ﺗﻌﺪﯾﻞ ﻋﻠﻰ ﻋﻨﺼﺮ اﺟﺎﻛﺲ اﻟﻘﺪﯾﻢ ﻟﻜﻲ ﯾﻠﺒﻲ ﺣﺎﺟﺘﻨﺎ‬
‫‪ -‬طﺮﯾﻘﺔ إﻧﺸﺎء ﺻﻒ ﺟﺪﯾﺪ ھﻲ ﻛﺎﻟﺘﺎﻟﻲ ‪:‬‬
 : ‫ﻋﻨﺪ ا ﻻﻧﺘﮭﺎء ﻣﻦ إﻧﺸﺎء اﻟﺼﻒ ﻧﻜﺘﺐ ﺑﺪاﺧﻠﮫ اﻟﺘﺎﻟﻲ‬

: ‫اﻟﻜﻮد ﻓﻲ ﺳﻲ ﺷﺎرب‬
using System;
using System.Collections.Generic;
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());
}
}
}

: ‫ﺻﻮرة ﻛﻮد ﺻﻔﺤﺔ اﻟﻮب‬

: ‫اﻟﻜﻮد اﻟﺒﺮﻣﺠﻲ ﻟﺼﻔﺤﺔ اﻟﻮب‬

<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Namespace="JoesAjaxControls" TagPrefix="Awaz" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<Awaz:SimpleEditor id="Editor1" runat="server" width="640px"
/>
<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>

. Label ‫ ﻓﻌﻨﺪ اﻟﻀﻐﻂ ﻋﻠﻰ اﻟﺰر ﯾﻈﮭﺮ ﻧﺘﯿﺠﺔ إرﺳﺎل اﻟﺒﯿﺎﻧﺎت داﺧﻞ‬: Button ‫اﻟﻜﻮد اﻟﺨﻠﻔﻲ ﻟﺰر اﻷﻣﺮ‬
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = Editor1.Content;
}
}

‫ ﻟﻢ ﯾﺘﻢ اﺳﺘﺨﺪام أي ﻋﻨﺼﺮ ﻣﻦ ﻋﻨﺎﺻﺮ اﺟﺎﻛﺲ ﻓﻲ ھﺬا اﻟﺘﻤﺮﯾﻦ ﺑﻞ ﻗﻤﻨﺎ ﺑﺒﻨﺎء ﻋﻨﺼﺮ اﺟﺎﻛﺲ ﺟﺪﯾﺪ‬: ‫ﻣﻼﺣﻈﺔ‬
. AjaxControlToolkit.HTMLEditor ‫واﺳﺘﺨﺪاﻣﮫ وذﻟﻚ ﺑﺎﺳﺘﺨﺪام اﻟﺼﻒ اﻟﺒﺮﻣﺠﻲ‬

‫ﻧﮭﺎﯾﺔ اﻟﺘﻤﺮﯾﻦ اﻟﺪرس اﻟﺴﺎﺑﻊ ﻓﻲ اﺟﺎﻛﺲ‬

 ‫اﻟﺪرس اﻟﺜﺎﻣﻦ‬

‫رﺳﺎﻟﺔ ﺗﺄﻛﯿﺪ إرﺳﺎل اﻟﺒﯿﺎﻧﺎت أو رﺳﺎﻟﺔ ﺗﻨﺒﯿﮫ إرﺳﺎل أﻣﺮ ﻣﻌﯿﻦ إﻟﻰ اﻟﻤﺨﺪم‬

‫اﻟﺼﻮرة اﻟﻌﺎﻣﺔ ﻟﻠﺘﻤﺮﯾﻦ ‪:‬‬

‫ﺻﻮرة ﻋﻦ ﻋﻨﺼﺮ اﺟﺎﻛﺲ اﻟﻤﺴﺘﺨﺪم ‪:‬‬

‫اﻟﺼﻮرة ﺗﺸﺮح ﻟﻨﺎ اﻟﻜﻮد اﻟﺒﺮﻣﺠﻲ ‪:‬‬

‫ﺑﻌﺪ ﺗﻨﺰﯾﻞ ﻋﻨﺼﺮ اﺟﺎﻛﺲ اﻟﻤﺤﺪد ﻧﻘﻮم ﺑﺎﻟﺘﻌﺪﯾﻞ ﻋﻠﻰ ﺧﺼﺎﺋﺼﮫ ﻟﻜﻲ ﯾﻼءم ﺗﻤﺮﯾﻨﻨﺎ ‪:‬‬
‫ﻋﻨﺪﻣﺎ ﻧﻨﺘﮭﻲ ﻣﻦ ﺗﻌﺪﯾﻞ ﺧﺼﺎﺋﺺ ﻋﻨﺼﺮ اﺟﺎﻛﺲ اﻟﻤﺴﺘﺨﺪم ﻧﻨﮭﻲ ﻋﻤﻠﻨﺎ ﺑﺎﻟﻀﻐﻂ ﻣﺮﺗﯿﻦ ﻋﻠﻰ زر اﻷﻣﺮ ﻟﺘﻔﻌﯿﻞ‬
‫ﺣﺪث اﻟﻀﻐﻂ ﻋﻠﻰ اﻟﺰر واﻟﺬھﺎب إﻟﻰ اﻟﻤﺨﺪم ‪:‬‬

‫وﻓﻲ اﻟﻨﮭﺎﯾﺔ ﻋﻨﺪ ﺗﺸﻐﯿﻞ اﻟﺘﻤﺮﯾﻦ ﺳﻮف ﯾﻈﮭﺮ ﻟﺪﯾﻨﺎ رﺳﺎﻟﺔ ﺗﺄﻛﯿﺪ إرﺳﺎل اﻟﺒﯿﺎﻧﺎت إﻟﻰ اﻟﻤﺨﺪم ‪.‬‬

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

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

‫اﻟﺼﻮرة اﻟﻌﺎﻣﺔ ﻟﻠﺘﻤﺮﯾﻦ ‪:‬‬

‫ﺻﻮرة ﻋﻨﺼﺮ اﺟﺎﻛﺲ اﻟﻤﺴﺘﺨﺪم ‪:‬‬

 : ‫ﺻﻮرة ﻛﻮد ﺻﻔﺔ اﻟﻮب‬

: ‫اﻟﻜﻮد اﻟﻜﺎﻣﻞ ﻟﺼﻔﺤﺔ اﻟﻮب‬

<%@ 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 id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<ajaxToolkit:FilteredTextBoxExtender
ID="FilteredTextBoxExtender1"
runat="server" TargetControlID="TextBox1"
FilterType="Numbers">
</ajaxToolkit:FilteredTextBoxExtender>
<ajaxToolkit:FilteredTextBoxExtender
ID="FilteredTextBoxExtender2"
runat="server" TargetControlID="TextBox2"
FilterType="LowercaseLetters">
</ajaxToolkit:FilteredTextBoxExtender>
<ajaxToolkit:FilteredTextBoxExtender
ID="FilteredTextBoxExtender3"
runat="server" TargetControlID="TextBox3"
FilterType="Custom, Numbers" ValidChars="+-=/*().">
</ajaxToolkit:FilteredTextBoxExtender>
<table border="0">
<tr>
<td>Only 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 ID="TextBox2" runat="server‬‬
‫>‪</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‬‬ ‫•‬