‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫اﻟﻔﺻل اﻷول‬

‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم‬

‫اﻟﻘﯾﺎﺳﯾﺔ‬

‫ﻓﻲ ھذا اﻟﻔﺻل‬

‫ﻋرض اﻟﻣﻌﻠوﻣﺎت‬ ‫‪‬‬

‫ﻗﺑول دﺧل اﻟﻣﺳﺗﺧدم‬ ‫‪‬‬
‫إرﺳﺎل ﺑﯾﺎﻧﺎت اﻟﻧﻣوذج‬ ‫‪‬‬
‫ﻋرض اﻟﺻور‬ ‫‪‬‬
‫اﺳﺗﺧدام أداة اﻟﺗﺣﻛم ‪Panel‬‬ ‫‪‬‬
‫اﺳﺗﺧدام اﻟرواﺑط اﻟﺗﺷﻌﺑﯾﺔ‬ ‫‪‬‬

‫‪-2-‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻷﺳﺎﺳﯾﺔ‬

‫ﻓﻲ ھذا اﻟﻔﺻل ﺳﻧﺗﻌﻠم ﻛﯾف ﻧﺳﺗﺧدم ﻋﻧﺎﺻر اﻟﺗﺣﻛم اﻷﺳﺎﺳﯾﺔ اﻟﻣﺿﻣﻧﺔ ﻓﻲ ﻣﻧﺻﺔ اﻟﻌﻣل ‪ASP.NET‬‬
‫واﻟﺗﻲ ﻻﺑد ﻣﻧﮭﺎ ﻹﻧﺷﺎء ﺗطﺑﯾﻘﺎت اﻻﻧﺗرﻧت ‪,‬ﺣﯾث ﺳﻧﺗﻌﻠم ﻛﯾف ﻧﻌرض اﻟﻣﻌﻠوﻣﺎت ﺑﺎﺳﺗﺧدام اﻷداﺗﯾن‬
‫‪ , Label , Literal‬وﻛﯾف ﻧﻘﺑل وﻧﺗﻌﺎﻣل ﻣﻊ دﺧل اﻟﻣﺳﺗﺧدم ﻣن ﺧﻼل اﻷدوات ‪TextBox ,‬‬
‫‪ CheckBox , RadioButton‬وﻛﯾﻔﯾﺔ إرﺳﺎل ﺑﯾﺎﻧﺎت اﻟﻧﻣﺎذج إﻟﻰ اﻟﺳﯾرﻓر ﺑواﺳطﺔ أدوات اﻷزرار‬
‫اﻟﻣﺗﻧوﻋﺔ ‪,‬ﺑﺎﻹﺿﺎﻓﺔ ﻷدوات ﻋرض اﻟﺻور ﻋﻠﻰ ﺻﻔﺣﺎت اﻹﻧﺗرﻧت‪ ,‬ﻛﻣﺎ ﻧﺳﺗﻌرض ﻛﯾﻔﯾﺔ ﺿم‬
‫اﻷدوات واﺣﺗواﺋﮭﺎ داﺧل أداة ‪ Panel‬ﺑﺎﻹﺿﺎﻓﺔ ﻟﻛﯾﻔﯾﺔ رﺑط اﻟﺻﻔﺣﺎت ﺑﺑﻌﺿﮭﺎ ﻣن ﺧﻼل اﻷداة‬
‫‪. HyperLink‬‬

‫ﻋرض اﻟﻣﻌﻠوﻣﺎت‬

‫ﻣﻧﺻﺔ ﻋﻣل ‪ ASP.NET‬ﺗدﻋم أداﺗﯾن ﻟﻌرض اﻟﺑﯾﺎﻧﺎت اﻟﻧﺻﯾﺔ ‪ Label , Literal‬ﻓﻔﻲ ﺣﯾن أن اﻷداة‬
‫‪ Literal‬ﺗﻌرض اﻟﺑﯾﺎﻧﺎت ﺑﺄﺳﻠوب ﺑﺳﯾط ‪ ,‬ﻓﺈن اﻷداة ‪ Label‬ﺗﻘدم اﻟﻌدﯾد ﻣن اﻟﻣزاﯾﺎ واﻟﺗﻧﺳﯾﻘﺎت‬
‫اﻹﺿﺎﻓﯾﺔ ‪.‬‬

‫اﺳﺗﺧدام أداة اﻟﺗﺣﻛم ‪Label‬‬

‫ﻧﺳﺗﺧدم أدوات ﻋرض اﻟﻣﻌﻠوﻣﺎت ﺣﺗﻰ ﻧﺗﻣﻛن ﻣن ﺗﻌدﯾل اﻟﻧص اﻟﻣﻌروض ﻋﻠﻰ اﻟﺻﻔﺣﺔ وﻗت اﻟﺗﻧﻔﯾذ‬
‫ﺣﯾث ﻧﺳﺗطﯾﻊ ﺑﺑﺳﺎطﺔ أن ﻧﺣدد اﻟﻧص اﻟﻣراد ﻋرﺿﮫ ﻣن ﺧﻼل إﺳﻧﺎده ﻟﻠﺧﺎﺻﯾﺔ ‪ Text‬ﻷداة ‪, Label‬‬
‫ﻛﻣﺎ ﯾﻣﻛن أن ﻧﺳﺗﺧدم ﺗﻧﺳﯾﻘﺎت ‪ html‬ﻟﺗﻘوم ھذه اﻷداة ﺑﺗﻔﺳﯾرھم وﺗوﻟﯾد اﻟﺧرج اﻟﻣطﻠوب ‪,‬وﺑﺷﻛل‬
‫اﻓﺗراﺿﻲ ﺗﻘوم ھذه اﻷداة ﺑﺈﺣﺎطﺔ اﻟﻧص ﺑﺎﻟوﺳم >‪ , <span‬ﻓﻲ اﻟﻛود اﻟﺗﺎﻟﻲ ﻧﻌرض أﺳﺎﻟﯾب ﻣﺧﺗﻠﻔﺔ‬
‫ﻹﺳﻧﺎد اﻟﻣﻌﻠوﻣﺎت ﻷدوات ‪: Label‬‬

‫ﻛود ‪ASP.net‬‬
‫>‪<div‬‬
‫>‪<asp:Label ID="Label1" runat="server" Text="Hi i'm Label1" ></asp:Label‬‬
‫>‪<br /‬‬
‫>"‪<asp:Label ID="Label2" runat="server" Text="Label‬‬
‫‪Hi i'm Label2‬‬
‫>‪</asp:Label‬‬
‫>‪<br /‬‬
‫>">‪<asp:Label ID="Label3" runat="server" Text="<b><i>Hi i'm Label3</i></b‬‬
‫>‪</asp:Label‬‬
‫>‪</div‬‬

‫اﻷداة ‪ Label‬ﺗدﻋم اﻟﻌدﯾد ﻣن اﻟﺧﺻﺎﺋص ﻟﺗﻧﺳﯾق اﻟﻧﺻوص ‪ ,‬ﻧﺳﺗﻌرض ﻣﻧﮭﺎ ‪:‬‬

‫‪-3-‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫‪ : BackColor‬ﺗﻐﯾﯾر ﻟون اﻟﺧﻠﻔﯾﺔ ﻟﻸداة ‪.‬‬ ‫‪‬‬

‫‪ : BorderColor‬ﺗﺗﻌﯾن ﻟون ﻹطﺎر ﯾﺣﯾط ﺑﺄداة ‪. Label‬‬ ‫‪‬‬
‫‪ : BorderStyle‬ﺗﺣدﯾد ﻧﻣط اﻹطﺎر اﻟذي ﺳﯾﺗم ﻋرﺿﮫ ‪ ,‬ﯾﻣﻛن أن ﺗﺄﺧذ ھذه اﻟﺧﺎﺻﯾﺔ أﺣد‬ ‫‪‬‬
‫اﻟﻘﯾم اﻟﺗﺎﻟﯾﺔ ‪NotSet, None, Dotted, Dashed, Solid, Double, Groove, :‬‬
‫‪. Outset,Ridge, Inset,‬‬
‫‪ : BorderWidth‬ﺗﺣدﯾد ﺛﺧﺎﻧﺔ اﻹطﺎر ‪.‬‬ ‫‪‬‬
‫‪ : CssClass‬ﺗﺣدﯾد ﺻف ‪ CSS‬ﯾﺗم ﺗطﺑﯾﻘﮫ ﻋﻠﻰ ھذه اﻷداة ‪.‬‬ ‫‪‬‬
‫‪ : Font‬ﺗﺣدﯾد ﻧوع اﻟﺧط اﻟﻣﺳﺗﺧدم ‪.‬‬ ‫‪‬‬
‫‪ : ForeColor‬ﺗﺣدﯾد ﻟون اﻟﺧط ‪.‬‬ ‫‪‬‬
‫‪ : Style‬ﻟﺗطﺑﯾق ﺗﺻﻣﯾم ﻣﻌﯾن ﻋﻠﻰ أداة ‪. Label‬‬ ‫‪‬‬
‫‪ : ToolTip‬ﻧص ﯾﺗم ﻋرﺿﮫ ﻛﺗﻠﻣﯾﺢ ﻋﻧد ﻣرور اﻟﻣﺎوس ﻋﻠﻰ أداة ‪. Label‬‬ ‫‪‬‬

‫ﻋﺎدة ﻣﺎ ﯾﺗم اﺳﺗﺧدام اﻷداة ‪ Label‬ﻟﻌرض ﻋﻧﺎوﯾن ﻷدوات أﺧرى ﻟﻣﺳﺎﻋدة اﻟﻣﺳﺗﺧدم ﻋﻠﻰ اﻟﻘﯾﺎم‬
‫ﺑﻌﻣﻠﮫ ‪ ,‬وﺑﺎﻟﺗﺎﻟﻲ ﻓﺈن ھذه اﻷداة ﺗﻣﻠك اﻟﺧﺎﺻﯾﺔ ‪ AssociatedControlID‬ﻟﺗﺣدﯾد اﻷداة اﻟﻣرﺗﺑطﺔ ﺑﮭﺎ‬
‫وﯾﻧﺻﺢ ﺑﺎﺗﺳﺧدام ھذه اﻟﺧﺎﺻﯾﺔ ﺑﺷﻛل ﻋﺎم ‪.‬‬

‫اﺳﺗﺧدام أداة اﻟﺗﺣﻛم ‪Literal‬‬

‫ﺗﻌﻣل ھذه اﻷداة ﺑﺷﻛل ﻣﺷﺎﺑﮫ ﺟدا ﻟﻌﻣل اﻷداة ‪ Label‬إﻻ أﻧﮭﺎ ﻻﺗﻘوم ﺑﺈﺣﺎطﺔ اﻟﻧص ﺑﺎﻟوﺳم >‪<span‬‬
‫و ھذا ﻣﺎﻗد ﻧﺣﺗﺎﺟﮫ ﻓﻲ ﺑﻌض اﻟﻣواﻗﻊ اﻟﺗﻲ ﻻﯾﻣﻛن ﻓﯾﮭﺎ ﺗرﺟﻣﺔ أﻛود ‪ ) html‬ﻛﺗﺣدﯾد ﻋﻧوان اﻟﺻﻔﺣﺔ‬
‫ﻋﻠﻰ اﻟﻣﺗﺻﻔﺢ ﻣﺛﻼ ( ‪ ,‬وﺑﻣﺎ أن ھذه اﻷداة ﻻﺗدﻋم اﻟوﺳم >‪ <span‬ﻓﮭﻲ أﯾﺿﺎ ﻻﺗدﻋم اﻟﺧﺻﺎﺋص‬
‫اﻟﺗﺎﺑﻌﺔ ﻟﮫ ‪ , CssClass , BackColor‬اﻷداة ‪ Literal‬ﺗدﻋم ﺧﺎﺻﯾﺔ ھﺎﻣﺔ وﻏﯾر ﻣدﻋوﻣﺔ ﺑﺎﻷداة‬
‫‪ Label‬وھﻲ اﻟﺧﺎﺻﯾﺔ ‪ Mode‬ﺣﯾث ﯾﻣﻛﻧﮭﺎ أن ﺗﺄﺧذ أﺣد اﻟﻘﯾم اﻟﺛﻼث اﻟﺗﺎﻟﯾﺔ ‪:‬‬

‫‪ : PassThrough ‬ﺗﻔﺳﯾر رﻣوز ‪ html‬اﻟﻣوﺟدوة ﻓﻲ اﻟﻧص وﻋرض ﻣﺎﺗﻌﻧﯾﮫ ‪.‬‬

‫‪ : Encode ‬ﻋرض اﻟﻧص ﺑدون ﺗرﺟﻣﺔ رﻣوز ‪ html‬ﺣﯾث ﺗظﮭر ﻛﻣﺎ ھﻲ ‪.‬‬
‫‪ : Transform ‬ﯾﺗم ﺗﻔﺳﯾر ﻓﻘط اﻟرﻣوز اﻟﻣدﻋوﻣﺔ ﻣن ﻗﺑل اﻟﺟﮭﺎز اﻟطﺎﻟب ﻟﻠﺻﻔﺣﺔ ‪.‬‬

‫ﻛود ‪ASP.net‬‬
‫>‪<div‬‬
‫>‪<asp:Literal ID="L1" runat="server" Mode="PassThrough" Text="<hr />"/‬‬
‫>‪<asp:Literal ID="L2" runat="server" Mode="Encode" Text="<hr />"/‬‬
‫>‪<asp:Literal ID="L3" runat="server" Mode="Transform" Text="<hr />"/‬‬
‫>‪</div‬‬

‫‪-4-‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫ﻋﻧد ﺗﻧﻔﯾذ اﻟﺻﻔﺣﺔ اﻟﺳﺎﺑﻘﺔ ﺗﻘوم ‪ Literal1‬ﺑﻌرض ﺧط أﻓﻘﻲ ‪ Literal2 ,‬ﺗﻌرض اﻟﻧص >‪ <hr /‬ﻓﻲ‬
‫ﺣﯾن أن ‪ Literal3‬ﺗﻔﺣص اﻟﺟﮭﺎز اﻟطﺎﻟب ﻟﻠﺻﻔﺣﺔ ﻓﺈن ﻛﺎن ﯾدﻋم ھذا اﻟوﺳم ﻓﺈﻧﮫ ﯾﻌرض ﺧط أﻓﻘﻲ‬
‫وإﻻ ﻓﺳﯾﺗم ﻋرض اﻟﻧص ﻛﻣﺎ ھو >‪. <hr /‬‬

‫ﻗﺑول دﺧل اﻟﻣﺳﺗﺧدم‬

‫ﺗﺗﺿﻣن ﻣﻧﺻﺔ ﻋﻣل ‪ ASP.NET‬أدوات ﺗﺳﻣﺢ ﻟﻠﻣﺳﺗﺧدم ﺑﺈدﺧﺎل وﺗﺣدﯾد اﺧﺗﯾﺎراﺗﮫ ﻓﻲ اﻟﻣوﻗﻊ ‪ ,‬ﺣﯾث‬
‫ﺗﻘدم ﺛﻼث أدوات أﺳﺎﺳﯾﺔ ھﻲ ‪ TextBox , CheckBox , RadioButton‬و ﺳﻧﺗﻌرف ﻋﻠﯾﮭم ﻓﻲ‬
‫اﻟﻔﻘرات اﻟﺗﺎﻟﯾﺔ ﺑﺎﻟﺗﻔﺻﯾل ‪.‬‬

‫اﺳﺗﺧدام أداة اﻟﺗﺣﻛم ‪TextBox‬‬

‫ﺗﺳﻣﺢ ھذه اﻷداة ﻟﻠﻣﺳﺗﺧدم ﺑﺈدﺧﺎل ﻧص وﻓﻘﺎ ً ﻟﺛﻼﺛﺔ أﻧﻣﺎط ﺗﺣددھﺎ ﻗﯾﻣﺔ اﻟﺧﺎﺻﯾﺔ ‪ TextMode‬وھم‪:‬‬

‫‪ : SingleLine ‬ﻗﺑول اﻟدﺧل ﻛﺳطر واﺣد ﻓﻘط ‪.‬‬

‫‪ : MultiLine ‬ﻗﺑول اﻟدﺧول ﺑﺄﺳطر ﻋدﯾدة ‪.‬‬
‫‪ : Password ‬ﺣﯾث ﯾظﮭر دﺧل اﻟﻣﺳﺗﺧدم ﻛرﻣوز ) ﻧﺟوم *** أو ﻏﯾره ( ‪.‬‬

‫ﻛود ‪ASP.net‬‬
‫>‪<div‬‬
‫>‪<asp:TextBox ID="TextBox1" runat="server" TextMode="SingleLine"/‬‬
‫>‪<asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" /‬‬
‫>‪<asp:TextBox ID="TextBox3" runat="server" TextMode="Password" /‬‬
‫>‪</div‬‬

‫ﺧﺻﺎﺋص اﻷداة ‪: TextBox‬‬

‫‪ : AccessKey‬ﻟﺗﺣدﯾد ﻣﻔﺗﺎح ﻣن ﻟوﺣﺔ اﻟﻣﻔﺎﺗﯾﺢ ﻋﻧد اﻟﺿﻐط ﻋﻠﯾﮫ ﯾﺗم ﻧﻘل اﻟﺗرﻛﯾز ﻟﮭذه‬ ‫‪‬‬
‫اﻷداة ‪.‬‬
‫‪ : AutoCompleteType‬ﺗﺣدﯾد ﻧﻣط اﻹﻛﻣﺎل اﻟﺗﻠﻘﺎﺋﻲ ﺣﯾث ﯾﻛﻔﻲ أن ﯾدﺧل اﻟﻣﺳﺗﺧدم‬ ‫‪‬‬
‫ﺑﺿﻌﺔ ﺣروف ﺣﺗﻰ ﯾﺗم إظﮭﺎر ﻛﻠﻣﺎت ﻣطﺎﺑﻘﺔ ﺗم إدﺧﺎﻟﮭﺎ ﻣﺳﺑﻘﺎ ً ‪ ,‬ﯾﻣﻛن إﻟﻐﺎء ﺗﻔﻌﯾل ھذه‬
‫اﻟﺧﺎﺻﯾﺔ ﺑﺈﺳﻧﺎد اﻟﻘﯾﻣﺔ ‪ Disabled‬ﻟﮭﺎ ‪.‬‬
‫‪ : AutoPostBack‬إرﺳﺎل اﻟﻣﺣﺗوﯾﺎت إﻟﻰ اﻟﺳﯾرﻓر ﺑﺷﻛل ﻓوري ﻋﻧد أي ﺗﻐﯾر ﺑﺎﻟﻧص‬ ‫‪‬‬
‫اﻟﻣدﺧل ‪.‬‬
‫‪ : Columns‬ﺗﺣدﯾد ﻋدد اﻷﻋﻣدة اﻟﺗﻲ ﺳﺗظﮭر ‪.‬‬ ‫‪‬‬
‫‪ : Enabled‬ﺗﻔﻌﯾل أو إﻟﻐﺎء ﺗﻔﻌﯾل ھذه اﻷداة ‪.‬‬ ‫‪‬‬

‫‪-5-‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫‪ : MaxLength‬ﺗﺣدﯾد اﻟﻌدد اﻷﻋظﻣﻲ ﻣن اﻟﻣﺣﺎرف اﻟﺗﻲ ﯾﻣﻛن إدﺧﺎﻟﮭﺎ ) ﻻﺗﻌﻣل ﻣﻊ‬ ‫‪‬‬
‫‪. (MulitLine‬‬
‫‪ : ReadOnly‬ﻟﻣﻧﻊ اﻟﻣﺳﺗﺧدم ﻣن ﺗﻐﯾﯾر اﻟﻘﯾﻣﺔ اﻟﻣوﺟودة ﺑـ ‪. TextBox‬‬ ‫‪‬‬
‫‪ : Rows‬ﺗﺣدﯾد ﻋدد اﻷﺳطر اﻟﺗﻲ ﺳﺗظﮭر ‪.‬‬ ‫‪‬‬
‫‪ : TabIndex‬ﺗﺣدﯾد رﻗم ﯾدل ﻋﻠﻰ ﺗرﺗﯾب اﻟوﺻول ﻟﮭذه اﻷداة ﻋﺑر ﻣﻔﺗﺎح ‪. Tab‬‬ ‫‪‬‬
‫‪ : Warp‬ﻟﺗﺣدﯾد إﻣﻛﺎﻧﯾﺔ اﻻﻟﺗﻔﺎف اﻟﺗﻠﻘﺎﺋﻲ ﻟﻠﻧص ﻣﻊ اﻟﻧﻣط ‪. MultiLine‬‬ ‫‪‬‬

‫أداة اﻟﺗﺣﻛم ‪ TextBox‬ﺗدﻋم اﻟطرﯾﻘﺔ ‪ Focus‬اﻟﺗﻲ ﺗﺳﻣﺢ ﺑوﺿﻊ اﻟﺗرﻛﯾز ﻋﻠﯾﮭﺎ ﻋﻧد اﻟﺗﻧﻔﯾذ ‪ ,‬ﻛﻣﺎ أﻧﮭﺎ‬
‫ﺗدﻋم اﻟﺣدث ‪ TextChanged‬واﻟذي ﯾُطﻠق ﻋﻧدﻣﺎ ﺗﺗﻐﯾر ﻣﺣﺗوﯾﺎت ھذه اﻷداة ‪.‬‬

‫ﻟﺗوﺿﯾﺢ آﻟﯾﺔ ﻋﻣل اﻟﺧﺎﺻﯾﺔ ‪ AutoPostBack‬أﻧﺷﺊ ﺻﻔﺣﺔ ﺟدﯾدة أﺿف ﻟﮭﺎ ‪ TextBox1‬وأﻋطﻲ‬
‫اﻟﺧﺎﺻﯾﺔ اﻟﺳﺎﺑﻘﺔ اﻟﻘﯾﻣﺔ ‪ True‬ﺛم أﺿف ‪ Lable1‬ﻣﺎﺳﻧﻘوم ﺑﮫ ھو أﻧﮫ ﻋﻧد ﻛﺗﺎﺑﺔ ﻧص ﻣﺎ ﻓﺈﻧﮫ‬
‫ﺳﯾﻌرض ﻓﻲ اﻷداة ‪ Label1‬ﺑﻣﺟرد ﻧﻘل اﻟﺗرﻛﯾز ﺧﺎرج ‪ TextBox1‬وھو دﻟﯾل ﻋﻠﻰ ﻋﻣل‬
‫‪ postBack‬آﻟﻲ ﻟﻠﺻﻔﺣﺔ ‪ ,‬أي إرﺳﺎﻟﮭﺎ ﻟﻠﺳﯾرﻓر وإﻋﺎدة اﻟﻧﺗﺎﺋﺞ‬

‫ﻛود ‪ASP.net‬‬
‫>‪<div‬‬
‫"‪<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True‬‬
‫>‪ontextchanged="TextBox1_TextChanged"></asp:TextBox‬‬
‫>‪<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label‬‬
‫>‪</div‬‬

‫ﻓﻲ اﻟﺣدث ‪ TextChanged‬اﻟﺧﺎص ﺑﺎﻷداة ‪ TextBox1‬اﻛﺗب اﻟﻛود اﻟﺗﺎﻟﻲ ‪:‬‬

‫ﻛود ‪C#‬‬
‫)‪protected void TextBox1_TextChanged(object sender, EventArgs e‬‬
‫{‬
‫;‪Label1.Text = TextBox1.Text‬‬
‫}‬

‫ﻛود ‪VB‬‬
‫‪Protected Sub TextBox1_TextChanged(ByVal sender As Object, ByVal e As‬‬
‫‪System.EventArgs) Handles TextBox1.TextChanged‬‬

‫‪Label1.Text = TextBox1.Text‬‬
‫‪End Sub‬‬

‫‪-6-‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫ﻧﻔذ اﻟﺻﻔﺣﺔ واﻛﺗب ﻣﺎﺗرﯾد ﻓﻲ ‪ TextBox1‬ﺛم اﺿﻐط ﻋﻠﻰ اﻟﻣﻔﺗﺎح ‪ Tab‬ﻣن ﻟوﺣﺔ اﻟﻣﻔﺎﺗﯾﺢ وﺷﺎھد‬
‫اﻟﻧﺗﯾﺟﺔ ‪ ,‬أﻏﻠق اﻟﻣﺳﺗﻌرض ﺛم أﻋد اﻟﺗﻧﻔﯾذ ﻣرة أﺧرى وﻗم ﺑﻛﺗﺎﺑﺔ أول ﺣرف ﻣن اﻟﻘﯾﻣﺔ اﻟﺗﻲ أدﺧﻠﺗﮭﺎ‬
‫ﺑﺎﻟﺗﻧﻔﯾذ اﻷول ﻟﺗرى ﻛﯾف ﺗﺗم ﻋﻣﻠﯾﺔ اﻹﻛﻣﺎل اﻟﺗﻠﻘﺎﺋﻲ ‪ ,‬أﻟﻐﻲ ﺗﻔﻌﯾل ﺧﺎﺻﯾﺔ اﻹﻛﻣﺎل اﻟﺗﻠﻘﺎﺋﻲ ﻛﻣﺎ ھو‬
‫ﻣوﺿﺢ ﺑﺎﻷﻋﻠﻰ ﺛم أﻋد اﻟﺗﻧﻔﯾذ وأﻋد ﻛﺗﺎﺑﺔ ﻧﻔس اﻟﻛﻠﻣﺔ ﻟﺗﻼﺣظ ﺗوﻗف ﻋﻣل اﻹﻛﻣﺎل اﻟﺗﻠﻘﺎﺋﻲ ‪.‬‬

‫اﺳﺗﺧدام أداة اﻟﺗﺣﻛم ‪CheckBox‬‬

‫ﺗﺳﻣﺢ ھذه اﻷداة ﻟﻠﻣﺳﺗﺧدم أن ﯾﺣدد ﻗﺑوﻟﮫ أو رﻓﺿﮫ ﻷﻣر ﻣﺎ‪ ,‬أي أﻧﮭﺎ ﺗﻌﺗﺑر ﻛﺳؤال ﯾطرح ﻋﻠﻰ‬
‫اﻟﻣﺳﺗﺧدم واﻹﺟﺎﺑﺔ ﺣﺗﻣﺎ ً إﻣﺎ ﻧﻌم أو ﻻ ‪ ,‬ﻣﺛﻼ ﻣوﻗﻊ ﻓﯾﺳﺑوك ﯾﺳﺄﻟﻧﺎ إن ﻛﻧﺎ ﻧرﯾد اﺳﺗﻘﺑﺎل رﺳﺎﺋل ﻋﻠﻰ‬
‫ﺑرﯾدﻧﺎ اﻹﻟﻛﺗروﻧﻲ أم ﻻ ‪ ,‬ﺣﯾث إن اﻟﺧﺎﺻﯾﺔ ‪ Checked‬ھﻲ اﻟﺗﻲ ﺗﻣﻛﻧﻧﺎ ﻣن ﻣﻌرﻓﺔ ﺧﯾﺎر اﻟﻣﺳﺗﺧدم‬
‫ﻛﻣﺎ ﺳﻧرى ﺑﻌد ﻗﻠﯾل ‪.‬‬

‫ﺧﺻﺎﺋص أداة اﻟﺗﺣﻛم ‪CheckBox‬‬

‫‪ : AccessKey‬ﻟﺗﺣدﯾد ﻣﻔﺗﺎح ﻣن ﻟوﺣﺔ اﻟﻣﻔﺎﺗﯾﺢ ﻋﻧد اﻟﺿﻐط ﻋﻠﯾﮫ ﯾﺗم ﻧﻘل اﻟﺗرﻛﯾز ﻟﮭذه‬ ‫‪‬‬
‫اﻷداة‬
‫‪ : AutoPostBack‬إرﺳﺎل ﺧﯾﺎر اﻟﺗﺣدﯾد إﻟﻰ اﻟﺳﯾرﻓر ﺑﺷﻛل ﻓوري ﻋﻧد أي ﺗﻐﯾر ﺑﺣﺎﻟﺗﮫ ‪.‬‬ ‫‪‬‬
‫‪ : Checked‬ﺗﻌود ﺑـ ‪ True‬أو ‪ False‬ﺑﺣﺳب ﻗﺑول اﻟﻣﺳﺗﺧدم أو رﻓﺿﮫ ‪.‬‬ ‫‪‬‬
‫‪ : Enabled‬ﺗﻔﻌﯾل أو إﻟﻐﺎء ﺗﻔﻌﯾل ھذه اﻷداة ‪.‬‬ ‫‪‬‬
‫‪ : TabIndex‬ﺗﺣدﯾد رﻗم ﯾدل ﻋﻠﻰ ﺗرﺗﯾب اﻟوﺻول ﻟﮭذه اﻷداة ﻋﺑر ﻣﻔﺗﺎح ‪. Tab‬‬ ‫‪‬‬
‫‪ : Text‬ﺗﺣدﯾد اﻟﻧص اﻟذي ﯾظﮭر ﺑﺟﺎﻧب ھذه اﻷداة ) اﻟﺳؤال اﻟﻣطروح ( ‪.‬‬ ‫‪‬‬
‫‪ : TextAlign‬ﻣوﺿﻊ اﻟﻧص ﺑﺎﻟﻧﺳﺑﺔ ﻟﻸداة ‪ ,‬ﻋﻠﻰ ﯾﻣﯾﻧﮭﺎ أم ﯾﺳﺎرھﺎ ﺗﺄﺧذ إﺣدى اﻟﻘﯾﻣﺗﯾن‬ ‫‪‬‬
‫‪Left , Right‬‬

‫أداة اﻟﺗﺣﻛم ‪ CheckBox‬ﺗدﻋم اﻟطرﯾﻘﺔ ‪ Focus‬اﻟﺗﻲ ﺗﺳﻣﺢ ﺑوﺿﻊ اﻟﺗرﻛﯾز ﻋﻠﯾﮭﺎ ﻋﻧد اﻟﺗﻧﻔﯾذ ‪ ,‬ﻛﻣﺎ‬
‫أﻧﮭﺎ ُﺗطﻠق اﻟﺣدث ‪ CheckedChanged‬ﻋﻧد ﺗﻐﯾﯾر اﻟﻣﺳﺗﺧدم ﻟﺧﯾﺎره ﺳواءاً ﺑﺎﻟرﻓض أو اﻟﻘﺑول ‪.‬‬

‫ﻣﺛﺎل ﺑﺳﯾط ‪ :‬أﻧﺷﺊ ﺻﻔﺣﺔ ﺟدﯾدة أﺿف ﻟﮭﺎ اﻷدوات ‪ CheckBox1,Button1,Label1‬أﻧﻘر ﻋﻠﻰ‬
‫اﻟزر ‪ Button1‬ﻣرﺗﯾن واﻛﺗب اﻟﻛود اﻟﺗﺎﻟﻲ ‪:‬‬

‫ﻛود ‪C#‬‬
‫)‪protected void Button1_Click(object sender, EventArgs e‬‬
‫{‬
‫;)(‪Label1.Text = CheckBox1.Checked.ToString‬‬
‫}‬

‫‪-7-‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫ﻛود ‪VB‬‬
‫‪Protected Sub Button1_Click1(ByVal sender As Object, ByVal e As‬‬
‫‪System.EventArgs) Handles Button1.Click‬‬

‫)(‪Label1.Text = CheckBox1.Checked.ToString‬‬
‫‪End Sub‬‬

‫ﻧﻔذ وﻗم ﺗﺣدﯾد ﺧﯾﺎر ‪ CheckBox‬ﺛم اﺿﻐط ﻋﻠﻰ اﻟزر ‪ ,‬ﺳﺗرى أن اﻟﺧﺎﺻﯾﺔ ‪ Checked‬أﻋﺎدت‬
‫‪ , True‬أﻟﻐﻲ ﺗﻔﻌﯾل اﻟﺧﯾﺎر واﺿﻐط ﻋﻠﻰ اﻟزر ﻣرة أﺧرى ‪ ..‬ﻣﺎھﻲ اﻟﻧﺗﯾﺟﺔ اﻵن ؟‬

‫ﻛود اﻟﺻﻔﺣﺔ ﺑﻌد إﺟراء ﺗﻌدﯾﻼت ﺑﺳﯾطﺔ ﺑﺎﻟﺧﺻﺎﺋص ﻛﺎﻟﺗﺎﻟﻲ ‪:‬‬

‫ﻛود ‪ASP.net‬‬
‫>‪<div‬‬
‫" اﺳﺘﻘﺒﺎل رﺳﺎﺋﻞ ﻋﻠﻰ اﻟﺠﻮال ؟ "=‪<asp:CheckBox ID="CheckBox1" runat="server" Text‬‬
‫>‪TextAlign="Left"/><br /‬‬
‫" ‪<asp:Button ID="Button1" runat="server" Text=" ok‬‬
‫>‪onclick="Button1_Click" /><br /‬‬
‫>‪<asp:Label ID="Label1" runat="server" Text="" /‬‬
‫>‪</div‬‬

‫ﻣﻼﺣظﺔ‬

‫ﻣﻧﺻﺔ ﻋﻣل ‪ ASP.Net‬ﺗدﻋم اﻷداة ‪ CheckBoxList‬واﻟﺗﻲ ﺗﺗﯾﺢ إﻣﺎﻛﺎﻧﯾﺔ ﻋﻣل ﻗﺎﺋﻣﺔ ﻋﻧﺎﺻرھﺎ‬
‫ﻋﺑﺎرة ﻋن أدوات ‪ CheckBox‬ﻛﻣﺎ ﺳﻧرى ﻓﻲ ﻓﺻل ﻻﺣق ‪.‬‬

‫اﺳﺗﺧدام أداة اﻟﺗﺣﻛم ‪RadioButton‬‬

‫ﻻﺗظﮭر ھذه اﻷداة ﻣﻧﻔردة ﻟوﺣدھﺎ إﻧﻣﺎ ﺗﻛون داﺋﻣﺎ ً ﺿﻣن ﻣﺟﻣوﻋﺔ ﺣﯾث ﺑﺈﻣﻛﺎن اﻟﻣﺳﺗﺧدم ﺗﺣدﯾد‬
‫ﺧﯾﺎر واﺣد ﻓﻘط ﻣن ﺿﻣن أدوات ﻣﺟﻣوﻋﺔ ﻣﺎ ‪.‬‬

‫ﺧﺻﺎﺋص أداة اﻟﺗﺣﻛم ‪RadioButton‬‬

‫‪ : AccessKey ‬ﻟﺗﺣدﯾد ﻣﻔﺗﺎح ﻣن ﻟوﺣﺔ اﻟﻣﻔﺎﺗﯾﺢ ﻋﻧد اﻟﺿﻐط ﻋﻠﯾﮫ ﯾﺗم ﻧﻘل اﻟﺗرﻛﯾز ﻟﮭذه‬
‫اﻷداة‬
‫‪ : AutoPostBack ‬إرﺳﺎل ﺧﯾﺎر اﻟﺗﺣدﯾد إﻟﻰ اﻟﺳﯾرﻓر ﺑﺷﻛل ﻓوري ﻋﻧد أي ﺗﻐﯾر ﺑﺣﺎﻟﺗﮫ ‪.‬‬

‫‪-8-‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫‪ : Checked‬ﺗﻌود ﺑـ ‪ True‬أو ‪ False‬ﺑﺣﺳب ﻗﺑول اﻟﻣﺳﺗﺧدم أو رﻓﺿﮫ ‪.‬‬ ‫‪‬‬

‫‪ : Enabled‬ﺗﻔﻌﯾل أو إﻟﻐﺎء ﺗﻔﻌﯾل ھذه اﻷداة ‪.‬‬ ‫‪‬‬
‫‪ : GroupName‬ﻟﺿم أداة ‪ RadioButton‬إﻟﻰ ﻣﺟﻣوﻋﺔ ‪ ,‬ﻣن ﻛل ﻣﺟﻣوﻋﺔ ﻻﯾﻣﻛن‬ ‫‪‬‬
‫ﺗﺣدﯾد ﺳوى ﺧﯾﺎر واﺣد ﻓﻘط ﻣن أدوات ‪ RadionButton‬اﻟﻣوﺟودة ﻓﯾﮭﺎ‪.‬‬
‫‪ : TabIndex‬ﺗﺣدﯾد رﻗم ﯾدل ﻋﻠﻰ ﺗرﺗﯾب اﻟوﺻول ﻟﮭذه اﻷداة ﻋﺑر ﻣﻔﺗﺎح ‪. Tab‬‬ ‫‪‬‬
‫‪ : Text‬ﺗﺣدﯾد اﻟﻧص اﻟذي ﯾظﮭر ﺑﺟﺎﻧب ھذه اﻷداة ) اﻟﺧﯾﺎر اﻟﻣطروح ( ‪.‬‬ ‫‪‬‬
‫‪ : TextAlign‬ﻣوﺿﻊ اﻟﻧص ﺑﺎﻟﻧﺳﺑﺔ ﻟﻸداة ‪ ,‬ﻋﻠﻰ ﯾﻣﯾﻧﮭﺎ أم ﯾﺳﺎرھﺎ ﺗﺄﺧذ إﺣدى اﻟﻘﯾﻣﺗﯾن‬ ‫‪‬‬
‫‪Left , Right‬‬

‫أداة اﻟﺗﺣﻛم ‪ RadioButton‬ﺗدﻋم اﻟطرﯾﻘﺔ ‪ Focus‬اﻟﺗﻲ ﺗﺳﻣﺢ ﺑوﺿﻊ اﻟﺗرﻛﯾز ﻋﻠﯾﮭﺎ ﻋﻧد اﻟﺗﻧﻔﯾذ ‪,‬‬
‫ﻛﻣﺎ أﻧﮭﺎ ُﺗطﻠق اﻟﺣدث ‪ CheckedChanged‬ﻋﻧد ﺗﻐﯾﯾر اﻟﻣﺳﺗﺧدم ﻟﺧﯾﺎره‪.‬‬

‫ﺳﻧﻘوم ﺑﺎﻟﻣﺛﺎل اﻟﺗﺎﻟﻲ ﺑﻌرض ﺑﺳﯾط ﻟﻛﯾﻔﯾﺔ ﻋﻣل ھذه اﻷداة ‪ ,‬أﻧﺷﺊ ﺻﻔﺣﺔ ﺟدﯾدة أﺿف ﻋﻠﯾﮭﺎ اﻷدوات‬
‫اﻟﺗﺎﻟﯾﺔ ‪RadioButton :‬ﻋدد ‪ , button,Label , 3‬ﻧﻌدل اﻟﺧﺎﺻﯾﺔ ‪ Text‬ﻷدوات ‪RadioButton‬‬
‫ﺑﺣﯾث ﺗﻌرض ﻛل أداة ﻟون ﻣﻌﯾن ‪ ,‬ﻛﻣﺎ ﯾﺟب ) وھذا ھﺎم ﺟدا ( أن ﺗﺄﺧذ اﻷدوات اﻟﺛﻼث اﻟﺳﺎﺑﻘﺔ ﻧﻔس‬
‫ﻗﯾﻣﺔ اﻟـ ‪ , GroupName‬ﻧﺿﻐط ﻋﻠﻰ اﻟزر ﻣرﺗﯾن وﻧﻛﺗب اﻟﻛود اﻟﺗﺎﻟﻲ ‪:‬‬

‫ﻛود ‪C#‬‬
‫)‪protected void Button1_Click(object sender, EventArgs e‬‬
‫{‬
‫;"" = ‪string color‬‬
‫)‪if (RadioButton1.Checked‬‬
‫;‪color = RadioButton1.Text‬‬
‫)‪if (RadioButton2.Checked‬‬
‫;‪color = RadioButton2.Text‬‬
‫)‪if (RadioButton3.Checked‬‬
‫;‪color = RadioButton3.Text‬‬
‫;‪Label1.Text = "Your Favorite color is: " + color‬‬
‫}‬

‫ﻛود ‪VB‬‬
‫‪Protected Sub Button1_Click(ByVal sender As Object, ByVal e As‬‬
‫‪System.EventArgs) Handles Button1.Click‬‬

‫"" = ‪Dim color As String‬‬

‫‪If RadioButton1.Checked Then‬‬
‫‪color = RadioButton1.Text‬‬
‫‪End If‬‬
‫‪If RadioButton2.Checked Then‬‬
‫‪color = RadioButton2.Text‬‬
‫‪End If‬‬

‫‪-9-‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫‪If RadioButton3.Checked Then‬‬

‫‪color = RadioButton3.Text‬‬
‫‪End If‬‬
‫‪Label1.Text = "Your Favorite color is: " + color‬‬
‫‪End Sub‬‬

‫أﻣﺎ ﻛود اﻟﺻﻔﺣﺔ ﻓﮭو ﻛﺎﻟﺗﺎﻟﻲ ‪:‬‬

‫ﻛود ‪ASP.net‬‬
‫>‪<div‬‬
‫>‪Favorite color ?<br /‬‬
‫"‪<asp:RadioButton ID="RadioButton1" runat="server‬‬ ‫"‪Text="Red‬‬
‫>‪GroupName="colors"/><br /‬‬
‫"‪<asp:RadioButton ID="RadioButton2" runat="server‬‬ ‫"‪Text="Green‬‬
‫>‪GroupName="colors"/><br /‬‬
‫"‪<asp:RadioButton ID="RadioButton3" runat="server‬‬ ‫"‪Text="Blue‬‬
‫>‪GroupName="colors"/><br /‬‬
‫‪<asp:Button ID="Button1" runat="server" Text=" ok‬‬ ‫"‬
‫>‪onclick="Button1_Click" /‬‬
‫>‪<br /‬‬
‫>‪<asp:Label ID="Label1" runat="server" Text=""/‬‬
‫>‪</div‬‬

‫ﻗم ﺑﺣذف اﻟﺧﺎﺻﯾﺔ ‪ GroupName‬ﻣن اﻟﻛود اﻟﺳﺎﺑق وﻧﻔذ وﺟرب أن ﺗﺧﺗﺎر أﻛﺛر ﻣن ﻟون ‪.‬‬

‫ﻣﻼﺣظﺔ‬

‫ﻣﻧﺻﺔ ﻋﻣل ‪ ASP.Net‬ﺗدﻋم اﻷداة ‪ RadioButtonList‬واﻟﺗﻲ ﺗﺗﯾﺢ إﻣﺎﻛﺎﻧﯾﺔ ﻋﻣل ﻗﺎﺋﻣﺔ ﻋﻧﺎﺻرھﺎ‬
‫ﻋﺑﺎرة ﻋن أدوات ‪ RadioButton‬ﻛﻣﺎ ﺳﻧرى ﻓﻲ ﻓﺻل ﻻﺣق ‪.‬‬
‫إرﺳﺎل ﺑﯾﺎﻧﺎت اﻟﻧﻣوذج‬

‫ﻣﻧﺻﺔ ﻋﻣل ‪ ASP.Net‬ﺗزودﻧﺎ ﺑﺛﻼث أدوات ﻹرﺳﺎل ﺑﯾﺎﻧﺎت اﻟﻧﻣوذج إﻟﻰ اﻟﺳﯾرﻓر ‪Button ,‬‬
‫‪ LinkButton , ImageButton‬وھم ﯾؤدون ﻧﻔس اﻟوظﯾﻔﺔ وﻟﻛن ﻟﻛل ﻣﻧﮭم ﻣظﮭر وﺑﻌض‬
‫اﻟﺧﺻﺎﺋص اﻟﺗﻲ ﺗﻣﯾزه ﻋن ﻏﯾره‪.‬‬

‫اﺳﺗﺧدام أداة اﻟﺗﺣﻛم ‪Button‬‬

‫ﺗﻘوم ھذه اﻷداة ﻋﻧد اﻟﻧﻘر ﻋﻠﯾﮭﺎ ﺑﺈرﺳﺎل ﺑﯾﺎﻧﺎت اﻟﺻﻔﺣﺔ إﻟﻰ اﻟﺳﯾرﻓر ﻟﺗﺗم ﻣﻌﺎﻟﺟﺗﮭﺎ ﻛﻣﺎ ﯾﺗم ﺗﻧﻔﯾذ‬
‫اﻟﻛود اﻟﻣوﺟود ﺿﻣن اﻟﺣدث ‪ Click‬اﻟﺧﺎص ﺑﮭذه اﻷداة ‪ ,‬ﯾﻘوم اﻟﻣﺛﺎل اﻟﺗﺎﻟﻲ ﺑﻌرض اﻟوﻗت اﻟﺣﺎﻟﻲ‬
‫ﻓﻲ أداة ‪ Label‬ﻋﻧد اﻟﻧﻘر ﻋﻠﻰ اﻟزر ‪ , Button‬أﻧﺷﺊ ﺻﻔﺣﺔ ﺟدﯾدة أﺿف ﻟﮭﺎ ‪Button,Label‬‬
‫اﺿﻐط ﻋﻠﻰ اﻟزر ﻣرﺗﯾن واﻛﺗب اﻟﻛود اﻟﺗﺎﻟﻲ ‪:‬‬

‫‪- 10 -‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫ﻛود ‪C#‬‬
‫)‪protected void Button1_Click(object sender, EventArgs e‬‬
‫{‬
‫;)"‪Label1.Text = DateTime.Now.ToString("T‬‬
‫}‬

‫ﻛود ‪VB‬‬
‫‪Protected Sub Button1_Click(ByVal sender As Object, ByVal e As‬‬
‫‪System.EventArgs) Handles Button1.Click‬‬

‫)"‪Label1.Text = DateTime.Now.ToString("T‬‬
‫‪End Sub‬‬

‫ﻛود اﻟﺻﻔﺣﺔ ﻛﺎﻣﻼ ً ‪:‬‬

‫ﻛود ‪ASP.net‬‬
‫>‪<div‬‬
‫"‪<asp:Button ID="Button1" runat="server" Text="Button‬‬
‫>‪onclick="Button1_Click" /‬‬
‫>‪<br /‬‬
‫>‪<asp:Label ID="Label1" runat="server" Text="" /‬‬
‫>‪</div‬‬

‫ﻻﺣظ ﻋﻧد اﻟﺿﻐط ﻋﻠﻰ اﻟزر ﯾﺗم إﻋﺎدة ﺗﺣﻣﯾل اﻟﺻﻔﺣﺔ ﺑﺎﻟﻛﺎﻣل ﺣﯾث ﺗم إرﺳﺎﻟﮭﺎ ﻟﻠﺳﯾرﻓر وﻗﺎم ﺑﻌﻣﻠﯾﺔ‬
‫اﻟﻣﻌﺎﻟﺟﺔ اﻟﻣطﻠوﺑﺔ ﺛم أﻋﺎد اﻟﻧﺗﯾﺟﺔ ﻟﻠﻣﺳﺗﺧدم ‪.‬‬

‫ﺧﺻﺎﺋص أداة اﻟﺗﺣﻛم ‪Button‬‬

‫‪ : AccessKey‬ﻟﺗﺣدﯾد ﻣﻔﺗﺎح ﻣن ﻟوﺣﺔ اﻟﻣﻔﺎﺗﯾﺢ ﻋﻧد اﻟﺿﻐط ﻋﻠﯾﮫ ﯾﺗم ﻧﻘل اﻟﺗرﻛﯾز ﻟﮭذه‬ ‫‪‬‬
‫اﻷداة‬
‫‪ : CommandArgument‬ﺗﺣدﯾد ﺑﺎراﻣﺗر ﯾﺗم إرﺳﺎﻟﮫ إﻟﻰ اﻟﺣدث ‪Command‬‬ ‫‪‬‬
‫‪ : CommandName‬ﺗﺣدﯾد اﺳم اﻷﻣر اﻟذي ﯾﺗم إرﺳﺎﻟﮫ إﻟﻰ اﻟﺣدث ‪Command‬‬ ‫‪‬‬
‫‪ : Enabled‬ﺗﻔﻌﯾل أو إﻟﻐﺎء ﺗﻔﻌﯾل ھذه اﻷداة ‪.‬‬ ‫‪‬‬
‫‪ : OnClientClick‬ﻟﺗﺣدﯾد ﻛود ﯾﺗم ﺗﻧﻔﯾذه ﻋﻠﻰ ﺟﮭﺎز اﻟﻣﺳﺗﺧدم ﻋﻧد اﻟﺿﻐط ﻋﻠﻰ اﻟزر‪.‬‬ ‫‪‬‬
‫‪ : PostBackUrl‬ﻟﻺﻧﺗﻘﺎل إﻟﻰ ﺻﻔﺣﺔ ﻣﻌﯾﻧﺔ ﺑﻌد إرﺳﺎل اﻟﺑﯾﺎﻧﺎت إﻟﻰ اﻟﺳﯾرﻓر ‪.‬‬ ‫‪‬‬
‫‪ : TabIndex‬ﺗﺣدﯾد رﻗم ﯾدل ﻋﻠﻰ ﺗرﺗﯾب اﻟوﺻول ﻟﮭذه اﻷداة ﻋﺑر ﻣﻔﺗﺎح ‪. Tab‬‬ ‫‪‬‬
‫‪- 11 -‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫‪ : Text ‬ﺗﺣدﯾد اﻟﻧص اﻟذي ﯾظﮭر ﻋﻠﻰ ھذه اﻷداة ‪.‬‬

‫‪ : UseSubmitBehavior ‬ﺗﻣﻛﻧﻧﺎ ﻣن اﺳﺗﺧدام اﻟﺟﺎﻓﺎ ﺳﻛرﺑت ﻹرﺳﺎل ﺑﯾﺎﻧﺎت اﻟﻧﻣوذج ‪.‬‬

‫أداة اﻟﺗﺣﻛم ‪ Button‬ﺗدﻋم اﻟطرﯾﻘﺔ ‪ Focus‬اﻟﺗﻲ ﺗﺳﻣﺢ ﺑوﺿﻊ اﻟﺗرﻛﯾز ﻋﻠﯾﮭﺎ ﻋﻧد اﻟﺗﻧﻔﯾذ ‪ ,‬ﻛﻣﺎ أﻧﮭﺎ‬
‫ﺗدﻋم اﻟﺣدﺛﯾن ‪:‬‬

‫‪ : Click ‬ﯾﺗم إطﻼﻗﮫ ﻋﻧد اﻟﺿﻐط ﻋﻠﻰ اﻟزر ‪.‬‬

‫‪ : Command ‬ﯾﺗم إطﻼﻗﮫ ﻋﻧد اﻟﺿﻐط ﻋﻠﻰ اﻟزر ‪ ,‬وﯾﺗم ﺗﻣرﯾر ‪CommandArgument‬‬
‫‪ , CommandName‬إﻟﻰ ھذا اﻟﺣدث ‪.‬‬

‫اﺳﺗﺧدام أداة اﻟﺗﺣﻛم ‪LinkButton‬‬

‫ﺗؤدي ﻧﻔس ﻋﻣل اﻷداة ‪ Button‬وﻟﻛﻧﮭﺎ ﺗﺧﺗﻠف ﻣن ﺣﯾث اﻟﻣظﮭر ﻓﮭﻲ ﺗﺑدو ﻛراﺑط وﻟﯾس ﻛزر‬
‫وﺑﺎﻟﺗﺎﻟﻲ ﯾﻣﻛن ﺗﺣدﯾد ﺻﻔﺣﺔ ﻟﻼﻧﺗﻘﺎل إﻟﯾﮭﺎ ﻋﺑر ھذه اﻷداة ‪ ,‬ﻟﻧﻘم ﺑﺗﻧﻔﯾذ ﻧﻔس اﻟﻣﺛﺎل اﻟﺳﺎﺑق وﻟﻛن‬
‫ﻧﺳﺗﺑدل اﻷداة ‪ Button‬ﺑﺎﻷداة ‪ , LinkButton‬اﻟﻛود اﻟذي ﯾﺗم ﺗﻧﻔﯾذه ﻋﻧد اﻟﺿﻐط ﻋﻠﻰ‬
‫‪LinkButton‬‬

‫ﻛود ‪C#‬‬
‫)‪protected void LinkButton1_Click(object sender, EventArgs e‬‬
‫{‬
‫;)"‪Label1.Text = DateTime.Now.ToString("T‬‬
‫}‬

‫ﻛود ‪VB‬‬
‫‪Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As‬‬
‫‪System.EventArgs) Handles LinkButton1.Click‬‬

‫)"‪Label1.Text = DateTime.Now.ToString("T‬‬
‫‪End Sub‬‬

‫ﻛود اﻟﺻﻔﺣﺔ ‪:‬‬

‫ﻛود ‪ASP.net‬‬
‫>‪<div‬‬
‫"‪<asp:LinkButton ID="LinkButton1" runat="server‬‬
‫>‪onclick="LinkButton1_Click">LinkButton</asp:LinkButton‬‬
‫>‪<br /‬‬

‫‪- 12 -‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫>‪<asp:Label ID="Label1" runat="server" Text="" /‬‬

‫>‪</div‬‬

‫ﺗﻘوم اﻷداة ‪ LinkButton‬وﺑﺷﻛل ﻏﯾر ﻣرﺋﻲ ﺑﺗﻧﻔﯾذ ﻛود ﺟﺎﻓﺎ ﺳﻛرﺑت وﻋﻠﻰ وﺟﮫ اﻟﺗﺣدﯾد ﯾﺗم ﺗﻧﻔﯾذ‬
‫اﻟطرﯾﻘﺔ ‪ _doPostBack‬وھو اﻟﻣﺳؤول ﻋن إرﺳﺎل اﻟﺑﯾﺎﻧﺎت إﻟﻰ اﻟﺳﯾرﻓر ‪,‬ﻓﻲ ﻣﺛﺎﻟﻧﺎ اﻟﺳﺎﺑق ﻓﺈن‬
‫اﻟﻛود ﯾﺑدو ﻛﺎﻟﺗﺎﻟﻲ ‪:‬‬

‫ﻛود ‪ASP.net‬‬
‫>‪<a id="LinkButton1" href="javascript:__doPostBack(‘LinkButton1’,’’)">Submit</a‬‬

‫ﺧﺻﺎﺋص أداة اﻟﺗﺣﻛم ‪LinkButton‬‬

‫‪ : AccessKey‬ﻟﺗﺣدﯾد ﻣﻔﺗﺎح ﻣن ﻟوﺣﺔ اﻟﻣﻔﺎﺗﯾﺢ ﻋﻧد اﻟﺿﻐط ﻋﻠﯾﮫ ﯾﺗم ﻧﻘل اﻟﺗرﻛﯾز ﻟﮭذه‬ ‫‪‬‬
‫اﻷداة‬
‫‪ : CommandArgument‬ﺗﺣدﯾد ﺑﺎراﻣﺗر ﯾﺗم إرﺳﺎﻟﮫ إﻟﻰ اﻟﺣدث ‪Command‬‬ ‫‪‬‬
‫‪ : CommandName‬ﺗﺣدﯾد اﺳم اﻷﻣر اﻟذي ﯾﺗم إرﺳﺎﻟﮫ إﻟﻰ اﻟﺣدث ‪Command‬‬ ‫‪‬‬
‫‪ : Enabled‬ﺗﻔﻌﯾل أو إﻟﻐﺎء ﺗﻔﻌﯾل ھذه اﻷداة ‪.‬‬ ‫‪‬‬
‫‪ : OnClientClick‬ﻟﺗﺣدﯾد ﻛود ﯾﺗم ﺗﻧﻔﯾذه ﻋﻠﻰ ﺟﮭﺎز اﻟﻣﺳﺗﺧدم ﻋﻧد اﻟﺿﻐط ﻋﻠﻰ ھذه اﻷداة‪.‬‬ ‫‪‬‬
‫‪ : PostBackUrl‬ﻟﻺﻧﺗﻘﺎل إﻟﻰ ﺻﻔﺣﺔ ﻣﻌﯾﻧﺔ ﺑﻌد إرﺳﺎل اﻟﺑﯾﺎﻧﺎت إﻟﻰ اﻟﺳﯾرﻓر ‪.‬‬ ‫‪‬‬
‫‪ : TabIndex‬ﺗﺣدﯾد رﻗم ﯾدل ﻋﻠﻰ ﺗرﺗﯾب اﻟوﺻول ﻟﮭذه اﻷداة ﻋﺑر ﻣﻔﺗﺎح ‪. Tab‬‬ ‫‪‬‬
‫‪ : Text‬ﺗﺣدﯾد اﻟﻧص اﻟذي ﯾظﮭر ﻋﻠﻰ ھذه اﻷداة ‪.‬‬ ‫‪‬‬

‫أداة اﻟﺗﺣﻛم ‪ LinkButton‬ﺗدﻋم اﻟطرﯾﻘﺔ ‪ Focus‬اﻟﺗﻲ ﺗﺳﻣﺢ ﺑوﺿﻊ اﻟﺗرﻛﯾز ﻋﻠﯾﮭﺎ ﻋﻧد اﻟﺗﻧﻔﯾذ ‪ ,‬ﻛﻣﺎ‬
‫أﻧﮭﺎ ﺗدﻋم اﻟﺣدﺛﯾن ‪:‬‬

‫‪ : Click ‬ﯾﺗم إطﻼﻗﮫ ﻋﻧد اﻟﺿﻐط ﻋﻠﻰ ھذه اﻷداة ‪.‬‬

‫‪ : Command ‬ﯾﺗم إطﻼﻗﮫ ﻋﻧد اﻟﺿﻐط ﻋﻠﻰ اﻷداة‪ ,‬وﯾﺗم ﺗﻣرﯾر ‪CommandArgument‬‬
‫‪ , CommandName‬إﻟﻰ ھذا اﻟﺣدث ‪.‬‬

‫اﺳﺗﺧدام أداة اﻟﺗﺣﻛم ‪ImageButton‬‬

‫ﺗؤدي ﻧﻔس وظﯾﻔﺔ اﻷداﺗﯾن اﻟﺳﺎﺑﻘﺗﯾن ﺣﯾث ﺗﻘوم ﺑﺈرﺳﺎل ﺑﯾﺎﻧﺎت اﻟﻧﻣوذج إﻟﻰ اﻟﺳﯾرﻓر وﺗظﮭر ﻛﺻورة‬
‫ﻋﻠﻰ ﺻﻔﺣﺔ اﻻﻧﺗرﻧت ‪ ,‬ﻟﻧﺗﻌرف ﺑداﯾﺔ ً ﻋﻠﻰ ﺧﺻﺎﺋص ھذه اﻷداة ﺛم ﻧطﺑق ﻣﺛﺎل ﺗوﺿﯾﺣﻲ ‪.‬‬

‫ﺧﺻﺎﺋص أداة اﻟﺗﺣﻛم ‪: ImageButton‬‬

‫‪- 13 -‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫‪ : AccessKey‬ﻟﺗﺣدﯾد ﻣﻔﺗﺎح ﻣن ﻟوﺣﺔ اﻟﻣﻔﺎﺗﯾﺢ ﻋﻧد اﻟﺿﻐط ﻋﻠﯾﮫ ﯾﺗم ﻧﻘل اﻟﺗرﻛﯾز ﻟﮭذه‬ ‫‪‬‬
‫اﻷداة‬
‫‪ : AlternateText‬ﻧص ﺑدﯾل ﯾﺗم ﻋرﺿﮫ ﻓﻲ ﺣﺎل ﻋدم ﻋرض اﻟﺻورة اﻟﻣﺣددة‬ ‫‪‬‬
‫‪ : DescriptionUrl‬ﻟﺗﺣدﯾد راﺑط إﻟﻰ ﺻﻔﺣﺔ ﺗﺣﺗوي ﺗﻔﺎﺻﯾل ﻋن اﻟﺻورة‬ ‫‪‬‬
‫‪ : CommandArgument‬ﺗﺣدﯾد ﺑﺎراﻣﺗر ﯾﺗم إرﺳﺎﻟﮫ إﻟﻰ اﻟﺣدث ‪Command‬‬ ‫‪‬‬
‫‪ : CommandName‬ﺗﺣدﯾد اﺳم اﻷﻣر اﻟذي ﯾﺗم إرﺳﺎﻟﮫ إﻟﻰ اﻟﺣدث ‪Command‬‬ ‫‪‬‬
‫‪ : Enabled‬ﺗﻔﻌﯾل أو إﻟﻐﺎء ﺗﻔﻌﯾل ھذه اﻷداة ‪.‬‬ ‫‪‬‬
‫‪ : ImageAlign‬ﺗﺣدﯾد ﻣوﻗﻊ اﻟﺻورة ﺑﺎﻟﻧﺳﺑﺔ ﻷدوات ‪ html‬أﺧرى وﯾﻣﻛن أن ﺗﺄﺧذ إﺣدى‬ ‫‪‬‬
‫‪AbsBottom, AbsMiddle, Baseline, Bottom, Left,‬‬ ‫اﻟﻘﯾم اﻟﺗﺎﻟﯾﺔ ‪:‬‬
‫‪. Middle,NotSet, Right, TextTop, Top‬‬
‫‪ : ImageUrl‬ﻟﺗﺣدﯾد ﻣﺳﺎر واﺳم اﻟﺻورة اﻟﺗﻲ ﺳﯾﺗم ﻋرﺿﮭﺎ ‪.‬‬ ‫‪‬‬
‫‪ : OnClientClick‬ﻟﺗﺣدﯾد ﻛود ﯾﺗم ﺗﻧﻔﯾذه ﻋﻠﻰ ﺟﮭﺎز اﻟﻣﺳﺗﺧدم ﻋﻧد اﻟﺿﻐط ﻋﻠﻰ ھذه اﻷداة‪.‬‬ ‫‪‬‬
‫‪ : PostBackUrl‬ﻟﻺﻧﺗﻘﺎل إﻟﻰ ﺻﻔﺣﺔ ﻣﻌﯾﻧﺔ ﺑﻌد إرﺳﺎل اﻟﺑﯾﺎﻧﺎت إﻟﻰ اﻟﺳﯾرﻓر ‪.‬‬ ‫‪‬‬
‫‪ : TabIndex‬ﺗﺣدﯾد رﻗم ﯾدل ﻋﻠﻰ ﺗرﺗﯾب اﻟوﺻول ﻟﮭذه اﻷداة ﻋﺑر ﻣﻔﺗﺎح ‪. Tab‬‬ ‫‪‬‬

‫أداة اﻟﺗﺣﻛم ‪ ImageButton‬ﺗدﻋم اﻟطرﯾﻘﺔ ‪ Focus‬اﻟﺗﻲ ﺗﺳﻣﺢ ﺑوﺿﻊ اﻟﺗرﻛﯾز ﻋﻠﯾﮭﺎ ﻋﻧد اﻟﺗﻧﻔﯾذ ‪,‬‬
‫ﻛﻣﺎ أﻧﮭﺎ ﺗدﻋم اﻟﺣدﺛﯾن ‪:‬‬

‫‪ : Click ‬ﯾﺗم إطﻼﻗﮫ ﻋﻧد اﻟﺿﻐط ﻋﻠﻰ ھذه اﻷداة ‪.‬‬

‫‪ : Command ‬ﯾﺗم إطﻼﻗﮫ ﻋﻧد اﻟﺿﻐط ﻋﻠﻰ اﻷداة‪ ,‬وﯾﺗم ﺗﻣرﯾر ‪CommandArgument‬‬
‫‪ , CommandName‬إﻟﻰ ھذا اﻟﺣدث ‪.‬‬

‫ﻣﺛﺎل ‪ :‬ﺳﻧﻘوم ﻓﻲ اﻟﻣﺛﺎل اﻟﺗﺎﻟﻲ ﺑﺗﺣدﯾد إﺣداﺛﯾﺎت ﻣﻛﺎن ﺿﻐط اﻟﻣﺳﺗﺧدم ﻋﻠﻰ اﻷداة ‪ImageButton‬‬
‫أﻧﺷﺊ ﺻﻔﺣﺔ ﺟدﯾدة ﺿﻊ ﻓﯾﮭﺎ أداة ‪ ImageButton‬واﺟﻌﻠﮭﺎ ﺗﻌرض ﺻورة ﻣﺎ ﻋﺑر اﻟﺧﺎﺻﯾﺔ‬
‫‪ ImageUrl‬ﺛم أﺿف أداﺗﻲ ‪ , Label‬اﺿﻐط ﻋﻠﻰ ‪ ImageButton‬ﻣرﺗﯾن واﻛﺗب اﻟﻛود اﻟﺗﺎﻟﻲ ‪:‬‬

‫ﻛود ‪C#‬‬
‫)‪protected void ImageButton1_Click(object sender, ImageClickEventArgs e‬‬
‫{‬
‫;)(‪Label1.Text = "X = " + e.X.ToString‬‬
‫;)(‪Label2.Text = "Y = " + e.Y.ToString‬‬
‫}‬

‫ﻛود ‪VB‬‬
‫‪Protected Sub ImageButton1_Click(ByVal sender As Object, ByVal e As‬‬
‫‪System.Web.UI.ImageClickEventArgs) Handles ImageButton1.Click‬‬

‫‪- 14 -‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫)(‪Label1.Text = "X = " + e.X.ToString‬‬

‫)(‪Label2.Text = "Y = " + e.Y.ToString‬‬
‫‪End Sub‬‬

‫ﻛود اﻟﺻﻔﺣﺔ ‪:‬‬

‫ﻛود ‪ASP.net‬‬
‫>‪<div‬‬
‫"‪<asp:ImageButton ID="ImageButton1" runat="server‬‬
‫"‪ImageUrl="~/images/img.png‬‬
‫>‪onclick="ImageButton1_Click" /‬‬
‫>‪<br /‬‬
‫>‪<asp:Label ID="Label1" runat="server" Text=""/‬‬
‫>‪<asp:Label ID="Label2" runat="server" Text=""/‬‬
‫>‪</div‬‬

‫ﻣﻼﺣظﺔ‬

‫ﻋﻧد اﻟﺗﻌﺎﻣل ﻣﻊ أي أداة ﺗﻘوم ﺑﻌرض اﻟﺻور ﯾﻧﺻﺢ ﺑﺷدة أن ﻧﺳﺗﺧدم اﻟﺧﺎﺻﯾﺔ ‪AlternateText‬‬
‫ﻟﺗﻘوم ﺑﻌرض ﻧص ﺑدﯾل ﻓﺑﻌض اﻟﻣﺳﺗﺧدﻣﯾن ﯾﻠﻐون ﺧﯾﺎر ﻋرض اﻟﺻور ﻓﻲ اﻟﻣﺗﺻﻔﺢ ﺑﮭدف‬
‫اﻟﺣﺻول ﻋﻠﻰ ﺳرﻋﺔ أﻛﺑر ﻓﻲ اﻟﺗﺻﻔﺢ ‪.‬‬

‫إرﺳﺎل اﻟﺑﯾﺎﻧﺎت ﻋﺑر اﻟﺻﻔﺣﺎت‬

‫ﺑﺷﻛل اﻓﺗراﺿﻲ ‪ ,‬ﻋﻧد اﻟﺿﻐط ﻋﻠﻰ زر ﻣﺎ ﻓﻲ اﻟﺻﻔﺣﺔ ‪ ,‬ﯾﺗم إرﺳﺎﻟﮭﺎ إﻟﻰ اﻟﺳﯾرﻓر وﻣﻌﺎﻟﺟﺔ اﻟﺑﯾﺎﻧﺎت‬
‫ﺛم ﻋرﺿﮭﺎ ﻋﻠﻰ ﻧﻔس اﻟﺻﻔﺣﺔ ‪ ,‬أي ﯾﺣدث إﻋﺎدة ﺗﺣﻣﯾل ﻟﻠﺻﻔﺣﺔ ﺑﺑﯾﺎﻧﺎت ﻣﻌدﻟﺔ ‪ ,‬اﻵن ﺳﻧﺗﻌﻠم ﻛﯾف‬
‫ﻧﺟﻌل اﻟﺳﯾرﻓر ﯾﻌﯾدﻧﺎ إﻟﻰ ﺻﻔﺣﺔ أﺧرى ﻟﻌرض اﻟﻧﺗﺎﺋﺞ ﺑﻌد أن ﻧﺿﻐط ﻋﻠﻰ زر ﻣﺎ ﻓﻲ ﺻﻔﺣﺔ أوﻟﻰ ‪.‬‬

‫ﻣﺛﺎل ‪ :‬أﻧﺷﺊ ﺻﻔﺣﺔ ﺟدﯾدة ﺳﻣﮭﺎ ‪ search.aspx‬أﺿف ﻟﮭﺎ ‪ , TextBox , Button‬أﻋطﻲ اﻟﺧﺎﺻﯾﺔ‬
‫‪ PostBackUrl‬اﻟﻘﯾﻣﺔ ‪ results.aspx‬وھﻲ ﺻﻔﺣﺔ ﺛﺎﻧﯾﺔ ﻧﻘوم ﺑﺈﻧﺷﺎﺋﮭﺎ ‪ ,‬ھذه اﻟﺧﺎﺻﯾﺔ ﻛﻣﺎ رأﯾﻧﺎ‬
‫ﺳﺎﺑﻘﺎ ً ﺗﺟﻌل اﻟﺳﯾرﻓر ﯾﻌﯾد ﺗوﺟﯾﮫ اﻟﻣﺗﺻﻔﺢ إﻟﻰ ﺻﻔﺣﺔ ﻣﺣددة ﻋﻧد اﻟﺿﻐط ﻋﻠﻰ اﻟزر ‪ ,‬ﻣﺎﻧرﯾده ﻣن‬
‫ﻣﺛﺎﻟﻧﺎ ھذا أن ﯾﻘوم اﻟﻣﺳﺗﺧدم ﺑﺈدﺧﺎل ﻧص ﻣﺎ ﻓﻲ ‪ TextBox‬ﺛم اﻟﺿﻐط ﻋﻠﻰ اﻟزر ﻟﯾﻘوم اﻟﺳﯾرﻓر‬
‫ﺑﻌرض ﻧﻔس اﻟﻧص وﻟﻛن ﻓﻲ ﺻﻔﺣﺔ أﺧرى ‪ ,‬ﻛود اﻟﺻﻔﺣﺔ ‪: search.aspx‬‬

‫ﻛود ‪ASP.net‬‬
‫>‪<div‬‬
‫>‪<asp:TextBox ID="TxtSearch" runat="server"></asp:TextBox‬‬
‫>‪<br /‬‬
‫"‪<asp:Button ID="BtnSearch" runat="server" Text="search‬‬

‫‪- 15 -‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

PostBackUrl="~/results.aspx" />
</div>

‫ ﻟﻧﻌرض ﻓﯾﮭﺎ اﻟﻧص اﻟﻣدﺧل‬Label ‫ وﻧﺿﯾف ﻋﻠﯾﮭﺎ ﻓﻘط أداة‬results.aspx ‫ﻧﻧﺗﻘل اﻵن إﻟﻰ اﻟﺻﻔﺣﺔ‬
. ‫ﻓﻲ اﻟﺻﻔﺣﺔ اﻷوﻟﻰ‬

: ‫ﺣﯾث ﯾﻛون اﻟﻛود ﻛﺎﻟﺗﺎﻟﻲ‬

ASP.net ‫ﻛود‬
<div>
<asp:Label ID="LblSearch" runat="server" Text="" />
</div>

: ‫وﻓﻲ ﺣدث ﺗﺣﻣﯾل اﻟﺻﻔﺣﺔ ﻧﻛﺗب اﻟﻛود اﻟﺗﺎﻟﻲ‬

C# ‫ﻛود‬
protected void Page_Load(object sender, EventArgs e)
{
if (PreviousPage != null)
{
TextBox txtSearch = (TextBox)PreviousPage.FindControl("TxtSearch");
LblSearch.Text = String.Format("Search for: {0}", txtSearch.Text);
}
}

VB ‫ﻛود‬
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Handles Me.Load

If PreviousPage IsNot Nothing Then

Dim txtSearch As TextBox =
DirectCast(PreviousPage.FindControl("TxtSearch"), TextBox)
LblSearch.Text = [String].Format("Search for: {0}", txtSearch.Text)
End If
End Sub

- 16 -
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫ﺗﺣﻠﯾل اﻟﻛود اﻟﺳﺎﺑق ‪ :‬ﺗﺳﺗﺧدم اﻟﺧﺎﺻﯾﺔ ‪ PreviousPage‬ﻟﻠﺣﺻول ﻋﻠﻰ ﻣؤﺷر ﻟﻠﺻﻔﺣﺔ اﻟﺳﺎﺑﻘﺔ‬
‫اﻟﺗﻲ ﺳﺑﺑت ﻧﻘﻠﻧﺎ إﻟﻰ ھذه اﻟﺻﻔﺣﺔ ‪ ,‬اﻟطرﯾﻘﺔ ‪ FindControl‬ﺗﻌﯾد أداة ﺗﺣﻛم ﻣﺣددة وﺑﺟﻣﯾﻊ‬
‫ﺧﺻﺎﺋﺻﮭﺎ اﻟﺣﺎﻟﯾﺔ ) وﻧﺣن ﻧرﯾد اﺳﺗرﺟﺎع ﻗﯾﻣﺔ اﻟﺧﺎﺻﯾﺔ ‪ Text‬ﻣﻧﮭﺎ ( اﻟﺑﺎراﻣﺗر اﻟذي ﺗم ﺗﻣرﯾره ھو‬
‫‪ Id‬أداة اﻟﺗﺣﻛم اﻟﻣطﻠوﺑﺔ ‪ ,‬ﻧﻧﻔذ اﻟﻛود اﻟﺻﻔﺣﺔ ‪ search‬وﻧدﺧل ﻧص ﻣﺎ ﺛم ﻧﺿﻐط ﻋﻠﻰ اﻟزر ﻟﻧرى‬
‫آﻟﯾﺔ ﻋﻣل اﻟﻛود واﻟﺧﺎﺻﯾﺔ ‪ PostBackUrl‬وﻛﯾف اﺳﺗطﻌﻧﺎ اﻟوﺻول ﻟﺑﯾﺎﻧﺎت ﺻﻔﺣﺔ ﺳﺎﺑﻘﺔ ﻣن‬
‫ﺻﻔﺣﺔ ﺗﺎﻟﯾﺔ ‪.‬‬

‫ﻣﻼﺣظﺔ‬

‫ﯾوﺟد أﺳﺎﻟﯾب أﻛﺛر ﻓﺎﻋﻠﯾﺔ ﻟﻧﻘل اﻟﺑﯾﺎﻧﺎت ﺑﯾن ﺻﻔﺣﺎت اﻟﻣوﻗﻊ ﻣﺛل ‪ Cookies,Session‬وﻏﯾرھم ‪.‬‬
‫وﺳﻧﻧﺎﻗﺷﮭم ﺑﺎﻟﺗﻔﺻﯾل ﻓﻲ ﻓﺻول ﻻﺣﻘﺔ إن ﺷﺎء ﷲ ‪.‬‬

‫ﺗﺣدﯾد اﻟزر اﻹﻓﺗراﺿﻲ‬

‫ﺗﺳﻣﺢ ھذه اﻟﺧﺎﺻﯾﺔ ﯾﺗﺣدﯾد زر ﻓﻲ اﻟﺻﻔﺣﺔ ﺑﺣﯾث ﯾﺗم ﺗﻧﻔﯾذ اﻟﻛود داﺧﻠﮫ ﺑﻣﺟرد اﻟﺿﻐط ﻋﻠﻰ ﻣﻔﺗﺎح‬
‫‪ Enter‬ﻣن ﻟوﺣﺔ اﻟﻣﻔﺎﺗﯾﺢ ودون اﻟﺣﺎﺟﺔ ﻟﻠﺿﻐط ﻋﻠﻰ اﻟزر ﻣن ﺧﻼل اﻟﻣﺎوس ‪ ,‬ﺗدﻋﻰ ھذه اﻟﺧﺎﺻﯾﺔ‬
‫‪ defaultButton‬وﯾﺗم ﺗﺣدﯾدھﺎ ﻛﺧﺎﺻﯾﺔ ﻟﻠﻧﻣوذج ‪.‬‬

‫ﻣﺛﺎل ‪ :‬أﻧﺷﺊ ﺻﻔﺣﺔ ﺟدﯾدة ‪ ,‬أﺿف ﻋﻠﯾﮭﺎ أداﺗﯾن ‪ Button‬وأداة ‪ Label‬واﺣدة ‪ ,‬ﻓﻲ ﺣدث اﻟﻧﻘر ﻋﻠﻰ‬
‫اﻟزر اﻷول اﻛﺗب اﻟﻛود اﻟﺗﺎﻟﻲ ‪:‬‬

‫ﻛود ‪C#‬‬
‫)‪protected void Button1_Click(object sender, EventArgs e‬‬
‫{‬
‫;" ‪Label1.Text = "you click Button1‬‬
‫}‬

‫ﻛود ‪VB‬‬
‫‪Protected Sub Button1_Click(ByVal sender As Object, ByVal e As‬‬
‫‪System.EventArgs) Handles Button1.Click‬‬

‫" ‪Label1.Text = "you click Button1‬‬

‫‪End Sub‬‬

‫‪- 17 -‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

: ‫وﻓﻲ ﺣدث اﻟﻧﻘر ﻋﻠﻰ اﻟزر اﻟﺛﺎﻧﻲ‬

C# ‫ﻛود‬
protected void Button2_Click(object sender, EventArgs e)
{
Label1.Text = "you click Button2 ";
}

VB ‫ﻛود‬
Protected Sub Button2_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Button2.Click

Label1.Text = "you click Button2 "

End Sub

‫ اﻟﺗﺎﺑﻌﺔ ﻟﻠﻔورم وإﻋطﺎﺋﮭﺎ ﻛﻘﯾﻣﺔ‬defaultButton ‫اﻵن ﻧﺄﺗﻲ إﻟﻰ ﺑﯾت اﻟﻘﺻﯾد وھﻲ ﺗﺣدﯾد اﻟﺧﺎﺻﯾﺔ‬
: ‫أﺣد اﻟزرﯾن اﻟﺳﺎﺑﻘﯾن ﻛﻣﺎ ﻓﻲ اﻟﻛود اﻟﺗﺎﻟﻲ‬

ASP.net ‫ﻛود‬
<form id="form1" runat="server" defaultbutton="Button2">
<div>
<asp:Button ID="Button1" runat="server" Text="Button"
onclick="Button1_Click" />
<br />
<asp:Button ID="Button2" runat="server" Text="Button"
onclick="Button2_Click" />
<br />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>
</form>

‫ أﻋد‬,‫ ﻟﺗرى ﻣﺎﯾﺣدث‬Enter ‫ ﻧﻔذ اﻟﺻﻔﺣﺔ واﺿﻐط ﻋﻠﻰ‬, ‫ ﻛزر اﻓﺗراﺿﻲ‬Button2 ‫ﺣﯾث ﺗم ﺗﺣدﯾد‬
. Button1 ‫ﺗﻧﻔﯾذ اﻟﻣﺛﺎل ﺑﻌد ﺗﻌدﯾل اﻟﺧﺎﺻﯾﺔ اﻟﺳﺎﺑﻘﺔ وﺟﻌﻠﮭﺎ ﺗﺳﺎوي اﻟﻘﯾﻣﺔ‬

‫ﻣﻼﺣظﺔ‬

‫ ﺳﻧﺗﻌرف ﻋﻠﻰ ھذه اﻷداة‬, Panel ‫ ﻣﻊ أداة اﻟﺗﺣﻛم‬defaultButton ‫ﯾﻣﻛن اﺳﺗﺧدام اﻟﺧﺎﺻﯾﺔ‬
. ‫ﺑﺎﻟﺗﻔﺻﯾل ﻓﻲ ﻓﻘرات ﻗﺎدﻣﺔ ﺿﻣن ھذا اﻟﻔﺻل‬

- 18 -
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

Command ‫ﻣﻌﺎﻟﺟﺔ اﻟﺣدث‬

,ً ‫ ﻛﻣﺎ رأﯾﻧﺎ ﺳﺎﺑﻘﺎ‬Click , Command ‫ ﺑﺄﻧواﻋﮭم اﻟﺛﻼﺛﺔ ﯾدﻋﻣون اﻟﺣدﺛﯾن‬Buttons ‫أدوات اﻟﺗﺣﻛم‬
‫ ﻓﺑﺈﻣﻛﺎﻧﻧﺎ ﺗﻣرﯾر اﺳم أﻣر ﻣﺎ وﺑﺎراﻣﺗر‬Command ‫اﻟﻔرق ﺑﯾن ھذﯾن اﻟﺣدﺛﯾن ھو أﻧﮫ ﻋﻧد اﻟﻌﻣل ﻣﻊ‬
. Click ‫ وھذه اﻷﻣور ﻏﯾر ﻣدﻋوﻣﺔ ﻣﻊ اﻟﺣدث‬Command name,argument ً ‫ﻟﻸﻣر أﯾﺿﺎ‬

‫ أﺿف‬, ‫ واﺣدة‬Label ‫ وأداة‬Button ‫ أﺿف ﻋﻠﯾﮭﺎ أداﺗﻲ‬, ‫ أﻧﺷﺊ ﺻﻔﺣﺔ ﺟدﯾدة‬: ‫ﻣﺛﺎل ﺗوﺿﯾﺣﻲ‬
onCommand, CommandName , CommandArgument ‫ اﻟﺧﺻﺎﺋص‬Button ‫ﻟﻸداﺗﯾن‬
: ‫وﻓق اﻟﺗﺎﻟﻲ‬

‫اﻟﻘﯾﻣﺔ‬ ‫اﻟﺧﺎﺻﯾﺔ‬
Button1 ‫اﻷداة‬
Button_Command onCommand
Colors CommandName
Red CommandArgument
Button2 ‫اﻷداة‬
Button_Command onCommand
Colors CommandName
Blue CommandArgument

: ‫وﺑﺎﻟﺗﺎﻟﻲ ﯾﺻﺑﺢ ﻛود اﻟﺻﻔﺣﺔ‬

ASP.net ‫ﻛود‬
<div>
<asp:Button ID="Button1" runat="server" Text="Red"
oncommand="Button_Command"
CommandName="colors"
CommandArgument="Red" />
<asp:Button ID="Button2" runat="server" Text="Blue"
oncommand="Button_Command"
CommandName="colors"
CommandArgument="Blue" />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>

: ‫ وﻧﻛﺗب ﻓﯾﮫ اﻟﻛود اﻟﺗﺎﻟﻲ‬Default.aspx.cs ‫ﻧﻔﺗﺢ ﻣﻠف اﻟﻛود اﻟﺧﻠﻔﻲ‬

C# ‫ﻛود‬
protected void Button_Command(object sender, CommandEventArgs e)

- 19 -
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫{‬
‫)"‪if (e.CommandName == "colors‬‬
‫{‬
‫))(‪switch (e.CommandArgument.ToString‬‬
‫{‬
‫‪case "Red":‬‬
‫;"‪Label1.Text = "RED‬‬
‫;‪break‬‬
‫‪case "Blue":‬‬
‫;"‪Label1.Text = "BLUE‬‬
‫;‪break‬‬
‫}‬
‫}‬
‫}‬

‫ﻛود ‪VB‬‬
‫‪Protected Sub Button_Command(ByVal sender As Object, ByVal e As‬‬
‫)‪CommandEventArgs‬‬

‫‪If e.CommandName = "colors" Then‬‬

‫)(‪Select Case e.CommandArgument.ToString‬‬
‫"‪Case "Red‬‬
‫"‪Label1.Text = "RED‬‬
‫‪Exit Select‬‬
‫"‪Case "Blue‬‬
‫"‪Label1.Text = "BLUE‬‬
‫‪Exit Select‬‬
‫‪End Select‬‬
‫‪End If‬‬
‫‪End Sub‬‬

‫ﻻﺣظ أن ﻛﻼ اﻟزرﯾن ﯾﻘوم ﺑﺎﺳﺗدﻋﺎء ﻧﻔس اﻟﻛود ‪ Button_Commaen‬ﻣﻊ ﺗﺣدﯾد‬

‫‪ CommandName‬ﻟﻠﻘﯾﻣﺔ ‪ colors‬واﻹﺧﺗﻼف اﻟوﺣﯾد ﺑﯾﻧﮭﻣﺎ ھو ﺑﺎﻟﺑﺎراﻣﺗر اﻟﻣرر ﺣﯾث إن اﻟزر‬
‫اﻷول ﯾرﺳل اﻟﺑﺎراﻣﺗر ‪ Red‬ﻓﻲ ﺣﯾن أن اﻟزر اﻟﺛﺎﻧﻲ ﯾرﺳل اﻟﺑﺎراﻣﺗر ‪ , Blue‬ﻧﻔذ اﻟﺻﻔﺣﺔ ﻟﺗرى‬
‫ﻧﺗﯾﺟﺔ اﻟﻌﻣل ‪ ,‬إن اﻟﻌﻣل ﻣﻊ اﻟﺣدث ‪ Command‬ﻓﻌﺎل ﻋﻧدﻣﺎ ﺗؤدي ﻣﺟﻣوﻋﺔ ﻣن اﻷزرار ﻧﻔس‬
‫اﻟﻛود وﻟﻛن ﺑﺑﺎراﻣﺗرات ﻣﺧﺗﻠﻔﺔ ﺣﯾث ﯾوﻓر ﻋﻠﯾﻧﺎ ﻋﻧﺎء إﻋﺎدة ﻛﺗﺎﺑﺔ اﻟﻛود ﻟو ﺗم اﺳﺗﺧدام اﻟﺣدث ‪Click‬‬

‫ﻋرض اﻟﺻور‬

‫ﻣﻧﺻﺔ ﻋﻣل ‪ ASP.Net‬ﺗﻘدم أداﺗﯾن ﻟﻌرض اﻟﺻور ‪ Image , ImageMap‬ﺗﻘوم أداة اﻟﺗﺣﻛم‬
‫‪ Image‬ﺑﻌرض اﻟﺻور ﺑﺄﺳﻠوب ﺑﺳﯾط ‪ ,‬ﻓﻲ ﺣﯾن أن اﻷداة ‪ ImageMap‬ﺗﻘدم ﻣزاﯾﺎ أﻛﺛر ﺗﻌﻘﯾدا ‪,‬‬
‫ﺳﻧﺗﻌرف ﻋﻠﻰ ﻛﻼ اﻷداﺗﯾن ﻓﻲ اﻟﻔﻘرات اﻟﺗﺎﻟﯾﺔ ‪.‬‬

‫‪- 20 -‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫اﺳﺗﺧدام أداة اﻟﺗﺣﻛم ‪Image‬‬

‫ﺗﺳﺗﺧدم أداة اﻟﺗﺣﻛم ‪ Image‬ﻟﻌرض ﺻورة ﻣﺣددة ﻋﺑر اﻟﺧﺎﺻﯾﺔ ‪ , ImageUrl‬ﺳﻧﺗﻌرف ﻋﻠﻰ‬
‫ﺑﻌض ﺑﻌض ﺧﺻﺎﺋص ھذه اﻷداة ﺛم ﻧطﺑق ﻣﺛﺎل ﻋﻠﯾﮭﺎ ‪.‬‬

‫ﺧﺻﺎﺋص أداة اﻟﺗﺣﻛم ‪: Image‬‬

‫‪ : AlternateText‬ﻧص ﺑدﯾل ﯾﺗم ﻋرﺿﮫ ﻓﻲ ﺣﺎل ﻋدم ﻋرض اﻟﺻورة اﻟﻣﺣددة‬ ‫‪‬‬
‫‪ : DescriptionUrl‬ﻟﺗﺣدﯾد راﺑط إﻟﻰ ﺻﻔﺣﺔ ﺗﺣﺗوي ﺗﻔﺎﺻﯾل ﻋن اﻟﺻورة‬ ‫‪‬‬
‫‪ : GenerateEmptyAlternateText‬إﺳﻧﺎد ﺳﻠﺳﻠﺔ ﻓﺎرﻏﺔ ﻛﻧص ﺑدﯾل ﻟﻠﺻورة‬ ‫‪‬‬
‫‪ : ImageAlign‬ﺗﺣدﯾد ﻣوﻗﻊ اﻟﺻورة ﺑﺎﻟﻧﺳﺑﺔ ﻷدوات ‪ html‬أﺧرى وﯾﻣﻛن أن ﺗﺄﺧذ‬ ‫‪‬‬
‫إﺣدى اﻟﻘﯾم اﻟﺗﺎﻟﯾﺔ ‪AbsBottom, AbsMiddle, Baseline, Bottom, Left, :‬‬
‫‪. Middle,NotSet, Right, TextTop, Top‬‬
‫‪ : ImageUrl‬ﻟﺗﺣدﯾد ﻣﺳﺎر واﺳم اﻟﺻورة اﻟﺗﻲ ﺳﯾﺗم ﻋرﺿﮭﺎ ‪.‬‬ ‫‪‬‬

‫ﻣﺛﺎل ‪ :‬ﺳﻧﻘوم ﻓﻲ اﻟﻣﺛﺎل اﻟﺗﺎﻟﻲ ﺑﺟﻌل أداة ‪ Image‬ﺗﻘوم ﺑﻌرض واﺣدة ﻣن ﺛﻼث ﺻور وﺑﺷﻛل‬
‫ﻋﺷواﺋﻲ ‪ ,‬أﻧﺷﺊ ﺻﻔﺣﺔ ﺟدﯾدة وأﺿف ﻋﻠﯾﮭﺎ أداة ‪ , Image‬أﻧﺷﺊ ﺿﻣن اﻟﻣﺷروع ﻣﺟﻠد ﺟدﯾد ﺑﺎﺳم‬
‫‪ images‬أﺿف ﻋﻠﯾﮫ ﺛﻼث ﺻور وﻟﺗﻛن أﺳﻣﺎؤھﺎ ‪ pic1 , pic2 , pic3‬اﻓﺗﺢ ﻣﻠف اﻟﻛود اﻟﺧﻠﻔﻲ أي‬
‫اﻟﺻﻔﺣﺔ ‪ Default.aspx.cs‬وﻓﻲ ﺣدث ﺗﺣﻣﯾل اﻟﺻﻔﺣﺔ )‪ (Page_Load‬اﻛﺗب اﻟﻛود اﻟﺗﺎﻟﻲ ‪:‬‬

‫ﻛود ‪C#‬‬
‫)‪protected void Page_Load(object sender, EventArgs e‬‬
‫{‬
‫;)(‪Random rnd = new Random‬‬
‫))‪switch (rnd.Next(3‬‬
‫{‬
‫‪case 0:‬‬
‫;"‪Image1.ImageUrl = "~/images/pic1.png‬‬
‫;"‪Image1.AlternateText = "picture1‬‬
‫;‪break‬‬
‫‪case 1:‬‬
‫;"‪Image1.ImageUrl = "~/images/pic2.png‬‬
‫;"‪Image1.AlternateText = "picture2‬‬
‫;‪break‬‬
‫‪case 2:‬‬
‫;"‪Image1.ImageUrl = "~/images/pic3.png‬‬
‫;"‪Image1.AlternateText = "picture3‬‬
‫;‪break‬‬
‫}‬
‫}‬

‫‪- 21 -‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫ﻛود ‪VB‬‬
‫)‪Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs‬‬
‫‪Handles Me.Load‬‬

‫)(‪Dim rnd As New Random‬‬

‫)‪Select Case rnd.[Next](3‬‬
‫‪Case 0‬‬
‫"‪Image1.ImageUrl = "~/images/pic1.bmp‬‬
‫"‪Image1.AlternateText = "picture1‬‬
‫‪Exit Select‬‬
‫‪Case 1‬‬
‫"‪Image1.ImageUrl = "~/images/pic2.jpg‬‬
‫"‪Image1.AlternateText = "picture2‬‬
‫‪Exit Select‬‬
‫‪Case 2‬‬
‫"‪Image1.ImageUrl = "~/images/pic3.bmp‬‬
‫"‪Image1.AlternateText = "picture3‬‬
‫‪Exit Select‬‬
‫‪End Select‬‬
‫‪End Sub‬‬

‫ﻧﻔذ اﻟﺻﻔﺣﺔ اﻟﺳﺎﺑﻘﺔ ﻟﯾﺗم ﻋرض إﺣدى اﻟﺻور اﻟﺛﻼث ‪ ,‬اﺿﻐط ﻋﻠﻰ زر ﺗﺣدﯾث اﻟﺻﻔﺣﺔ )أو ‪( F5‬‬
‫ﻟﯾﺗم ﻋرض ﺻورة أﺧرى وﺑﺷﻛل ﻋﺷواﺋﻲ ‪ .‬ﻣﻣﺎﺳﺑق ﻧﻼﺣظ ﻣدى ﺑﺳﺎطﺔ اﻟﺗﻌﺎﻣل ﻣﻊ أداة اﻟﺗﺣﻛم‬
‫‪ , Image‬ﻓﻲ اﻟﻔﻘرة اﻟﺗﺎﻟﯾﺔ ﺳﻧﺗﻌرف ﻋﻠﻰ أداة ﺗﺳﺗﺧدم أﯾﺿﺎ ً ﻟﻌرض اﻟﺻور وﻟﻛن ﺑﺧﯾﺎرات وﻣزاﯾﺎ‬
‫أﻛﺛر ﺗﻧوﻋﺎ ً ‪.‬‬

‫اﺳﺗﺧدام أداة اﻟﺗﺣﻛم ‪ImageMap‬‬

‫ﺗﺳﺗﺧدم ھذه اﻷداة ﻟﻌرض ﺻورة ﻣﺎ ﺑﺎﻹﺿﺎﻓﺔ ﻟرﺑطﮭﺎ ﻣﻊ ﺧرﯾطﺔ ﻏﯾر ﻣرﺋﯾﺔ ‪ ,‬ﺑﻣﻌﻧﻰ آﺧر ﻋﻧد ﻧﻘر‬
‫اﻟﻣﺳﺗﺧدم ﻋﻠﻰ أﺟزاء ﻣﺧﺗﻠﻔﺔ ﻣن اﻟﺻورة ﻓﺑﺈﻣﻛﺎﻧﻧﺎ اﻻﺳﺗﺟﺎﺑﺔ ﺑردود ﻓﻌل ﻣﺧﺗﻠﻔﺔ أﯾﺿﺎ ً ﺑﺣﺳب‬
‫إﺣداﺛﯾﺎت ﻣوﻗﻊ اﻟﻧﻘر ﻋﻠﻰ اﻟﺻورة ‪ ,‬وﻋﻠﻰ ھذا اﻷﺳﺎس ﻓﺑﺈﻣﻛﺎﻧﻧﺎ اﺳﺗﺧدام ھذه اﻷداة ﻛوﺳﯾﻠﺔ ﻟﻠﺗﻧﻘل‬
‫ﺑﯾن اﻟﺻﻔﺣﺎت ﻣﺛﻼ ً ‪ ,‬ﺣﯾث ﻧﻘوم ﺑﻌرض ﺻورة ﺗﺣﺗوي ﻋﻠﻰ رﺳوﻣﺎت ﻣﻌﺑرة ﻋن ﺻﻔﺣﺎت ﺗﺎﻟﯾﺔ ﺛم‬
‫ﻧﺣدد ﻋﻧد اﻟﻧﻘر ﻋﻠﻰ ﻣوﻗﻊ ﻣﺎ ﻣن ھذه اﻟﺻورة اﻟﺻﻔﺣﺔ اﻟﺗﻲ ﺳﯾﺗم اﻹﻧﺗﻘﺎل ﻟﮭﺎ ‪ ,‬اﺳﺗﺧدام آﺧر ﻟﮭذه‬
‫اﻷداة ھو ﺗﺣدﯾد دﺧل اﻟﻣﺳﺗﺧدم ﺣﯾث ﺑﺈﻣﻛﺎﻧﻧﺎ ﻋرض ﺻورة ﺗﺣﺗوي ﻋﻠﻰ ﻣﻧﺗﺟﺎت ﻋدﯾدة وﯾﻛون‬
‫ﺧﯾﺎر اﻟﻣﺳﺗﺧدم ﺑﺣﺳب اﻟﻣﻧﺗﺞ اﻟذي ﺗم اﻟﺿﻐط ﻋﻠﯾﮫ ﻋﻠﻰ اﻟﺻورة ‪.‬‬

‫أداة اﻟﺗﺣﻛم ‪ ImageMap‬ﺗرﺗﺑط ﺗﻠﻘﺎﺋﯾﺎ ﻣﻊ ﺻف ‪ HotSpot class‬واﻟذي ﯾﺳﻣﺢ ﺑﺗﺣدﯾد ﻣﻧﺎطق‬

‫ﻗﺎﺑﻠﺔ ﻟﻠﻧﻘر ﻋﻠﻰ اﻷداة ‪ , ImageMap‬ﻣﻧﺻﺔ اﻟﻌﻣل ‪ ASP.Net‬ﺗﻘدم ﺛﻼﺛﺔ ﺻﻔوف ﻣن اﻟﻧﻣط‬
‫‪ HotSpot‬ﺑﺈﻣﻛﺎﻧﻧﺎ اﻟﺗﻌﺎﻣل ﻣﻌﮭﺎ وھﻲ ‪:‬‬

‫‪ : CircleHotSpot ‬ﺗﻣﻛﻧﻧﺎ ﻣن ﺗﺣدﯾد ﻣﻧطﻘﺔ داﺋرﯾﺔ ﻋﻠﻰ ﺧرﯾطﺔ اﻟﺻورة‬

‫‪ : PolygonHotSpot ‬ﺗﻣﻛﻧﻧﺎ ﻣن ﺗﺣدﯾد ﺷﻛل ﻏﯾر ﻣﻧﺗظم ﻋﻠﻰ ﺧرﯾطﺔ اﻟﺻورة‬

‫‪- 22 -‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫‪ : RectangleHotSpot ‬ﺗﻣﻛﻧﻧﺎ ﻣن ﺗﺣدﯾد ﻣﻧطﻘﺔ ﻣﺳﺗطﯾﻠﺔ ﻋﻠﻰ ﺧرﯾطﺔ اﻟﺻورة‬

‫ﺧﺻﺎﺋص أداة اﻟﺗﺣﻛم ‪: ImageMap‬‬

‫‪ : AccessKey‬ﻟﺗﺣدﯾد ﻣﻔﺗﺎح ﻣن ﻟوﺣﺔ اﻟﻣﻔﺎﺗﯾﺢ ﻋﻧد اﻟﺿﻐط ﻋﻠﯾﮫ ﯾﺗم ﻧﻘل اﻟﺗرﻛﯾز ﻟﮭذه‬ ‫‪‬‬
‫اﻷداة‬
‫‪ : AlternateText‬ﻧص ﺑدﯾل ﯾﺗم ﻋرﺿﮫ ﻓﻲ ﺣﺎل ﻋدم ﻋرض اﻟﺻورة اﻟﻣﺣددة‬ ‫‪‬‬
‫‪ : DescriptionUrl‬ﻟﺗﺣدﯾد راﺑط إﻟﻰ ﺻﻔﺣﺔ ﺗﺣﺗوي ﺗﻔﺎﺻﯾل ﻋن اﻟﺻورة‬ ‫‪‬‬
‫‪ : GenerateEmptyAlternateText‬إﺳﻧﺎد ﺳﻠﺳﻠﺔ ﻓﺎرﻏﺔ ﻛﻧص ﺑدﯾل ﻟﻠﺻورة‬ ‫‪‬‬
‫‪ : HotSpotMode‬ﺗﺣدﯾد اﻟﺳﻠوك اﻟذي ﺳﯾﺗم ﺗﻧﻔﯾذه ﻋﻧد اﻟﺿﻐط ﻋﻠﻰ ﻣﻧطﻘﺔ ﻣن اﻟﺻورة‬ ‫‪‬‬
‫وﺗﺄﺧذ إﺣدى اﻟﻘﯾم اﻟﺗﺎﻟﯾﺔ ‪Inactive, Navigate, NotSet, PostBack :‬‬
‫‪ : HotSpots‬ﺗﻛﻣﻧﻧﺎ ﻣن اﻟﺣﺻول ﻋﻠﻰ ﺟﻣﯾﻊ اﻟﻧﻘﺎط اﻟﺳﺎﺧﻧﺔ ) ‪ ( HotSpots‬اﻟﻣوﺟودة‬ ‫‪‬‬
‫ﺿﻣن أداة اﻟﺗﺣﻛم ‪ImageMap‬‬
‫‪ : ImageAlign‬ﺗﺣدﯾد ﻣوﻗﻊ اﻟﺻورة ﺑﺎﻟﻧﺳﺑﺔ ﻷدوات ‪ html‬أﺧرى وﯾﻣﻛن أن ﺗﺄﺧذ إﺣدى‬ ‫‪‬‬
‫‪AbsBottom, AbsMiddle, Baseline, Bottom, Left,‬‬ ‫اﻟﻘﯾم اﻟﺗﺎﻟﯾﺔ ‪:‬‬
‫‪. Middle,NotSet, Right, TextTop, Top‬‬
‫‪ : ImageUrl‬ﻟﺗﺣدﯾد ﻣﺳﺎر واﺳم اﻟﺻورة اﻟﺗﻲ ﺳﯾﺗم ﻋرﺿﮭﺎ ‪.‬‬ ‫‪‬‬
‫‪ : TabIndex‬ﺗﺣدﯾد رﻗم ﯾدل ﻋﻠﻰ ﺗرﺗﯾب اﻟوﺻول ﻟﮭذه اﻷداة ﻋﺑر ﻣﻔﺗﺎح ‪. Tab‬‬ ‫‪‬‬
‫‪ : Target‬ﺗﺳﻣﺢ ﻟﻧﺎ ﺑﻔﺗﺢ اﻟﺻﻔﺣﺔ ﻓﻲ ﻧﺎﻓذة ﺟدﯾدة ‪.‬‬ ‫‪‬‬

‫أداة اﻟﺗﺣﻛم ‪ ImageMap‬ﺗدﻋم اﻟطرﯾﻘﺔ ‪ Focus‬اﻟﺗﻲ ﺗﺳﻣﺢ ﺑوﺿﻊ اﻟﺗرﻛﯾز ﻋﻠﯾﮭﺎ ﻋﻧد اﻟﺗﻧﻔﯾذ ‪ ,‬ﻛﻣﺎ‬
‫أﻧﮭﺎ ﺗدﻋم اﻟﺣدث ‪ Click‬واﻟذي ﯾﺗم إطﻼﻗﮫ ﻋﻧد اﻟﺿﻐط ﻋﻠﻰ ﻣﻧطﻘﺔ ﻣن ھذه اﻷداة وﻛﺎﻧت اﻟﺧﺎﺻﯾﺔ‬
‫‪ HotSpotMode‬ﺗﺄﺧذ اﻟﻘﯾﻣﺔ ‪.PostBack‬‬

‫ﻣﺛﺎل ‪ :‬ﺳﻧﻘوم ﻓﻲ اﻟﻣﺛﺎل ﺑﻌرض ﻛﯾﻔﯾﺔ اﺳﺗﺧدام أﺣد ﺟواﻧب أداة اﻟﺗﺣﻛم ‪ , ImageMap‬ﺣﯾث ﺳﻧﻘوم‬
‫ﺑﺈﻧﺷﺎء ﻗﺎﺋﻣﺔ ﻟﻠﺗﻧﻘل ﺑﯾن ﺻﻔﺣﺎت ﻣﺧﺗﻠﻔﺔ ‪ ,‬أﻧﺷﺊ ﻣﺷروع ﺟدﯾد وأﺿف أرﺑﻊ ﺻﻔﺣﺎت وﻟﺗﻛن أﺳﻣﺎؤھﺎ‬
‫‪ , Dafault , page1 , page2 , page3‬أﺿف ﻋﻠﻰ اﻟﺻﻔﺣﺔ ‪ Default‬أداة ‪ImageMap‬‬
‫واﺟﻌﻠﮭﺎ ﺗﻌرض ﺻورة ﻣﻧﺎﺳﺑﺔ ﻟﻠﻐرض اﻟﺳﺎﺑق ‪ ,‬وﻟﺗﻛن ﻛﺎﻟﺗﺎﻟﻲ ‪:‬‬

‫ﺣﯾث ﺳﻧﻘوم ﺑﺗﻘﺳﯾم أداة اﻟﺻورة اﻟﺳﺎﺑﻘﺔ إﻟﻰ ﺛﻼث ﻣﻧﺎطق وﻛل ﻣﻧطﻘﺔ ﺗﻧﻘﻠﻧﺎ إﻟﻰ ﺻﻔﺣﺔ ﻣﺣددة‬

‫ﻛود ﺻﻔﺣﺔ ‪: Default.aspx‬‬

‫‪- 23 -‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫ﻛود ‪ASP.net‬‬
‫>‪<div‬‬
‫"‪<asp:ImageMap ID="ImageMap1" runat="server‬‬
‫>"‪ImageUrl="~/images/navigationBar.jpg‬‬

‫"‪<asp:RectangleHotSpot NavigateUrl="~/page1.aspx" Left="0" Top="0‬‬

‫>‪Right="100" Bottom="30" AlternateText="go to page1" /‬‬

‫"‪<asp:RectangleHotSpot NavigateUrl="~/page2.aspx" Left="100" Top="0‬‬

‫>‪Right="200" Bottom="30" AlternateText="go to page2" /‬‬

‫"‪<asp:RectangleHotSpot NavigateUrl="~/page3.aspx" Left="200" Top="0‬‬

‫>‪Right="300" Bottom="30" AlternateText="go to page3" /‬‬

‫>‪</asp:ImageMap‬‬
‫>‪</div‬‬

‫ﻧﻼﺣظ ﻣن اﻟﻛود اﻟﺳﺎﺑق أن ﻟﻠﺧﺎﺻﯾﺔ ‪ RectangleHotSpot‬اﻟﺧﺻﺎﺋص اﻟﻔرﻋﯾﺔ ‪Left , Right ,‬‬

‫‪ Top , Bottom‬ﻟﻧﺣدد إﺣداﺛﯾﺎت اﻟﻣﻧطﻘﺔ ) ﺣﺟم اﻟﺻورة ﻓﻲ اﻟﻣﺛﺎل ‪ . ( 300 X 30‬وﻛل ﻣﻧطﻘﺔ ﺗم‬
‫رﺑطﮭﺎ ﺑﺻﻔﺣﺔ ﻣﻌﯾﻧﺔ ﻋﺑر اﻟﺧﺎﺻﯾﺔ ‪ NavigateUrl‬ﻟﯾﺗم ﻧﻘل اﻟﻣﺗﺻﻔﺢ إﻟﯾﮭﺎ ﻋﻧد اﻟﻧﻘر ﻋﻠﻰ ﺗﻠك‬
‫اﻟﻣﻧطﻘﺔ ‪.‬‬

‫ﻣﺛﺎل آﺧر ‪ :‬ﺑﻌد أن ﺗﻌرﻓﻧﺎ ﻋﻠﻰ ﻛﯾﻔﯾﺔ اﺳﺗﺧدام اﻷداة ‪ ImageMap‬ﻟﻠﺗﻧﻘل ﺑﯾن اﻟﺻﻔﺣﺎت اﻟﻣﺧﺗﻠﻔﺔ ‪,‬‬
‫ﺳﻧﻌرض ھﻧﺎ آﻟﯾﺔ اﻟﻌﻣل ﻣﻊ ‪ PostBack‬أي اﻟﺑﻘﺎء ﺿﻣن ﻧﻔس اﻟﺻﻔﺣﺔ ‪ ,‬أﺿف ﺻﻔﺣﺔ ﺟدﯾدة‬
‫وأﺿف ﻋﻠﯾﮭﺎ ‪ , TextBox , ImageMap‬اﻟﺻورة اﻟﻣطﻠوﺑﺔ ﻟﯾﺗم ﻋرﺿﮭﺎ ﺷﺑﯾﮭﺔ ﺑﺎﻟﺗﺎﻟﻲ ‪:‬‬

‫اﻟﻣطﻠوب ﺗﻧﻔﯾذه ھو أﻧﮫ ﻋﻧد اﻟﺿﻐط اﻟﻣﻧطﻘﺔ اﻷوﻟﻰ )‪ ( ToUpper‬ﯾﺗم ﺗﺣوﯾل اﻟﻧص اﻟﻣﻛﺗوب ﻓﻲ‬
‫أداة‪ TextBox‬إﻟﻰ ﺣﺎﻟﺔ أﺣرف ﻛﺑﯾرة ‪ ,‬وﻋﻧد اﻟﺿﻐط اﻟﻣﻧطﻘﺔ اﻟﺛﺎﻧﯾﺔ )‪ ( ToLower‬ﯾﺗم ﺗﺣوﯾل‬
‫اﻟﻧص اﻟﻣﻛﺗوب ﻓﻲ أداة ‪ TextBox‬إﻟﻰ ﺣﺎﻟﺔ أﺣرف ﺻﻐﯾرة ‪ ,‬وﯾؤدي اﻟﺿﻐط ﻋﻠﻰ اﻟﻣﻧطﻘﺔ اﻟﺛﺎﻟﺛﺔ‬
‫إﻟﻰ ﻣﺳﺢ ) ‪ ( Erase‬اﻟﻧص اﻟﻣوﺟدود ﻓﻲ اﻷداة ‪ , TextBox‬اﻧﻘر ﻋﻠﻰ اﻷداة ‪ ImageMap‬ﻣرﺗﯾن‬
‫وأﺿف اﻟﻛود اﻟﺗﺎﻟﻲ ‪:‬‬

‫ﻛود ‪C#‬‬
‫)‪protected void ImageMap1_Click(object sender, ImageMapEventArgs e‬‬
‫{‬
‫)‪switch (e.PostBackValue‬‬

‫‪- 24 -‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

{
case "ToUpper":
TextBox1.Text = TextBox1.Text.ToUpper();
break;
case "ToLower":
TextBox1.Text = TextBox1.Text.ToLower();
break;
case "Erase":
TextBox1.Text = String.Empty;
break;
}
}

VB ‫ﻛود‬
Select Case e.PostBackValue
Case "ToUpper"
TextBox1.Text = TextBox1.Text.ToUpper()
Exit Select
Case "ToLower"
TextBox1.Text = TextBox1.Text.ToLower()
Exit Select
Case "Erase"
TextBox1.Text = [String].Empty
Exit Select
End Select

‫ واﻟﺗﻲ ﯾﺗم ﺗﺣدﯾد ﻗﯾﻣﺗﮭﺎ ﺑﺣﺳب اﻟﻣﻧطﻘﺔ اﻟﺗﻲ‬PostBackVlaue ‫ﻓﻲ اﻟﻛود اﻟﺳﺎﺑق اﺳﺗﻘﺑﻠﻧﺎ اﻟﺧﺎﺻﯾﺔ‬
: ‫ ﻛود اﻟﺻﻔﺣﺔ‬, ‫ ﻛﻣﺎ ﺳﻧرى‬ImageMap ‫ﯾﺗم اﻟﺿﻐط ﻋﻠﯾﮭﺎ ﻓﻲ اﻷداة‬

ASP.net ‫ﻛود‬
<div>

<asp:ImageMap ID="ImageMap1" runat="server" HotSpotMode="PostBack"

ImageUrl="~/images/textCase.jpg" onclick="ImageMap1_Click">

<asp:RectangleHotSpot PostBackValue="ToUpper" Left="0" Top="0" Right="100"

Bottom="30" AlternateText="ToUpper" />

<asp:RectangleHotSpot PostBackValue="ToLower" Left="100" Top="0"

Right="200" Bottom="30" AlternateText="ToLower" />

<asp:RectangleHotSpot PostBackValue="Erase" Left="200" Top="0" Right="300"

Bottom="30" AlternateText="Erase" />
</asp:ImageMap>

<br />

<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" />

- 25 -
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫>‪</div‬‬

‫ﻧﻼﺣظ ﻓﻲ اﻟﻛود اﻟﺳﺎﺑق ﺗﺣدﯾد اﻟﺧﺎﺻﯾﺔ ‪ HotSpotMode‬إﻟﻰ اﻟﻘﯾﻣﺔ ‪ , PostBack‬وﻓﻲ ﻛل ﻣﻧطﻘﺔ‬

‫ﺳﺎﺧﻧﺔ ﺗم ﺗﺣدﯾد ﻗﯾﻣﺔ ﻣﺧﺗﻠﻔﺔ ﻟﻠﺧﺎﺻﯾﺔ ‪ PostBackValue‬ﻟﺗﻣﯾﯾز اﻟﻣﻧطﻘﺔ اﻟﺗﻲ ﺗم اﻟﻧﻘر ﻋﻠﯾﮭﺎ ‪.‬‬

‫اﺳﺗﺧدام أداة اﻟﺗﺣﻛم ‪Panel‬‬

‫ﺗﻣﻛﻧﻧﺎ ھذه اﻷداة ﻣن اﻟﺗﻌﺎﻣل ﻣﻊ ﻣﺟﻣوﻋﺔ أدوات ‪ ASP.Net‬دﻓﻌﺔ واﺣدة ‪ ,‬ﺣﯾث ﯾﺗم ﺗطﺑﯾق ﺳﻠوك ﻣﺎ‬
‫ﻋﻠﻰ ﺟﻣﯾﻊ أدوات اﻟﺗﺣﻛم اﻟﻣوﺟودة ﺿﻣن أداة ‪ , Panel‬ﻋﻠﻰ ﺳﺑﯾل اﻟﻣﺛﺎل ﻟو ﺗم إﺧﻔﺎء أداة اﻟﺗﺣﻛم‬
‫ھذه ﻓﺳﯾﺧﺗﻔﻲ ﻣﻌﮭﺎ ﺟﻣﯾﻊ اﻷدوات اﻟﻣﺣﺗوات ﺿﻣﻧﮭﺎ وﻛذﻟك ﻟو ﺗم إﻟﻐﺎء ﺗﻔﻌﯾل أداة ‪ Panel‬ﻓﺳﯾﺗم‬
‫إﻟﻐﺎء ﺗﻔﻌﯾل ﺟﻣﯾﻊ أدوات اﻟﺗﺣﻛم اﻟﻣوﺟودة ﺿﻣﻧﮭﺎ وھﻛذا ‪...‬‬

‫ﺧﺻﺎﺋص أداة اﻟﺗﺣﻛم ‪: Panel‬‬

‫‪ : DefaultButton‬ﺗﻣﻛﻧﻧﺎ ھذه اﻟﺧﺎﺻﯾﺔ ﻣن ﺗﺣدﯾد زر اﻓﺗراﺿﻲ ﺿﻣن اﻷداة ‪Panel‬‬ ‫‪‬‬

‫ﺑﯾﺣث ﯾﺗم ﺗﻧﻔﯾذ اﻟﻛود داﺧﻠﮫ ﺑﻣﺟرد اﻟﺿﻐط ﻋﻠﻰ ﻣﻔﺗﺎح ‪ Enter‬ﻣن ﻟوﺣﺔ اﻟﻣﻔﺎﺗﯾﺢ ‪.‬‬
‫‪ : Direction‬ﺗﺣدﯾد اﺗﺟﺎه اﻟﻧص واﻷدوات ﺿﻣن ‪ Panel‬ﯾﻣﻛن أن ﺗﺄﺧذ إﺣدى اﻟﻘﯾم اﻟﺗﺎﻟﯾﺔ‬ ‫‪‬‬
‫‪NotSet , LeftToRight , RightToLeft‬‬
‫‪ : GroupingText‬ﺗﺣدﯾد ﻋﻧوان ﻷداة ‪Panel‬‬ ‫‪‬‬
‫‪ : HorizontalAlign‬ﺗﺣدﯾد اﻟﻣﺣﺎذاة اﻷﻓﻘﯾﺔ ﻟﻣﺣﺗوﯾﺎت أداة ‪ Panel‬وﯾﻣﻛن أن ﺗﺄﺧذ إﺣدى‬ ‫‪‬‬
‫اﻟﻘﯾم اﻟﺗﺎﻟﯾﺔ ‪NotSet , Justify , Left , Center , Right‬‬
‫‪ : ScrollBars‬ﺗﻣﻛﻧﻧﺎ ﻣن إظﮭﺎر ﺷرﯾط ﺗﻣرﯾر أﻓﻘﻲ أو ﻋﻣودي ) أو ﻛﻼھﻣﺎ ( ﻷداة ‪Panel‬‬ ‫‪‬‬
‫وﺗﺄﺧذ إﺣدى اﻟﻘﯾم اﻟﺗﺎﻟﯾﺔ ‪None , Horizontal , Vertical , Both , Auto‬‬

‫ﻣﺛﺎل ‪ :‬ﺳﻧﻘوم ﻓﻲ اﻟﺗطﺑﯾق اﻟﺗﺎﻟﻲ ﺑﺈﺿﺎﻓﺔ ‪ Panel‬وﻣن ﺛم ﻧﺿف إﻟﯾﮭﺎ ﻣﺟﻣوﻋﺔ ﻣن أدوات اﻟﺗﺣﻛم‬
‫اﻟﻣﺧﺗﻠﻔﺔ ﻟﻧرى أن ﺗطﺑﯾق أﻣر ﻣﺎ ﻋﻠﻰ ‪ Panel‬ﺳﯾﺗم ﺗطﺑﯾﻘﮫ ﻋﻠﻰ اﻷدوات داﺧﻠﮭﺎ أﯾﺿﺎ ً ‪ ,‬أﻧﺷﺊ‬
‫ﺻﻔﺣﺔ ﺟدﯾدة ‪ ,‬أﺿف أداة ﺗﺣﻛم ‪ Panel‬وﺿﻊ داﺧﻠﮭﺎ ﻣﺟﻣوﻋﺔ ﻣن أدوات اﻟﺗﺣﻛم ﺛم ﺿﻊ زر واﺣد‬
‫ﺧﺎرﺟﮭﺎ وﻟﯾﻛن ﻛود اﻟﺻﻔﺣﺔ ﺷﺑﯾﮫ ﺑﺎﻵﺗﻲ ‪:‬‬

‫ﻛود ‪ASP.net‬‬
‫>‪<div‬‬

‫>"‪<asp:Panel id="pnlContact" GroupingText="Contact Information" Runat="server‬‬

‫"‪<asp:Label id="lblFirstName" Text="First Name:‬‬
‫>‪AssociatedControlID="txtFirstName" Runat="server" /‬‬
‫>‪<br /‬‬

‫‪- 26 -‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

<asp:TextBox id="txtFirstName" AutoCompleteType="FirstName" Runat="server"

/>
<br /><br />
<asp:Label id="lblLastname" Text="Last Name:"
AssociatedControlID="txtLastName" Runat="server" />
<br />
<asp:TextBox id="txtLastName" AutoCompleteType="LastName" Runat="server"
/>
<br /><br />
<asp:Button id="btnSubmit" Text="Submit" Runat="server" />
</asp:Panel>

<br />
<asp:Button ID="Button1" runat="server" Text="Visible" onclick="Button1_Click"
/>
</div>

: ‫ ﻓﮭو‬Button1 ‫أﻣﺎ اﻟﻛود اﻟذي ﯾﺗم إﺿﺎﻓﺗﮫ ﻟﺣدث اﻟﺿﻐط ﻋﻠﻰ اﻟزر‬

C# ‫ﻛود‬
protected void Button1_Click(object sender, EventArgs e)
{
pnlContact.Visible = !pnlContact.Visible;
}

VB ‫ﻛود‬
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)

pnlContact.Visible = Not pnlContact.Visible

End Sub

. ‫ ﻋﻠﻰ ﻣﺣﺗوﯾﺎﺗﮭﺎ‬Panel ‫ﻧﻔذ اﻟﺗطﺑﯾق اﻟﺳﺎﺑق ﻟﺗرى ﺗﺄﺛﯾر ﺧﺻﺎﺋص اﻷداة‬

‫ ﻋﻠﻰ ﺗﺟﻣﯾﻊ أدوات اﻟﺗﺣﻛم ذات وظﯾﻔﺔ أو ﺻﻔﺎت ﻣﺷﺗرﻛﺔ ﯾﺣددھﺎ‬Panel ‫ ﺗﻌﻣل أداة اﻟﺗﺣﻛم‬: ً ‫إذا‬
. ‫ ﺑﻐرض ﺗﻧظﯾم اﻟﺻﻔﺣﺔ واﻻﺳﺗﻔﺎدة ﻣن اﻟﻣزاﯾﺎ اﻟﺗﻲ ﺗﻘدﻣﮭﺎ ھذه اﻷداة‬, ‫أﺳﻠوب اﻟﻌﻣل ﻓﻲ ﻣﺟﻣوﻋﺎت‬

HyperLink ‫اﺳﺗﺧدام أداة اﻟﺗﺣﻛم‬

‫ وﻋﻠﻰ اﻟﻧﻘﯾض ﻣن‬, ‫ﺗﻌد ھذه اﻷداة اﻟطرﯾﻘﺔ اﻷﻛﺛر ﺷﯾوﻋﺎ ً وﺑﺳﺎطﺔ ﻟﻠﺗﻧﻘل ﺑﯾن اﻟﺻﻔﺣﺎت اﻟﻣﺧﺗﻠﻔﺔ‬
. ‫ ﻓﮭﻲ ﻻﺗﻘوم ﺑﺈرﺳﺎل اﻟﺑﯾﺎﻧﺎت إﻟﻰ اﻟﺳﯾرﻓر‬LinkButton ‫اﻷداة‬

- 27 -
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫ﺧﺻﺎﺋص أداة اﻟﺗﺣﻛم ‪: HyperLink‬‬

‫‪ : Enabled‬ﺗﻔﻌﯾل أو إﻟﻐﺎء ﺗﻔﻌﯾل ھذه اﻷداة ‪.‬‬ ‫‪‬‬

‫‪ : ImageUrl‬ﻟﺗﺣدﯾد ﻣﺳﺎر واﺳم ﺻورة ﻟﯾﺗم ﻋرﺿﮭﺎ ﻛراﺑط ‪.‬‬ ‫‪‬‬
‫‪ : NavigateUrl‬ﺗﺣدﯾد ﻋﻧوان ‪ URL‬ﯾﺗم اﻻﻧﺗﻘﺎل إﻟﯾﮫ ﻋﻧد اﻟﺿﻐط ﻋﻠﻰ ھذه اﻷداة ‪.‬‬ ‫‪‬‬
‫‪ : Text‬ﺗﺣدﯾد اﻟﻧص اﻟذي ﯾظﮭر ﻋﻠﻰ ھذه اﻷداة ‪.‬‬ ‫‪‬‬
‫‪ : Target‬ﺗﻣﻛﻧﻧﺎ ﻣن ﻓﺗﺢ ﺻﻔﺣﺔ اﻟراﺑط ﻓﻲ ﻧﺎﻓذة ﺟدﯾدة ﺑﺎﻟﻣﺳﺗﻌرض ‪.‬‬ ‫‪‬‬

‫ﻣﻼﺣظﺔ‬

‫ﻟو ﺗم ﺗﺣدﯾد ﻗﯾم ﻟﻠﺧﺎﺻﯾﺗﯾن ‪ Text , ImageUrl‬ﻣﻌﺎ ً ‪ ,‬ﻋﻧدﺋذ ﺳﯾﺗم ﻋرض اﻟﺻورة ﻷن أوﻟوﯾﺗﮭﺎ‬
‫أﻋﻠﻰ وﻟن ﯾﺗم ﻋرض اﻟﻧص اﻟﻣﺣدد ﺑﺎﻟﺧﺎﺻﯾﺔ ‪. Text‬‬

‫ﻣﺛﺎل ‪ :‬أﻧﺷﺊ ﺻﻔﺣﺔ ﺟدﯾدة ‪ ,‬أﺿف أداة ‪ HyperLink‬وﺣدد ﺧﺻﺎﺋﺻﮭﺎ ﻛﺎﻟﺗﺎﻟﻲ ‪:‬‬

‫ﻛود ‪ASP.net‬‬
‫>‪<div‬‬
‫"‪<asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/images/img.png‬‬
‫‪NavigateUrl="~/Default14.aspx">Go to Page Defaul14 page‬‬
‫>‪</asp:HyperLink‬‬
‫>‪</div‬‬

‫ﻧﻔذ اﻟﺻﻔﺣﺔ اﻟﺳﺎﺑﻘﺔ وﻻﺣظ ﻋدم ظﮭور اﻟﻧص ‪ Go to Page Defaul14 page‬إﻧﻣﺎ ظﮭرت‬
‫اﻟﺻورة اﻟﻣﺣددة ﻓﻘط ‪.‬‬

‫ﺧﺎﺗﻣﺔ اﻟﻔﺻل‬

‫ﻓﻲ ھذا اﻟﻔﺻل ‪ ,‬اﺳﺗﻌرﺿﻧﺎ ﻣﻌﺎ ً ﻣﺟﻣوﻋﺔ ﻣن اﻷدوات اﻷﺳﺎﺳﯾﺔ ﻟﺑﻧﺎء ﺗطﺑﯾﻘﺎت اﻹﻧﺗرﻧت وأھم‬
‫ﺧﺻﺎﺋﺻﮭﺎ ‪ ,‬ﺳﻧﻛﻣل ﻓﻲ اﻟﻔﺻول اﻟﻼﺣﻘﺔ اﻟﺗﻌرف ﻋﻠﻰ اﻟﻣزﯾد ﻣن اﻷدوات اﻷﻛﺛر ﺗﻧوﻋﺎ ً وﺗﻌﻘﯾدا ﻣﻊ‬
‫اﻟﻣزﯾد ﻣن اﻷﻣﺛﻠﺔ اﻟﻣﺗﻧوﻋﺔ ‪ ,‬ﺣﯾث ﺳﻧﻼﺣظ ارﺗﻔﺎع ﻣﺳﺗوى اﻷﻣﺛﻠﺔ ﻛﻠﻣﺎ ﺗﻘدﻣﻧﺎ أﻛﺛر ﻓﻲ ھذا اﻟﻛﺗﺎب ‪.‬‬

‫‪- 28 -‬‬
‫اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫اﻟﻔﺻل اﻷول‬

‫ﺑطﺎﻗﺔ ﺷﻛر ‪:‬‬

‫أﺗوﺟﮫ ﺑﺟزﯾل اﻟﺷﻛر إﻟﻰ ﻛل اﻟﻠذﯾن ﯾﻘدﻣون اﻟدﻋم اﻟﻣﻌﻧوي واﻟﻌﻠﻣﻲ ﻹﻧﺟﺎز ھذا اﻟﻛﺗﺎب ﺑﺄﻓﺿل‬
‫ﻣﺳﺗوى ﻣﻣﻛن ‪ ,‬وأﺧص ﺑﺎﻟﺷﻛر اﻷﺧت ﺷــﺟــون ) ﻋﺿو ﻣﻧﺗدى ﻓﯾﺟوال ﺑﯾﺳك ﻟﻠﻌرب ( واﻟﺗﻲ‬
‫ﺗﻔﺿﻠت ﺑﻛﺗﺎﺑﺔ أﻛواد اﻟﻔﯾﺟوال ﺑﯾﺳك ﻟﮭذا اﻟﻔﺻل ‪.‬‬

‫ﻟﻠﺗواﺻل ‪:‬‬

‫‪m-hajjkhalaf@hotmail.com‬‬

‫‪http://www.facebook.com/mohammed.hajkhalaf‬‬

‫ﻣﺣﻣد ﻋﻣر اﻟﺣﺎج ﺧﻠف – ﺳورﯾﺎ‬

‫‪+963 932 033250‬‬

‫‪- 29 -‬‬