AJAX. net by medo.eid

VIEWS: 5 PAGES: 43

									                         ‫‪AJAX‬‬                                       ‫‪. net‬‬

                                          ‫اﻟﺠﺰء اﻷول‬




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




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

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


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


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


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


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


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


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


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


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


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

                                                                                              ‫ﺗﻌرﯾﻔﮭﺎ :‬

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

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

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

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

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



                                                                                                ‫اﻟﺒﺪء :‬

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

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



                    ‫ﻋﻨﺎﺻﺮ اﺟﺎﻛﺲ اﻷﺳﺎﺳﯿﺔ اﻟﺘﻲ ﺗﻮﺟﺪ ﻋﻨﺪ ﺗﻨﺼﯿﺐ 8002 ‪Microsoft Visual Studio‬‬
   ‫ﻧﻘﻮم ﺑﺈﺗﺒﺎع اﻟﺨﻄﻮات اﻟﺘﺎﻟﯿﺔ ﻟﺘﻨﺼﯿﺐ ﻋﻨﺎﺻﺮ ‪ AJAX Control Toolkit‬اﻹﺿﺎﻓﯿﺔ ﺿﻤﻦ ﺑﯿﺌﺔ دوت ﻧﺖ :‬

   ‫ﻗﻢ ﺑﺘﻨﺰﯾﻞ ﻋﻨﺎﺻﺮ اﺟﺎﻛﺲ اﻹﺿﺎﻓﯿﺔ ﻣﻦ اﻟﺮاﺑﻂ اﻟﺘﺎﻟﻲ :)ﻗﻢ ﺑﺘﻨﺰﯾﻞ اﻟﻌﻨﺎﺻﺮ ﺿﻤﻦ ﻣﺠﻠﺪ اﻟﺪوت ﻧﯿﺖ ٨٠٠٢(‬

‫‪http://www.4shared.com/file/110409699/453ec60e/AjaxControlToolkitSource.html‬‬
                                                    ‫اﺗﺒﻊ اﻟﺨﻄﻮات اﻟﺘﺎﻟﯿﺔ ﺑﻌﺪ اﻟﺘﻨﺼﯿﺐ :‬




                                      ‫٢ – ﻧﻘﻮم ﺑﻔﺘﺢ 8002 ‪ Visual Studio‬وﻧﺘﺒﻊ اﻟﺨﻄﻮات اﻟﺘﺎﻟﯿﺔ :‬
                                                                                              ‫٣-‬




‫اﻟﺠﺪﯾﺪة ‪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‬اﻟﻤﺴﺘﺨﺪم ﻛﻤﺎﯾﻠﻲ :‬
 ‫وﻋﻨﺪ اﻟﺘﺸﻐﯿﻞ ﺳﯿﺘﻢ ﻋﻤﻞ ﺗﺤﺪﯾﺚ ﻟﻠﻌﻨﺼﺮ 2‪ Label‬اﻟﻤﻮﺟﻮد داﺧﻞ ﻋﻨﺼﺮ اﺟﺎﻛﺲ اﻟﻤﺴﺘﺨﺪم‬
‫ﻣﻊ وﺟﻮد ﻋﻨﺼﺮ اﻹرﺳﺎل ‪ Button‬ﺧﺎرج ﻋﻨﺼﺮ اﺟﺎﻛﺲ ﻟﯿﻜﻮن ﻟﺪﯾﻨﺎ ﻧﺘﯿﺠﺔ اﻟﺪرس ﻛﻤﺎﯾﻠﻲ :‬




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


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


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




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




                                                   ‫- ﺗﻮﺿﺢ اﻟﺼﻮرة اﺳﺘﺨﺪام ‪: Conditional‬‬
 ‫ﻓﻲ اﻟﺼﻮرة اﻟﺴﺎﺑﻘﺔ ﺗﻢ ﺗﺤﺪﯾﺚ 1‪ Update Panel‬ﻓﻘﻂ وﯾﻤﻜﻨﻨﺎ ﺑﻄﺮﯾﻘﺔ أﺧﺮى إن ﻧﺠﻌﻞ 2‪Update Panel‬‬
                                                              ‫ﺗﺘﺤﺪث ﺑﯿﺎﻧﺎﺗﮭﺎ ﺑﻌﻤﻞ اﻷﺗﻲ :‬




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




‫ﻓﯿﻤﻜﻨﻨﺎ اﺳﺘﺨﺪام ‪ 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‬‬
                        ‫"3‪<asp:TextBox ID="TextBox‬‬
‫>‪runat="server"></asp:TextBox></td‬‬
                ‫>‪</tr‬‬
            ‫>‪</table‬‬
        ‫>‪</div‬‬
    ‫>‪</form‬‬
‫>‪</body‬‬
‫>‪</html‬‬



 ‫ﻣﻼﺣﻈﺔ : ﯾﻤﻜﻦ ﻣﻦ ﺧﻼل ﻋﻨﺼﺮ اﺟﺎﻛﺲ اﻟﻤﺴﺘﺨﺪم ﻓﻲ ھﺬا اﻟﺘﻤﺮﯾﻦ اﻟﻘﯿﺎم ﺑﻌﻤﻠﯿﺎت ﺗﺤﻘﻖ أﺧﺮى ﯾﻤﻜﻨﻚ ﺗﺠﺮﯾﺒﮭﺎ.‬




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



                                                                                                        ‫اﻟﻤﺼﺎدر :‬


                                          ‫اﻟﺠﺰء اﻟﺨﺎص ﺑﺎﺳﺘﺨﺪام اﻟﺘﻘﻨﯿﺔ ﻓﻲ اﻟﻤﻜﺘﺒﺎت ﻟﺘﻘﺮﯾﺮ ﻟﺠﺎ ﺳﻮن أ. ﻛﻼرك‬   ‫•‬
                                                                                         ‫ﻣﻮﻗﻊ ‪ASP.NET‬‬       ‫•‬

								
To top