GridView - in Arabic PDF

‫اﻟﻔﺻل اﻟﺛﺎﻣن‬
‫اﺳﺗﺧدام اﻷداة‬
‫‪GridView‬‬
‫ﻓﻲ ھذا اﻟﻔﺻل‬
‫ﻋرض وﺗﻌدﯾل وﺣذف اﻟﺑﯾﺎﻧﺎت‬ ‫‪‬‬

‫اﺧﺗﯾﺎر اﻟﺑﯾﺎﻧﺎت وﺗرﺗﯾﺑﮭﺎ وﺗﻘﺳﯾﻣﮭﺎ إﻟﻰ ﻋدة ﺻﻔﺣﺎت‬ ‫‪‬‬
‫اﻟﺑﺣث ﺿﻣن اﻟﺑﯾﺎﻧﺎت‬ ‫‪‬‬
‫ﺗﻧﺳﯾق ﻣظﮭر اﻷداة ‪GridView‬‬ ‫‪‬‬
‫أﻧﻣﺎط اﻟﺣﻘول ﺿﻣن اﻷداة ‪GridView‬‬ ‫‪‬‬
‫ﻋرض اﻟﺻور ﺿﻣن اﻷداة ‪GridView‬‬ ‫‪‬‬
‫اﻷﺣداث اﻟﺗﻲ ﺗطﻠﻘﮭﺎ اﻷداة ‪GridView‬‬ ‫‪‬‬
‫ﺗﻣﯾﯾز اﻷﺳطر وﻓق ﺷرط ﻣﻌﯾن‬ ‫‪‬‬
‫اﺳﺗﺧدام اﻷداة ‪ DropDownList‬داﺧل اﻷداة ‪GridView‬‬ ‫‪‬‬
‫اﺳﺗﺧدام ‪ GridView‬داﺧل ‪ GridView‬آﺧر‬ ‫‪‬‬
‫اﺳﺗﺧدام اﻷداة ‪GridView‬‬ ‫اﻟﻔﺻل اﻟﺛﺎﻣن‬
‫اﺳﺗﺧدام أداة اﻟﺗﺣﻛم ‪GridView‬‬
‫ﺗﻌﺗﺑر اﻷداة ‪ GridView‬ﻣن أﻛﺛر أدوات ‪ ASP.NET‬ﺗﻧوﻋﺎ ً ﺑﺎﻟﺧﺻﺎﺋص واﻟﻣﮭﺎم اﻟﺗﻲ ﯾﻣﻛن ﺗﻧﻔﯾذھﺎ ﻣن‬
‫ﺧﻼﻟﮭﺎ ‪ ,‬ﻓﻲ ھذا اﻟﻔﺻل ﺳﻧﺣﯾط ﺑﺟﻣﯾﻊ اﻟﻣﮭﺎم اﻷﺳﺎﺳﯾﺔ ﻟﮭذه اﻷداة ﺣﯾث ﺑﺎﻹﻣﻛﺎن اﺳﺗﺧداﻣﮭﺎ ﻟﻌرض اﻟﺑﯾﺎﻧﺎت‬
‫‪ ,‬ﺗﺣدﯾد اﻟﺑﯾﺎﻧﺎت اﻟﺗﻲ ﺳﯾﺗم ﻋرﺿﮭﺎ ‪ ,‬ﺗرﺗﯾب اﻟﺑﯾﺎﻧﺎت ‪ ,‬ﻋرض اﻟﺑﯾﺎﻧﺎت ﻋﻠﻰ ﻋدة ﺻﻔﺣﺎت ‪ ,‬ﺗﺣرﯾر اﻟﺑﯾﺎﻧﺎت‬
‫وﺗﻌدﯾﻠﮭﺎ ‪ ,‬ﻛﻣﺎ ﺳﻧﺗﻌﻠم ﻛﯾﻔﯾﺔ إﺿﺎﻓﺔ أدوات اﻟﺗﺣﻛم اﻷﺧرى ﺿﻣن اﻷداة ‪ , GridView‬وﻛﯾﻔﯾﺔ اﺳﺗﺧدام أدوات‬
‫اﻟﺗﺣﻘق ﻣن اﻟدﺧل ﻣﻊ اﻷداة ‪ , GridView‬ﺑﺎﻹﺿﺎﻓﺔ إﻟﻰ ﻣﺎﺳﺑق ﺳﺗﻛون ﻟﻧﺎ وﻗﻔﺔ ﻣﻊ ﻛﯾﻔﯾﺔ ﺗﺧزﯾن اﻟﺻور ﻓﻲ‬
‫ﻗﺎﻋدة اﻟﺑﯾﺎﻧﺎت وﻋرﺿﮭﺎ ﻋﻠﻰ ﺻﻔﺣﺎت اﻟوﯾب ‪ ,‬ﺑﺎﻹﺿﺎﻓﺔ إﻟﻰ ﻣواﺿﯾﻊ ﻋدﯾدة ﺳﺗﺗم ﻣﻧﺎﻗﺷﺗﮭﺎ ﺧﻼل ھذا‬
‫اﻟﻔﺻل ‪.‬‬
‫ﻣﻼﺣظﺔ‬
‫ﻛل ﻓﻘرة ﺿﻣن ھذا اﻟﻔﺻل ھﻲ اﻣﺗداد ﻟﻠﻔﻘرة اﻟﺗﻲ ﺗﺳﺑﻘﮭﺎ ‪ ,‬ﻟذﻟك أرﺟو ﻗراءة ھذا اﻟﻔﺻل ﻣن ﺑداﯾﺗﮫ وﻋدم‬
‫اﻟﻘﻔز ﺑﯾن اﻟﻔﻘرات ‪.‬‬
‫ﻛﻣﺎ أﻧﺻﺢ ﺑﻘراءة ﻓﺻل " أﺳﺎﺳﯾﺎت اﻟﺗﻌﺎﻣل ﻣﻊ ﻗواﻋد اﻟﺑﯾﺎﻧﺎت " ﻗﺑل اﻟﺧوض ﻓﻲ ھذا اﻟﻔﺻل ‪.‬‬
‫ﺗﺣﺿﯾر ﻗﺎﻋدة اﻟﺑﯾﺎﻧﺎت‬
‫ﻗﺑل اﻟﺑدء ﺑﻔﻘرات ھذا اﻟﻔﺻل ﯾﺟب ﻋﻠﯾﻧﺎ ﺑﻧﺎء ﻗﺎﻋدة اﻟﺑﯾﺎﻧﺎت واﻟﺟداول اﻟﺗﻲ ﺳﻧﻘوم ﺑﺎﻟﻌﻣل ﻋﻠﯾﮭﺎ ‪ ,‬ﺗﻌﻠﻣﻧﺎ‬
‫ﺧﻼل اﻟﻔﺻول اﻟﺳﺎﺑﻘﺔ ﻛﯾﻔﯾﺔ ﻋﻣل ھذا ‪ ,‬ﺳﻧﻘوم ﺑﺑﻧﺎء ﺟدوﻟﯾن ‪ ,‬اﻟﺟدول اﻷول ﻟﺗﺧزﯾن ﻣﻌﻠوﻣﺎت ﻋن أﻗﺳﺎم‬
‫اﻟﺷرﻛﺔ واﻟﺟدول اﻵﺧر ﻟﺗﺧزﯾن ﺑﯾﺎﻧﺎت اﻟﻣوظﻔﯾن ‪ ,‬ﺟدول اﻷﻗﺳﺎم ﯾﺣﻣل اﻻﺳم ‪ departments‬وﻟﮫ اﻟﺑﻧﯾﺔ‬
‫اﻟﺗﺎﻟﯾﺔ ‪:‬‬
‫وﺻف اﻟﺣﻘل‬ ‫ﻧﻣط اﻟﺑﯾﺎﻧﺎت‬ ‫اﺳم اﻟﺣﻘل‬

‫ﻣﻔﺗﺎح رﺋﯾﺳﻲ ﯾﺄﺧذ ﻗﯾﻣﺗﮫ‬ ‫‪Int‬‬ ‫‪Id‬‬
‫ﺑﺷﻛل ﺗﻠﻘﺎﺋﻲ دون ﺗدﺧل‬
‫اﻟﻣﺳﺗﺧدم‬
‫ﻟﺗﺧزﯾن اﺳم اﻟﻘﺳم‬ ‫)‪Nvarchar(50‬‬ ‫‪Name‬‬
‫وﺻف اﻟﻘﺳم‬ ‫)‪Nvarchar(100‬‬ ‫‪Description‬‬
‫‪-3-‬‬
‫أﻣﺎ ﺟدول اﻟﻣوظﻔﯾن ﻓﻧﻌطﯾﮫ اﻻﺳم ‪ employees‬وﻟﮫ اﻟﺑﻧﯾﺔ اﻟﺗﺎﻟﯾﺔ ‪:‬‬
‫وﺻف اﻟﺣﻘل‬ ‫ﻧﻣط اﻟﺑﯾﺎﻧﺎت‬ ‫اﺳم اﻟﺣﻘل‬

‫ﻣﻔﺗﺎح رﺋﯾﺳﻲ ﯾﺄﺧذ ﻗﯾﻣﺗﮫ‬ ‫‪Int‬‬ ‫‪Id‬‬
‫ﺑﺷﻛل ﺗﻠﻘﺎﺋﻲ دون ﺗدﺧل‬
‫اﻟﻣﺳﺗﺧدم‬
‫ﻟﺗﺧزﯾن اﺳم اﻟﻣوظف‬ ‫)‪Nvarchar(50‬‬ ‫‪Fname‬‬
‫ﻛﻧﯾﺔ اﻟﻣوظف‬ ‫)‪Nvarchar(50‬‬ ‫‪Lname‬‬
‫ﻣﺗزوج أم ﻻ‬ ‫‪Bit‬‬ ‫‪Marriage‬‬
‫اﻟراﺗب‬ ‫‪Int‬‬ ‫‪Salary‬‬
‫رﻗم اﻟﻘﺳم اﻟذي ﯾﺗﺑﻊ ﻟﮫ‬ ‫‪Int‬‬ ‫‪deptID‬‬
‫ﺻورة ﺷﺧﺻﯾﺔ‬ ‫)‪Nvarchar(50‬‬ ‫‪Photo‬‬
‫ﺣﯾث إن اﻟﺣﻘل ‪ deptID‬ﻣن اﻟﺟدول ‪ employees‬ﺳﯾﻛون ﺑﻣﺛﺎﺑﺔ ﻣﻔﺗﺎح أﺟﻧﺑﻲ ‪ Foreign Key‬ﻣرﺗﺑط‬
‫ﺑﺎﻟﺣﻘل ‪ id‬ﻣن اﻟﺟدول ‪ ) departments‬ﻟم أﻗم ﺑوﺿﻊ ﻗﯾد ﻣﻔﺗﺎح أﺟﻧﺑﻲ ﺿﻣن ﻗﺎﻋدة اﻟﺑﯾﺎﻧﺎت ﻋﻠﻰ اﻟرﻏم‬
‫ﻣن ﺟواز ذﻟك ‪ ,‬إﻧﻣﺎ ﻟم أﺷﺄ إدﺧﺎل اﻟﻘﺎرئ ﺑﺄﻣور ﯾﻔﺗرض أﻧﮭﺎ ﻣن أﺳﺎﺳﯾﺎت ﻗواﻋد اﻟﺑﯾﺎﻧﺎت وﻟﺳت ھﻧﺎ ﺑﺻدد‬
‫دراﺳﺔ ﻗواﻋد اﻟﺑﯾﺎﻧﺎت ( ‪.‬‬
‫ﻧﻘوم ﺑﻣﻠﺊ ﺟدول اﻷﻗﺳﺎم ﺑﺎﻟﺑﯾﺎﻧﺎت اﻟﺗﺎﻟﯾﺔ ‪:‬‬
‫‪discreption‬‬ ‫‪Name‬‬ ‫‪Id‬‬

‫ﯾﮭﺗم ﺑﺎﻟﺷؤون اﻹدارﯾﺔ‬ ‫ﻗﺳم اﻹدارة‬ ‫‪1‬‬
‫ﯾﮭﺗم ﺑﺎﻟﻘﺿﺎﯾﺎ اﻟﻣﺎﻟﯾﺔ‬ ‫ﻗﺳم اﻟﻣﺣﺎﺳﺑﺔ‬ ‫‪2‬‬
‫ﯾﮭﺗم ﺑﺎﻟﻌﻼﻗﺎت اﻟﺧﺎرﺟﯾﺔ‬ ‫ﻗﺳم اﻟﻌﻼﻗﺎت‬ ‫‪3‬‬
‫ﻛﻣﺎ ﻧﻘوم ﺑﻣﻠﺊ ﺟدول اﻟﻣوظﻔﯾن ﺑﺎﻟﺑﯾﺎﻧﺎت اﻟﺗﺎﻟﯾﺔ ‪:‬‬
‫‪photo‬‬ ‫‪deptID‬‬ ‫‪salary‬‬ ‫‪marriage‬‬ ‫‪lname‬‬ ‫‪Fname‬‬ ‫‪id‬‬

‫‪~/images/1.jpg‬‬ ‫‪1‬‬ ‫‪1000‬‬ ‫‪0‬‬ ‫اﻟﺣﺎج ﺧﻠف‬ ‫ﻣﺣﻣد‬ ‫‪1‬‬
‫‪~/images/2.jpg‬‬ ‫‪1‬‬ ‫‪1500‬‬ ‫‪0‬‬ ‫أﺣﻣد‬ ‫إﯾﻣﺎن‬ ‫‪2‬‬
‫‪~/images/3.jpg‬‬ ‫‪2‬‬ ‫‪1200‬‬ ‫‪1‬‬ ‫اﻟﻣﺻطﻔﻰ‬ ‫أﺣﻣد‬ ‫‪3‬‬
‫‪~/images/4.jpg‬‬ ‫‪2‬‬ ‫‪1300‬‬ ‫‪0‬‬ ‫اﻟﺧﻠف‬ ‫ﺑﺗول‬ ‫‪4‬‬
‫‪~/images/5.jpg‬‬ ‫‪3‬‬ ‫‪900‬‬ ‫‪1‬‬ ‫اﺑراھﯾم‬ ‫ﻗﺻﻲ‬ ‫‪5‬‬
‫‪~/images/6.jpg‬‬ ‫‪3‬‬ ‫‪800‬‬ ‫‪1‬‬ ‫ﻣراد‬ ‫ﻟﯾن‬ ‫‪6‬‬
‫‪-4-‬‬
‫ﻗم ﺑﺈﻧﺷﺎء ﻣﺟﻠد ﺟدﯾد ﺿﻣن ﻣﺳﺎر اﻟﻣﺷروع اﻟﺣﺎﻟﻲ وﺳﻣﮫ ‪ images‬وﺿﻊ ﺑداﺧﻠﮫ ﺧﻣس ﺻور وﻟﺗﻛن‬
‫أﺳﻣﺎؤھﺎ ﻣطﺎﺑﻘﺔ ﻷﺳﻣﺎء اﻟﺻور اﻟﺗﻲ أدﺧﻠﻧﺎھﺎ ﻓﻲ اﻟﺟدول اﻟﺳﺎﺑق‪ .‬ﺑﮭذا ﻧﻛون ﻗد اﻧﺗﮭﯾﻧﺎ ﻣن إﻋداد ﻗﺎﻋدة‬
‫اﻟﺑﯾﺎﻧﺎت وأﺻﺑﺣﻧﺎ ﺟﺎھزﯾن ﻟﻠﺑدء ﺑﻔﻘرات ھذا اﻟﻔﺻل ‪.‬‬
‫ﻋرض اﻟﺑﯾﺎﻧﺎت‬
‫ﺗﻣﻛﻧﻧﺎ أداة اﻟﺗﺣﻛم ‪ GridView‬ﻣن ﻋرض اﻟﺑﯾﺎﻧﺎت ﻋﻠﻰ ﺻﻔﺣﺔ اﻟوﯾب ﺑﺳﮭوﻟﺔ ﻛﺑﯾرة ‪ ,‬ﺣﯾث ﯾﺗم اﻻﺗﺻﺎل ﻣﻊ‬
‫ﻗﺎﻋدة اﻟﺑﯾﺎﻧﺎت ﺑواﺳطﺔ اﻷداة ‪ , SqlDataSource‬أﺿف ﺻﻔﺣﺔ ﺟدﯾدة و ﻗم ﺑﺈﺿﺎﻓﺔ اﻷداة ‪ GridView‬إﻟﯾﮭﺎ‬
‫واﻟﺗﻲ ﺗﺟدھﺎ ﺿﻣن اﻟﻘﺳم ‪ Data‬ﺿﻣن ﻧﺎﻓذة اﻷدوات ‪ ToolBox‬ﺛم ﺗﺎﺑﻊ اﻟﺧطوات اﻟﺗﺎﻟﯾﺔ ‪:‬‬
‫‪-5-‬‬
‫‪-6-‬‬
‫‪-7-‬‬
GridView ‫اﺳﺗﺧدام اﻷداة‬ ‫اﻟﻔﺻل اﻟﺛﺎﻣن‬
‫ ﻛﻣﺎ‬GridView ‫ ﺑﺈﻣﻛﺎﻧﻧﺎ ﺗﻧﻔﯾذ اﻟﺻﻔﺣﺔ ﻟﺗظﮭر اﻟﺑﯾﺎﻧﺎت ﺿﻣن اﻷداة‬, ‫ﺑﻌد اﻻﻧﺗﮭﺎء ﻣن اﻟﺧطوات اﻟﺳﺎﺑﻘﺔ‬
: ‫ﺗوﺿﺢ اﻟﺻورة اﻟﺗﺎﻟﯾﺔ‬
: ‫أﻣﺎ ﻛود اﻟﺻﻔﺣﺔ ﻓﯾﻛون‬
ASP.net ‫ﻛود‬
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="id" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="id" HeaderText="id" InsertVisible="False"
ReadOnly="True" SortExpression="id" />
<asp:BoundField DataField="fname" HeaderText="fname"
SortExpression="fname" />
<asp:BoundField DataField="lname" HeaderText="lname"
SortExpression="lname" />
<asp:CheckBoxField DataField="marriage" HeaderText="marriage"
SortExpression="marriage" />
<asp:BoundField DataField="salary" HeaderText="salary"
SortExpression="salary" />
<asp:BoundField DataField="deptID" HeaderText="deptID"
SortExpression="deptID" />
<asp:BoundField DataField="photo" HeaderText="photo"
SortExpression="photo" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [employees]" />
</div>
‫ ﺣﯾث ﺳﺗﻘوم ﺑﺟﻠب اﻟﺑﯾﺎﻧﺎت‬employees ‫ ﻣﻊ اﻟﺟدول‬SqlDataSource ‫ﻣﺎ ﻗﻣﻧﺎ ﺑﮫ ﻓﻌﻠﯾﺎ ھو رﺑط اﻷداة‬
‫ وذﻟك ﻋﺑر اﻟﺧﺎﺻﯾﺔ‬SqlDataSource ‫ ﻣﻊ ﻣﺻدر اﻟﺑﯾﺎﻧﺎت‬GridView ‫اﻟﻣﺣددة وﻣن ﺛم ﻗﻣﻧﺎ ﺑرﺑط اﻷداة‬
.‫ ﻛﻣﺎ ھو ﻣوﺿﺢ ﻓﻲ اﻟﻛود اﻟﺳﺎﺑق واﻟذي ﺳﻧﻘوم ﺑﺷرﺣﮫ ﺑﺎﻟﺗﻔﺻﯾل ﺿﻣن اﻟﻔﻘرات اﻟﻼﺣﻘﺔ‬DataSourceID
-8-
‫اﺧﺘﯿﺎر اﻟﺒﯿﺎﻧﺎت‬
‫ ﺑﻧﺎءا ﻋﻠﻰ ﻣﺎ‬GridView ‫ﺳﻧﻘوم ﺿﻣن ھذه اﻟﻔﻘرة ﺑﺗوﺿﯾﺢ ﻛﯾﻔﯾﺔ ﺗﺣدﯾد اﻟﺑﯾﺎﻧﺎت اﻟﺗﻲ ﺳﺗﻌرض ﺿﻣن اﻷداة‬
. ‫ آﺧر‬GridView ‫اﺧﺗﺎره اﻟﻣﺳﺗﺧدم ﺿﻣن‬
‫ ﻧﻘوم‬, departments ‫ وﻧﻘوم ﺑرﺑطﮭﺎ ﻣﻊ اﻟﺟدول‬GridView1 ‫ﻧﻧﺷﺊ ﺻﻔﺣﺔ ﺟدﯾدة وﻧﺿﯾف إﻟﯾﮭﺎ أداة‬
‫ اﻟﻘﯾﻣﺔ‬AutoGenerateSelectButton ‫ واﻟﺧﺎﺻﯾﺔ‬, id ‫ اﻟﻘﯾﻣﺔ‬DataKeyNames ‫ﺑﺈﻋطﺎء اﻟﺧﺎﺻﯾﺔ‬
: ‫ ﻛﻣﺎ ﯾوﺿﺢ اﻟﻛود اﻟﺗﺎﻟﻲ‬True
<div>
AutoGenerateSelectButton="True" DataKeyNames="id"
DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="name" HeaderText="name"
SortExpression="name" />
</Columns>
</asp:GridView>
SelectCommand="SELECT [id], [name] FROM [departments]"></asp:SqlDataSource>
</div>
‫ وﻟﻛن ﻓﻲ ﻋﺑﺎرة اﻟـ‬employees ‫ وﻧﻘوم ﺑرﺑطﮭﺎ ﻣﻊ اﻟﺟدول‬GridView2 ‫ﻧﻘوم ﺑﻌد ذﻟك ﺑﺈﺿﺎﻓﺔ أداة‬
‫ ﻧﺿﯾف ﺷرط أن ﺗﻛون ﺳﺟﻼت اﻟﻣوظﻔﯾن اﻟﺗﻲ ﺳﯾﺗم إﺣﺿﺎرھﺎ ﻣواﻓﻘﺔ ﻟﺷرط أن ﯾﻛون رﻗم اﻟﻘﺳم‬select
‫ ) ﻟﻣزﯾد ﻣن اﻟﻣﻌﻠوﻣﺎت راﺟﻊ ﻓﺻل ﻣﻘدﻣﺔ‬. GridView1 ‫ﻣواﻓق ﻟرﻗم اﻟﻘﺳم اﻟذي ﺗم اﺧﺗﯾﺎره ﺿﻣن اﻷداة‬
. ( ‫إﻟﺔ ﻗواﻋد اﻟﺑﯾﺎﻧﺎت‬
-9-
‫‪1‬‬
‫‪4‬‬
‫‪2‬‬
‫‪3‬‬
‫‪5‬‬
‫‪6‬‬
‫‪- 10 -‬‬
: ‫أﻣﺎ ﻛود اﻟﺻﻔﺣﺔ ﻛﺎﻣﻼ ﻓﯾﻛون ﻛﺎﻟﺗﺎﻟﻲ‬
<div>
AutoGenerateSelectButton="True" DataKeyNames="id"
DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="name" HeaderText="name"
SortExpression="name" />
</Columns>
</asp:GridView>
SelectCommand="SELECT [id], [name] FROM [departments]"></asp:SqlDataSource>
<Columns>
<asp:BoundField DataField="deptID" HeaderText="deptID"
SortExpression="deptID" />
</Columns>
</asp:GridView>
SelectCommand="SELECT * FROM [employees] WHERE ([deptID] = @deptID)">
<SelectParameters>
<asp:ControlParameter ControlID="GridView1" Name="deptID"
PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</div>
‫ ( ﺿﻣن اﻷداة‬link ‫ ﻋﻠﻰ ھﯾﺋﺔ‬Select ‫ﻧﻼﺣظ ﻋﻧد ﺗﻧﻔﯾذ اﻟﺻﻔﺣﺔ اﻟﺳﺎﺑﻘﺔ إﻣﻛﺎﻧﯾﺔ اﺧﺗﯾﺎر ﺳطر ﻣﻌﯾن )ظﮭور‬
‫ ﯾﺗم ﻣﻌرﻓﺔ‬, AutoGenerateSelectionButton ‫ ﻟﻠﺧﺎﺻﯾﺔ‬True ‫ ﺣﯾث ﺗم إﺳﻧﺎد اﻟﻘﯾﻣﺔ‬GridView1
: ‫اﺧﺗﯾﺎر اﻟﻣﺳﺗﺧدم ﻣن ﺧﻼل أﺣد اﻟطراﺋق اﻷرﺑﻊ اﻟﺗﺎﻟﯾﺔ‬
- 11 -
‫)(‪ : SelectedDataKey‬ﺗﻌﯾد ﻏرض ‪ DataKey Object‬ﻣرﺗﺑط ﺑﺎﻟﺳطر اﻟذي ﺗم اﺧﺗﯾﺎره ‪ ,‬ھذا‬ ‫‪‬‬
‫اﻟﺧﯾﺎر ﻣﻔﯾد ﻓﻲ ﺣﺎل وﺟود أﻛﺛر ﻣن ‪ data key‬واﺣد ‪.‬‬
‫)(‪ : SelectedIndex‬ﺗﻌﯾد رﻗم ) ﻓﮭرس ( اﻟﺳطر اﻟذي ﺗم اﺧﺗﯾﺎره ‪ ,‬ﯾﺑدأ اﻟﻌد ﻣن اﻟﺻﻔر ﺑﺎﻋﺗﺑﺎر‬ ‫‪‬‬
‫اﻟﺳطر اﻷول دﻟﯾﻠﮫ ﺻﻔر ‪.‬‬
‫)(‪ : SelectedValue‬ﺗﻌﯾد ﻗﯾﻣﺔ ‪ data key‬اﻟﻣرﺗﺑط ﺑﺎﻟﺳطر اﻟذي ﺗم اﺧﺗﯾﺎره ‪ ,‬ﻓﻲ ﺣﺎل وﺟود أﻛﺛر‬ ‫‪‬‬
‫ﻣن ‪ data key‬ﻓﺈﻧﮭﺎ ﺗﻌﯾد ﻗﯾﻣﺔ أول واﺣد ﻓﻘط ‪.‬‬
‫)(‪ : SelectedRow‬ﺗﻌﯾد ﻏرض ‪ GridViewRow Object‬ﯾﻣﺛل اﻟﺳطر اﻟذي ﺗم اﺧﺗﯾﺎره ‪.‬‬ ‫‪‬‬
‫ﺗرﺗﯾب اﻟﺑﯾﺎﻧﺎت‬
‫ﺗدﻋم اﻷداة ‪ GridView‬إﻣﻛﺎﻧﯾﺔ ﺗرﺗﯾب اﻟﺑﯾﺎﻧﺎت اﻟﻣﻌروﺿﺔ و ﺑﺄﺳﻠوب ﺗﺻﺎﻋدي ‪ Ascending‬أو ﺗﻧﺎزﻟﻲ‬
‫‪ , Descending‬وذﻟك ﻋﺑر ﺗﻔﻌﯾل اﻟﺧﺎﺻﯾﺔ ‪ AllowSorting‬ﻣن ﺧﻼل إﻋطﺎﺋﮭﺎ اﻟﻘﯾﻣﺔ ‪ . True‬ﻛﻣﺎ ﯾﻣﻛن‬
‫ﺗﻔﻌﯾل ﺧﺎﺻﯾﺔ اﻟﺗرﺗﯾب ﻋﺑر اﻟﻧﻘر ﻋﻠﻰ ‪ Smart Tag‬ﻟﻸداة ‪ GridView‬وﻣن ﺛم ﺗﻔﻌﯾل اﻟﺧﯾﺎر ‪Enable‬‬
‫‪. Sorting‬‬
‫ﻟﻧﻘم ﺑﺈﺿﺎﻓﺔ أداة ‪ GridView‬ورﺑطﮭﺎ ﺑﺟدول اﻟﻣوظﻔﯾن ‪ employee‬وﺗﻔﻌﯾل ﺧﯾﺎر ﺗرﺗﯾب اﻟﺑﯾﺎﻧﺎت ﺑﺣﯾث‬
‫ﯾﺻﺑﺢ ﻛود اﻟﺻﻔﺣﺔ ﺷﺑﯾﮫ ﺑﺎﻟﺗﺎﻟﻲ ‪:‬‬
‫ﻛود ‪ASP.net‬‬
‫>‪<div‬‬
‫"‪<asp:GridView ID="GridView1" runat="server" AllowSorting="true‬‬
‫>‪DataSourceID="SqlDataSource1" /‬‬
‫‪- 12 -‬‬
‫"‪<asp:SqlDataSource ID="SqlDataSource1" runat="server‬‬

‫">‪ConnectionString="<%$ ConnectionStrings:ConnectionString %‬‬
‫>‪SelectCommand="SELECT * FROM [employees]" /‬‬
‫>‪</div‬‬
‫ﻋﻧد ﺗﻧﻔﯾذ اﻟﺻﻔﺣﺔ اﻟﺳﺎﺑﻘﺔ ﺳﺗﻼﺣظ أن ﻋﻧﺎوﯾن اﻟﺣﻘول ﺳﺗﺻﺑﺢ ﻛرواﺑط ﺗﺷﻌﺑﯾﺔ ‪ ,‬ﻋﻧد اﻟﻧﻘر ﻋﻠﻰ ﻋﻧوان أﺣد‬
‫اﻟﺣﻘول ﺳﯾﺗم ﺗرﺗﯾب ﺑﯾﺎﻧﺎت اﻟﺟدول ﺑﻧﺎءا ﻋﻠﻰ ﺑﯾﺎﻧﺎت ذﻟك اﻟﻌﻣود وﺑﺷﻛل ﺗﺻﺎﻋدي ‪ ,‬وﻋﻧد اﻟﻧﻘر ﻋﻠﻰ ﻋﻧوان‬
‫ﻧﻔس اﻟﻌﻣود ﻟﻣرة ﺛﺎﻧﯾﺔ ﻓﯾﺳﺗم اﻟﺗرﺗﯾب ﺑﺷﻛل ﻣﻌﺎﻛس ﻟﻣﺎ ﻛﺎن ﻋﻠﯾﮫ ‪ ,‬أي ﺑﺈﺳﻠوب ﺗﻧﺎزﻟﻲ ‪ ,‬ﻓﻲ اﻟﺻورة اﻟﺗﺎﻟﯾﺔ‬
‫ﻗﻣت ﺑﺗرﺗﯾب ﺑﯾﺎﻧﺎت اﻟﻣوظﻔﯾن ﻋﻠﻰ أﺳﺎس اﻟراﺗب وﺑﺷﻛل ﺗﻧﺎزﻟﻲ ‪ ,‬أي ﻣن اﻟراﺗب اﻷﻋﻠﻰ إﻟﻰ اﻷدﻧﻰ ‪.‬‬
‫ﺗﻘﺳﯾم اﻟﺑﯾﺎﻧﺎت إﻟﻰ ﻋدة ﺻﻔﺣﺎت‬
‫ﻋﻧد اﻟﻌﻣل ﻣﻊ ﻗواﻋد اﻟﺑﯾﺎﻧﺎت اﻟﺿﺧﻣﺔ واﻟﺗﻲ ﻗد ﺗﺣﺗوي ﻋﻠﻰ ﻋدد ﻛﺑﯾر ﻣن اﻟﺳﺟﻼت ﺿﻣن ﺟداوﻟﮭﺎ ﯾﺻﺑﺢ‬
‫ﻣن اﻟﺿروري ﻋرض اﻟﺟداول ﻋﻠﻰ ﻋدة ﺻﻔﺣﺎت ‪ ,‬ﺗدﻋم اﻷداة ‪ GridView‬اﻟﺧﺎﺻﯾﺔ ‪AllowPaging‬‬
‫واﻟﺗﻲ ﺗﻘوم ﺑﺗﻘﺳﯾم اﻟﺑﯾﺎﻧﺎت إﻟﻰ ﻋدة ﺻﻔﺣﺎت ‪ ,‬وﻧﺳﺗطﯾﻊ ﺗﺣدﯾد ﻋدد اﻷﺳطر اﻟﺗﻲ ﺳﺗظﮭر ﻓﻲ ﻛل ﺻﻔﺣﺔ ﻋﺑر‬
‫اﻟﺧﺎﺻﯾﺔ ‪ , PageSize‬ﺑﺎﻟﻌودة إﻟﻰ اﻟﻣﺛﺎل اﻟﺳﺎﺑق ‪ ,‬ﻧﻘوم ﺑﺗﻔﻌﯾل اﻟﺧﺎﺻﯾﺔ ‪ ) AllowPaging‬ﯾﻣﻛن أﯾﺿﺎ‬
‫ﺗﻔﻌﯾﻠﮭﺎ ﻣن ﺧﻼل ‪ Smart Tag‬ﻋﺑر اﻟﺧﺎﺻﯾﺔ ‪ , ( Enable Paging‬ﺑﻌد ذﻟك ﻧﻘوم ﺑﺗﺣدﯾد ﺣﺟم اﻟﺻﻔﺣﺔ ﺑـ ‪3‬‬
‫ﻟﯾﺗم ﻋرض ﺛﻼﺛﺔ أﺳطر ﻓﻘط ﻓﻲ ﻛل ﺻﻔﺣﺔ ﻣن ﺻﻔﺣﺎت ‪ GridView‬ﻛﻣﺎ ﺗوﺿﺢ اﻟﺻورة اﻟﺗﺎﻟﯾﺔ ‪:‬‬
‫ﻓﻲ ﺣﺎل ﻟم ﯾﺗم ﺗﺣدﯾد ﺣﺟم اﻟﺻﻔﺣﺔ ﻓﺈن اﻟﻘﯾﻣﺔ اﻻﻓﺗراﺿﯾﺔ ﻟﮭﺎ ھو ‪ 10‬أﺳطر ‪ .‬ﻛود اﻟﺻﻔﺣﺔ ﯾﻛون ﻛﺎﻟﺗﺎﻟﻲ ‪:‬‬
‫‪- 13 -‬‬
‫>‪<div‬‬
‫"‪<asp:GridView ID="GridView1" runat="server" AllowPaging="True" PageSize="3‬‬
‫>‪DataSourceID="SqlDataSource1" /‬‬

‫>‪SelectCommand="SELECT * FROM [employees]" /‬‬
‫>‪</div‬‬
‫إن ﺗﻘﺳﯾم اﻟﺑﯾﺎﻧﺎت إﻟﻰ ﺻﻔﺣﺎت ﻋدﯾدة ﻛﻣﺎ ﻓﻲ اﻷﺳﻠوب اﻟﺳﺎﺑق ﺳﯾؤدي إﻟﻰ ﺑطء ﺗﺣﻣﯾل اﻟﺻﻔﺣﺔ ﻋﻧد اﻟﻌﻣل‬
‫ﻣﻊ ﻗواﻋد اﻟﺑﯾﺎﻧﺎت اﻟﺿﺧﻣﺔ ‪ ,‬وذﻟك ﻷﻧﮫ ﯾﺗم ﺗﺣﻣﯾل ﻛﺎﻣل ﺳﺟﻼت اﻟﺟدول إﻟﻰ ذاﻛرة اﻟﺳﯾرﻓر وﻣن ﺛم إﺟراء‬
‫ﻋﻣﻠﯾﺔ اﻟﺗﻘﺳﯾم إﻟﻰ ﺻﻔﺣﺎت ‪ ,‬ﻓﻠو ﺗم اﻟﺗﻌﺎﻣل ﻣﻊ ﺟدول ﯾﺣﺗوي ﻋﻠﻰ ﻣﻠﯾون ﺳطر ﻓﺈﻧﮫ ﺳﯾﺗم ﺗﺣﻣﯾل اﻟﻣﻠﯾون‬
‫ﺳطر إﻟﻰ اﻟذاﻛرة ﺣﺗﻰ ﻟو ﺗم ﻋرض ﺳطر واﺣد ﻓﻘط ﻓﻲ ﻛل ﺻﻔﺣﺔ ﺿﻣن اﻷدة ‪ , GridView‬ﺳﻧﻌرض ﻓﻲ‬
‫ﻓﺻل ﻻﺣق طرﯾﻘﺔ أﻧﺳب ﻟﺗﻘﺳﯾم اﻟﺑﯾﺎﻧﺎت و ذﻟك ﺑﺎﺳﺗﺧدام اﻷداة ‪. ObjectDataSource‬‬
‫ﺣذف وﺗﻌدﯾل اﻟﺑﯾﺎﻧﺎت‬
‫ﻣن اﻟﻣزاﯾﺎ اﻟراﺋﻌﺔ اﻟﺗﻲ ﺗﻘدﻣﮭﺎ اﻷداة ‪ GridView‬ھﻲ إﻣﻛﺎﻧﯾﺔ ﺣذف وﺗﻌدﯾل اﻟﺑﯾﺎﻧﺎت دون اﻟﺣﺎﺟﺔ ﻟﻛﺗﺎﺑﺔ‬
‫ﺳطر ﺑرﻣﺟﻲ واﺣد ‪ ,‬وﻟﻛن ﺣﺗﻰ ﻧﺗﻣﻛن ﻣن إﺟراء ھذه اﻟﻌﻣﻠﯾﺎت ﯾﻧﺑﻐﻲ أوﻻ ﺗﮭﯾﺋﺔ اﻷداة ‪SqlDataSource‬‬
‫ﻟﺗﺳﻣﺢ ﺑﮭﺎ ‪ ,‬وذﻟك ﻋﺑر إﺿﺎﻓﺔ ﻋﺑﺎرات ‪ SQL‬اﻟﺗﻲ ﺗﻘوم ﺗﻧﻔذ ھذه اﻟﻌﻣﻠﯾﺎت ) ‪ ,( Update, Delete‬ﺑﻛل‬
‫ﺑﺳﺎطﺔ أﻧﺷﺊ ﺻﻔﺣﺔ ﺟدﯾدة وأﺿف إﻟﯾﮭﺎ أداة ‪ GridView‬واﺑدأ ﺑرﺑطﮭﺎ ﻣﻊ اﻟﺟدول ‪ Employees‬وﻋﻧد‬
‫وﺻوﻟك ﻟﻠﻧﺎﻓذة اﻟﺗﺎﻟﯾﺔ ﻗم ﺑﺗﻔﻌﯾل ﺧﯾﺎر اﻟﺣذف واﻟﺗﻌدﯾل ﻛﻣﺎ ھو ﻣوﺿﺢ ‪:‬‬
‫‪- 14 -‬‬
‫إن ﺗﻔﻌﯾل اﻟﺧﯾﺎر اﻷول ﯾﺳﻣﺢ ﻟﻧﺎ ﺑﺈﺟراء ﻋﻣﻠﯾﺎت اﻹﺿﺎﻓﺔ اﻟﺗﻌدﯾل واﻟﺣذف ﻋﻠﻰ اﻟﺟدول اﻟﻣﺣدد ‪ ,‬ﺷرط أن‬
‫ﯾﺣﺗوي اﻟﺟدول ﻋﻠﻰ ﻣﻔﺗﺎح أﺳﺎﺳﻲ ‪ ,‬أﻣﺎ اﻟﺧﯾﺎر اﻟﺛﺎﻧﻲ ﻓﮭو ﻣﻔﯾد ﻟﻣﻧﻊ ﺣدوث ﺗﺿﺎرب ﻓﻲ ﺑﯾﺎﻧﺎت اﻟﺟدول اذا‬
‫ﺗم ﺗﻌدﯾل ﻧﻔس اﻟﺳطر ﻣن ﻗﺑل ﻣﺳﺗﺧدﻣﯾن اﺛﻧﯾن أو أﻛﺛر ﻓﻲ ﻧﻔس اﻟوﻗت ‪ .‬ﻋﻠﻰ اﻟﻌﻣوم ﺑﻌد اﻻﻧﺗﮭﺎء ﻣن‬
‫ﺧطوات اﻟرﺑط ﺑﺷﻛل ﻛﺎﻣل ﻧﻘوم ﺑﺗﻔﻌﯾل ﺧﯾﺎري اﻟﺗﻌدﯾل واﻟﺣذف ﻓﻲ اﻷداة ‪ GridView‬ﺣﯾث ﻧظﻐط ﻋﻠﻰ‬
‫‪ Smart Tag‬وﻧﻘوم ﺑﺗﻔﻌﯾل اﻟﺧﯾﺎرﯾن ‪ Enable Editing‬و ‪Enable Deleting‬‬
‫‪- 15 -‬‬
‫ ﻋﺑر ﺗﻔﻌﯾل اﻟﺧﺎﺻﯾﺗﯾن‬GridView ‫ﻛﻣﺎ أﻧﮫ ﺑﺎﻹﻣﻛﺎن ﺗﻔﻌﯾل اﻟﺧﯾﺎرﯾن اﻟﺳﺎﺑﻘﯾن ﻣن ﺧﺻﺎﺋص اﻷداة‬
‫ وﺑﺎﻟﺗﺎﻟﻲ ﯾﺻﺑﺢ ﻛود اﻟﺻﻔﺣﺔ‬AutoGenerateUpdateButton ‫ و‬AutoGenerateDeleteButton
‫ إﻟﻰ اﻟﺟدول وذﻟك ﻷن اﻷداة‬- insert – ‫ﺷﺑﯾﮫ ﺑﺎﻟﺗﺎﻟﻲ ) ﻟﻘد ﻗﻣت ﺑﺣذف اﻟﺟزء اﻟﻣﺗﻌﻠق ﺑﺈﻣﻛﺎﻧﯾﺔ إﺿﺎﻓﺔ ﺳطر‬
: ( ‫ ﻻﺗﺳﻣﺢ ﺑﮭذه اﻟﻌﻣﻠﯾﺔ‬GridView
<div>
<asp:GridView ID="GridView1" runat="server"
DataKeyNames="id" DataSourceID="SqlDataSource1"
AutoGenerateDeleteButton="true" AutoGenerateEditButton="true" />

DeleteCommand="DELETE FROM [employees] WHERE [id] = @id"
SelectCommand="SELECT [id],[fname],[lname] FROM [employees]"
UpdateCommand="UPDATE [employees] SET [fname] = @fname, [lname] = @lname
WHERE [id] = @id">
<DeleteParameters>
<asp:Parameter Name="id" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="fname" Type="String" />
<asp:Parameter Name="lname" Type="String" />
</UpdateParameters>
</div>
‫ وﻗد ﺗم إﺳﻧﺎد ﻗﯾﻣﺔ‬, ‫ واﻟﺗﻲ ﺗﺣدﺛﻧﺎ ﻋﻧﮭﺎ ﻣﺳﺑﻘﺎ‬DataKeyNames ‫ﻻﺣظ ﻓﻲ اﻟﻛود اﻟﺳﺎﺑق وﺟود اﻟﺧﺎﺻﯾﺔ‬
‫ ( وھذه اﻟﻌﻣﻠﯾﺔ ﺿرورﯾﺔ ﻟﻧﺗﻣﻛن ﻣن إﺟراء ﻋﻣﻠﯾﺎت اﻟﺣذف واﻟﺗﻌدﯾل ﻋﻠﻰ‬id ‫اﻟﻣﻔﺗﺎح اﻷﺳﺎﺳﻲ ﻟﮭﺎ ) اﻟﺣﻘل‬
. ‫اﻟﺟدول‬
- 16 -
‫ﻋدم وﺟود ﺑﯾﺎﻧﺎت‬
‫ﺑﺎﻹﻣﻛﺎن ﺗﺣدﯾد ﺳﻠوك اﻷداة ‪ GridView‬ﻋﻧدﻣﺎ ﻻﯾﻛون ھﻧﺎك ﺑﯾﺎﻧﺎت ﻣرﺟﻌﺔ ﻣن ﻣﺻدر اﻟﺑﯾﺎﻧﺎت ‪ ,‬ﻛﺄن ﯾﻛون‬
‫اﻟﺟدول ﻓﺎرغ ﻣﺛﻼ ‪ ,‬ﯾﻣﻛن ﻓﻲ ھذه اﻟﺣﺎﻟﺔ إظﮭﺎر ﻋﺑﺎرة ﻟﻠﻣﺳﺗﺧدم ﺗﻔﯾد ﺑﻌدم وﺟود ﺑﯾﺎﻧﺎت وذﻟك ﻋﺑر اﻟﺧﺎﺻﯾﺔ‬
‫‪ , EmptyDataText‬ﻛﻣﺎ ﺗﺗوﻓر ﺧﺎﺻﯾﺔ ﺛﺎﻧﯾﺔ أﻛﺛر ﻏﻧﻰ وھﻲ ‪ EmptyDataTamplate‬واﻟﺗﻲ ﺗﺗﯾﺢ‬
‫ﺧﯾﺎرات أوﺳﻊ ﺳﻧﻌرﺿﮭﺎ ﺿﻣن اﻷﺳطر اﻟﻘﺎدﻣﺔ ‪.‬‬
‫ﻟﺗوﺿﯾﺢ ﻋﻣل اﻟﺧﺎﺻﺗﯾن اﻟﺳﺎﺑﻘﺗﯾن ﺳﻧﻘوم ﺑﺑﻧﺎء ﺻﻔﺣﺔ ﻟﻠﺑﺣث ﻋن ﻣوظف ﺣﺳب اﺳﻣﮫ ‪,‬وﻓﻲ ﺣﺎل ﻋدم وﺟود‬
‫ﻣوظف ﺑﮭذا اﻻﺳم ﺗﻘوم اﻷداة ‪ GridView‬ﺑﻌرض اﻟﻧص "ﻻﯾوﺟد ﻣوظف ﺑﮭذا اﻻﺳم" ﻛﻣﺎ ﺗوﺿﺢ اﻟﺻورة‬
‫ﻗم ﺑﺈﺿﺎﻓﺔ ﺻﻔﺣﺔ ﺟدﯾدة وأﺿف ﻋﻠﯾﮭﺎ أداة ‪ Button‬وأداة ‪ TextBox‬وأداة ‪ GridView‬ﺛم ﻗم ﺑرﺑطﮭﺎ ﻣﻊ‬
‫ﺟدول اﻟﻣوظﻔﯾن ‪ Employees‬وأﺿف ﺷرط أن ﯾﻘوم ﺑﻌرض اﻟﻣوظﻔﯾن اﻟذﯾن ﻟﮭم اﺳم ﻛﺎﻟﻧص اﻟﻣﻛﺗوب ﻓﻲ‬
‫اﻷداة ‪ TextBox‬ﻛﻣﺎ ﻓﻲ اﻟﺻورة اﻟﺗﺎﻟﯾﺔ ‪:‬‬
‫‪- 17 -‬‬
‫ و ﻧﻘوم ﺑﺈﺳﻧﺎد اﻟﻘﯾﻣﺔ " ﻻﯾوﺟد ﻣوظﻔﯾن ﺑﮭذا اﻻﺳم " إﻟﻰ اﻟﺧﺎﺻﯾﺔ‬GridView1 ‫ﻧﺧﺗﺎر اﻷداة‬
‫ ﺛم ﻧﻘوم ﺑﺈﺿﺎﻓﺔ اﻟﻛود اﻟﺗﺎﻟﻲ ﻓﻲ ﺣدث اﻟﻧﻘر ﻋﻠﻰ‬, Visible ‫ ﻟﻠﺧﺎﺻﯾﺔ‬false ‫ واﻟﻘﯾﻣﺔ‬, EmptyDataText
: search ‫اﻟزر‬
C# ‫ﻛود‬
GridView1.Visible = true;
VB ‫ﻛود‬
GridView1.Visible = true
: ‫أﻣﺎ ﻛود اﻟﺻﻔﺣﺔ ﻓﯾﻛون ﺑﺎﻟﺷﻛل اﻟﺗﺎﻟﻲ‬
<div>
<asp:TextBox ID="TextBox1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Search" onclick="Button1_Click" />
<hr />
<asp:GridView ID="GridView1" runat="server" Visible="false"
EmptyDataText="‫ "اﻻﺳﻢ ﺑﮭﺬا ﻣﻮظﻒ ﯾﻮﺟﺪ ﻻ‬/>

SelectCommand="SELECT * FROM [employees] WHERE ([fname] = @fname)" >
<SelectParameters>
<asp:ControlParameter ControlID="TextBox1" Name="fname"
PropertyName="Text" Type="String" />
</SelectParameters>
</div>
- 18 -
‫ﺗﻧﺳﯾق ﻣظﮭر اﻷداة ‪GridView‬‬
‫‪Header‬‬
‫‪AlternatingRows‬‬ ‫‪Rows‬‬
‫‪Pager‬‬
‫‪Footer‬‬
‫ﺗﺣﺗوي اﻷداة ‪ GridView‬ﻋﻠﻰ ﻣﺟﻣوﻋﺔ ﺿﺧﻣﺔ ﻣن اﻟﺧﺻﺎﺋص اﻟﺗﻲ ﺗﻔﯾد ﺑﺗﻧﺳﯾق ﻣظﮭر ھذه اﻷداة وﻣﻧﮭﺎ ‪:‬‬
‫‪ : HeaderStyle‬ﺗﻣﻛﻧﻧﺎ ﻣن ﺗﻧﺳﯾق ﻣظﮭر ﺳطر ﻋﻧﺎوﯾن اﻷﻋﻣدة ‪.‬‬ ‫‪‬‬

‫‪ : FooterStyle‬ﺗﻣﻛﻧﻧﺎ ﻣن ﺗﻧﺳﯾق ﻣظﮭر اﻟﺳطر اﻟﺳﻔﻠﻲ ) ﺑﺷﻛل اﻓﺗراﺿﻲ ﯾﻛون ھذا اﻟﺳطر ﻏﯾر‬ ‫‪‬‬
‫ظﺎھر (‪.‬‬
‫‪ : RowStyle‬ﺗﻣﻛﻧﻧﺎ ﻣن ﺗﻧﺳﯾق ﻣظﮭر ﺟﻣﯾﻊ أﺳطر اﻟﺑﯾﺎﻧﺎت ‪.‬‬ ‫‪‬‬
‫‪ : AlternatingRowStyle‬ﺗﻣﻛﻧﻧﺎ ﻣن ﺗﻧﺳﯾق ﻣظﮭر أﺳطر اﻟﺑﯾﺎﻧﺎت اﻟزوﺟﯾﺔ ‪ ,‬وﻋﻧد ﺗﺣدﯾد ﻗﯾم ﻟﮭذه‬ ‫‪‬‬
‫اﻟﺧﺎﺻﯾﺔ ﻓﺈن ھذه اﻷﺳطر اﻟزوﺟﯾﺔ ﺳﺗﺗﺟﺎھل اﻟﻘﯾم اﻟﻣﺣددة ﻋﺑر اﻟﺧﺎﺻﯾﺔ ‪. RowStyle‬‬
‫‪ : PagerStyle‬ﺗﻣﻛﻧﻧﺎ ﻣن ﺗﻧﺳﯾق ﻣظﮭر ﺳطر اﻟﺗﻧﻘل ﺑﯾن ﺻﻔﺣﺎت اﻷداة ‪ GridView‬وذﻟك ﻋﻧد‬ ‫‪‬‬
‫ﺗﻔﻌﯾل اﻟﺧﺎﺻﯾﺔ ‪. AllowPaging‬‬
‫‪ : SelectedRowStyle‬ﺗﻣﻛﻧﻧﺎ ﻣن ﺗﻧﺳﯾق ﻣظﮭر ﻣﺧﺗﻠف ﻟﻠﺳطر اﻟﺣﺎﻟﻲ اﻟذي ﺗم اﺧﺗﯾﺎره ‪.‬‬ ‫‪‬‬
‫ﺟﻣﯾﻊ اﻟﺧﺻﺎﺋص اﻟﺳﺎﺑﻘﺔ ﺗﺣﺗوي ﻋﻠﻰ اﻟﺧﺎﺻﯾﺔ ‪ CssClass‬واﻟﺗﻲ ﺗﺗﯾﺢ إﻣﻛﺎﻧﯾﺔ ﺗﺣدﯾد اﻟﺗﻧﺳﯾق ﺿﻣن ﻛود‬
‫‪ CSS‬وﻣن ﺛم ﯾﺗم ﺗﺣدﯾد اﺳم اﻟﺻف اﻟﻣراد ﺗطﺑﯾﻘﮫ ‪.‬‬
‫ﻣﺛﺎل ‪:‬‬
‫ﯾﻌرض ھذا اﻟﻣﺛﺎل ﻛﯾﻔﯾﺔ ﺗﻧﺳﯾق ﻣظﮭر اﻷداة ‪ GridView‬ﻋﺑر ﺻﻔوف ‪ CSS‬واﻟﺧﺎﺻﯾﺔ ‪. CssClass‬‬
‫"‪<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewFormatting.aspx.cs‬‬
‫>‪Inherits="GridViewFormatting" %‬‬
‫‪- 19 -‬‬
<!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>GridView Formatting</title>
<style type="text/css">
.grid
{ font:16px Arial, Sans-Serif; }
.grid td, .grid th
{ padding:10px; }
.header
{ text-align:left;
color:white;
background-color:blue;
}
.row td
{ border-bottom:solid 1px blue; }
.alternating
{ background-color:#eeeeee; }
.alternating td
{ border-bottom:solid 1px blue; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" PageSize="5"

DataSourceID="SqlDataSource1" ShowFooter="True"
CssClass="grid"
HeaderStyle-CssClass="header"
RowStyle-CssClass="row"
AlternatingRowStyle-CssClass="alternating" />

ConnectionString="<%$ ConnectionStrings:MyConnectionString %>"
SelectCommand="SELECT [Id], [Name], [Mark] FROM [MyTable]" />
</div>
</form>
</body>
</html>
‫ ﺣﯾث ﻧﺿﻐط ﺑﺎﻟﺑداﯾﺔ ﻋﻠﻰ اﻟـ‬, ‫ﻛﻣﺎ ﺗوﺟد ﻣﺟﻣوﻋﺔ ﻣن اﻟﺗﻧﺳﯾﻘﺎت اﻟﺟﺎھزة واﻟﺗﻲ ﯾﻣﻛن ﺗطﺑﯾﻘﮭﺎ ﺑﻛل ﺳﮭوﻟﺔ‬
‫ ﺳﺗظﮭر ﻧﺎﻓذة ﺗﺣﺗوي ﻋﻠﻰ ﻣﺟﻣوﻋﺔ اﻟﺗﻧﺳﯾﻘﺎت‬Auto Format ‫ ﺛم ﻧﺧﺗﺎر‬GridView ‫ ﻟﻸداة‬smart tag
. ‫ ﻛﻣﺎ ﻧﺳﺗطﯾﻊ اﻟﺗﻌدﯾل ﻋﻠﻰ ھذه اﻟﺗﻧﺳﯾﻘﺎت إن أردﻧﺎ ذﻟك‬, ‫ﻧﺧﺗﺎر ﻣﻧﮭﺎ ﻣﺎﯾﻧﺎﺳﺑﻧﺎ ﻟﺗطﺑﯾﻘﮫ‬
- 20 -
‫أﻣﺎ ﺑﺎﻟﻧﺳﺑﺔ ﻟﻠﺳطرﯾن ‪ Header , Footer‬ﻓﺑﺈﻣﻛﺎﻧﻧﺎ اﻟﺗﺣﻛم ﻓﻲ ظﮭورھﻣﺎ أو إﺧﻔﺎﺋﮭﻣﺎ وذﻟك ﻋﺑر اﻟﺧﺎﺻﯾﺗﯾن‬
‫‪ ShowHeader , ShowFooter‬ﻋﻠﻰ اﻟﺗواﻟﻲ ‪.‬‬
‫ﺗﺧﺻﯾص اﻟﺣﻘول ﻓﻲ اﻷدة ‪GridView‬‬
‫ﻓﻲ ﺟﻣﯾﻊ اﻟﻔﻘرات اﻟﺳﺎﺑﻘﺔ ﻛﻧﺎ ﻧدع اﻷداة ‪ GridView‬ﺗﻘوم ﺑﺗوﻟﯾد اﻟﺣﻘول وﻋﻧوﻧﺗﮭﺎ ﺑﺷﻛل ﺗﻠﻘﺎﺋﻲ وﺑدون ﺗدﺧل‬
‫ﻣن ﻗﺑﻠﻧﺎ ‪ ,‬وﻟﻛن ھذا ﻟﯾس ﺑﺎﻷﺳﻠوب اﻷﻓﺿل وﻗد ﻻ ﯾﻠﺑﻲ ﺣﺎﺟﺎت اﻟﻣﺑرﻣﺞ ‪ ,‬ﺣﯾث إن ﻋﻧﺎوﯾن اﻟﺣﻘول ﺗﺄﺧذ‬
‫ﻗﯾﻣﮭﺎ ﻛﺄﺳﻣﺎء اﻟﺣﻘول ﻓﻲ ﺟدول ﻗﺎﻋدة اﻟﺑﯾﺎﻧﺎت وھذا أﻣر ﻏﯾر ﻣﺳﺗﺣﺳن ‪ ,‬ﻛﻣﺎ أن اﻟﺑﯾﺎﻧﺎت ﺗﻌرض داﺋﻣﺎ ﻋﻠﻰ‬
‫ﺷﻛل ﻧص ﻓﻣﺎذا ﻟو أردﻧﺎ أن ﯾﺗم ﻋرض ﺻورة ؟ ﻛﯾف ﻧﺳﺗطﯾﻊ إﺿﺎﻓﺔ أداة ‪ DropDownList‬داﺧل اﻷداة‬
‫‪ , GridView‬ﻛﯾف ﻧﺿﯾف أدوات اﻟﺗﺣﻘق إﻟﻰ اﻷداة ‪ GridView‬أﺛﻧﺎء ﻋﻣﻠﯾﺔ اﻟﺗﻌدﯾل ؟ ﻛل ھذه اﻷﺳﺋﻠﺔ‬
‫ﺑﺎﻹﺿﺎﻓﺔ إﻟﻰ أﻣور أﺧرى ﺳﺗﺗم ﻣﻧﺎﻗﺷﺗﮭﺎ ﺿﻣن ھذه اﻟﻔﻘرة واﻟﻔﻘرات اﻟﻘﺎدﻣﺔ ‪.‬‬
‫‪- 21 -‬‬
‫ﺗدﻋم اﻷداة ‪ GridView‬ﺳﺑﻌﺔ أﻧﻣﺎط ﻟﻠﺣﻘول وھﻲ ‪:‬‬
‫‪ : BoundField‬ﺗﻣﻛﻧﻧﺎ ﻣن ﻋرض اﻟﺑﯾﺎﻧﺎت ﻛﻧص ﻋﺎدي ‪.‬‬ ‫‪‬‬

‫‪ : CheckBoxField‬ﺗﻣﻛﻧﻧﺎ ﻣن ﻋرض اﻟﺑﯾﺎﻧﺎت ﻛﺄداة اﺧﺗﯾﺎر ‪. CheckBox‬‬ ‫‪‬‬
‫‪ : ButtonField‬ﺗﻣﻛﻧﻧﺎ ﻣن ﻋرض اﻟﺑﯾﺎﻧﺎت ﻛزر )‪.( Button, LinkButton, ImageButton‬‬ ‫‪‬‬
‫‪ : HyperLinkField‬ﺗﻣﻛﻧﻧﺎ ﻣن ﻋرض اﻟﺑﯾﺎﻧﺎت ﻛراﺑط ﺗﺷﻌﺑﻲ ‪.‬‬ ‫‪‬‬
‫‪ : ImageField‬ﺗﻣﻛﻧﻧﺎ ﻣن ﻋرض اﻟﺑﯾﺎﻧﺎت ﻛﺻورة ‪.‬‬ ‫‪‬‬
‫‪ : TemplateField‬ﺗﻣﻛﻧﻧﺎ ﻣن ﺗﺧﺻﯾص أﺳﻠوب ﻋرض اﻟﺑﯾﺎﻧﺎت وﻓق أي ﺷﻛل ﻧرﻏب ﺑﮫ ‪.‬‬ ‫‪‬‬
‫‪ : CommandField‬ﺗﻣﻛﻧﻧﺎ ﻣن إظﮭﺎر رواﺑط ﻟﻌﻣﻠﯾﺎت اﻻﺧﺗﯾﺎر واﻟﺣذف واﻟﺗﻌدﯾل ‪.‬‬ ‫‪‬‬
‫ﻟﻛل ﻧﻣط ﻣن اﻷﻧﻣﺎط اﻟﺳﺎﺑﻘﺔ ﻣﺟﻣوﻋﺔ ﻛﺑﯾرة ﻣن اﻟﺧﺻﺎﺋص ‪ ,‬ﺳﻧﻘوم ﺑﺷرﺣﮭﺎ ﻣﻊ ﺗطﺑﯾق أﻣﺛﻠﺔ ﻋﻠﻰ ﻛل ﻣﻧﮭﺎ‬
‫ﺿﻣن اﻟﻔﻘرات اﻟﺗﺎﻟﯾﺔ ‪.‬‬
‫اﺳﺗﺧدام ﻧﻣط اﻟﺣﻘول ‪BoundFiled‬‬
‫وھو أﺑﺳط ﻧﻣط ﻣن أﻧﻣﺎط اﻟﺣﻘول ‪ ,‬ﺣﯾث ﯾﺗم ﻋرض اﻟﺑﯾﺎﻧﺎت ﻛﻧص ﻋﺎدي )وھو اﻟﻧﻣط اﻟذي ﻧﺷﺎھده ﺣﺗﻰ‬
‫اﻵن ( ‪ ,‬وﻓﻲ أﺳﻠوب اﻟﺗﻌدﯾل ﯾﺗم ﻋرض اﻟﺑﯾﺎﻧﺎت ﺿﻣن أداوت ‪ TextBox‬ﻓﻲ ﻧﻣط ‪. SingleLine‬‬
‫ﺧﺻﺎﺋص اﻟﻧﻣط ‪: BoundField‬‬
‫‪ : DataField‬ﺗﺳﻣﺢ ﺑﺗﺧﺻﯾص اﺳم ﺑرﻣﺟﻲ ﻟﻠﺣﻘل ‪.‬‬ ‫‪‬‬

‫‪ : DataFormatString‬ﺗﺳﻣﺢ ﺑﺗطﺑﯾق ﺗﻧﺳﯾق ﻋﻠﻰ اﻟﺑﯾﺎﻧﺎت اﻟﻣﻌروﺿﺔ ‪ .‬ﻛﺗﻧﺳﯾق اﻟﻌﻣﻼت أو أرﻗﺎم‬ ‫‪‬‬
‫اﻟﮭواﺗف وﻏﯾره ‪.‬‬
‫‪ : ApplyFormatInEditMode‬ﺗﺳﻣﺢ ﺑﺗطﺑﯾق ﺗﻧﺳﯾق ﻣﻌﯾن ﻋﻠﻰ اﻟﻧص ﻓﻲ ﺣﺎﻟﺔ اﻟﺗﻌدﯾل ﺣﯾث‬ ‫‪‬‬
‫ﺗﺳﺗﺧدم ‪. DataFormatString‬‬
‫‪ : ShowHeader‬ﻟﻌرض أو إﺧﻔﺎء ﻋﻧوان اﻟﺣﻘل ‪.‬‬ ‫‪‬‬
‫‪ : HeaderText‬ﺗﺳﻣﺢ ﺑﺗﺧﺻﯾص ﻋﻧوان ﻟﻠﺣﻘل ‪.‬‬ ‫‪‬‬
‫‪ : HeaderStyle‬ﺗﺳﻣﺢ ﺑﺗطﺑﯾق ﺗﻧﺳﯾق ﻋﻠﻰ ﻋﻧوان اﻟﺣﻘل ‪.‬‬ ‫‪‬‬
‫‪ : HeaderImageUrl‬ﺗﻣﻛﻧﻧﺎ ﻣن ﻋرض ﺻورة ﻛﻌﻧوان ﻟﻠﺣﻘل ﺑدﻻ ﻣن اﻟﻧص ‪.‬‬ ‫‪‬‬
‫‪ : HtmlEncode‬ﻟﺗﺣدﯾد إﻣﻛﺎﻧﯾﺔ ﻋرض ﺗﻧﺳﯾﻘﺎت ‪ HTML‬أم ﻻ ‪ ,‬ﺣﯾث ﺗﻛون ھذه اﻟﺗﻧﺳﯾﻘﺎت ﻣﺧزﻧﺔ‬ ‫‪‬‬
‫ﻣﻊ اﻟﻧص ﻓﻲ ﻗﺎﻋدة اﻟﺑﯾﺎﻧﺎت ‪.‬‬
‫‪ : ItemStyle‬ﺗﺳﻣﺢ ﺑﺗﺣدﯾد ﺗﻧﺳﯾق ﻋﻠﻰ اﻟﺑﯾﺎﻧﺎت اﻟﻣﻌروﺿﺔ ‪ ,‬ﻛﺣﺟم اﻟﺧط وﻟوﻧﮫ وﻏﯾره ‪.‬‬ ‫‪‬‬
‫‪ : NullDisplayText‬ﺗﻣﻛﻧﻧﺎ ﻣن ﺗﺣدﯾد ﻧص ﺑدﯾل ﻟﯾﺗم ﻋرﺿﮫ ﻓﻲ ﺣﺎل ﻛﺎﻧت اﻟﻘﯾﻣﺔ اﻟﻣرﺟﻌﺔ ھﻲ‬ ‫‪‬‬
‫‪. Null‬‬
‫‪ : ReadOnly‬ﻟﻣﻧﻊ إﻣﻛﺎﻧﯾﺔ ﺗﻌدﯾل ﻗﯾﻣﺔ اﻟﺣﻘل ﺣﺗﻰ ﻓﻲ ﺣﺎﻟﺔ اﻟﺗﻌدﯾل ) ﻣﺛل ﺣﻘل اﻟﻣﻔﺗﺎح اﻟرﺋﯾﺳﻲ( ‪.‬‬ ‫‪‬‬
‫‪ : SortExpression‬ﺗﺳﻣﺢ ﺑﺈﻣﻛﺎﻧﯾﺔ ﺗرﺗﯾب ﺑﯾﺎﻧﺎت اﻟﺟدول وﻓق ھذا اﻟﺣﻘل ‪.‬‬ ‫‪‬‬
‫‪- 22 -‬‬
‫‪ : Visible ‬ﻟﻌرض أو إﺧﻔﺎء ھذا اﻟﺣﻘل ‪.‬‬
‫ﻧﻼﺣظ أن ﻣﻌظم ھذه اﻟﺧﺻﺎﺋص ﺗﺗﻌﻠق ﺑﻣظﮭر اﻟﺑﯾﺎﻧﺎت وﻟﯾﺳت ﺧﺻﺎﺋص ذات طﺎﺑﻊ ﺑرﻣﺟﻲ ‪.‬‬
‫ﻣﺛﺎل ‪:‬‬
‫اﻓﺗﺢ اﻟﺟدول ‪ employees‬ﺿﻣن ﻗﺎﻋدة اﻟﺑﯾﺎﻧﺎت وﻋدل ﻗﯾﻣﺔ اﻟﺣﻘل ‪ salary‬إﻟﻰ ‪ NULL‬ﻷﺣد اﻟﻣوظﻔﯾن‬
‫ﻟﺗﺻﺑﺢ ﺑﯾﺎﻧﺎت اﻟﺟدول ﻣﺷﺎﺑﮭﺔ ﻟﻠﺗﺎﻟﻲ ‪:‬‬
‫اﻟﻣطﻠوب ھو ﻋرض ﺑﯾﺎﻧﺎت اﻟﺟدول اﻟﺳﺎﺑق ﺿﻣن ﻣﺗﺻﻔﺢ اﻻﻧﺗرﻧت ﺑﺎﻷﺳﻠوب اﻟﺗﺎﻟﻲ ‪:‬‬
‫ﺣﯾث ﺗم إﻋطﺎء اﻟﺣﻘول ﻋﻧﺎوﯾن ﻣﺧﺗﻠﻔﺔ ﻋﻣﺎ ھﻲ ﻓﻲ ﻗﺎﻋدة اﻟﺑﯾﺎﻧﺎت ‪ ,‬ﺑﺎﻹﺿﺎﻓﺔ إﻟﻰ أن ﻗﯾم اﻟﺣﻘل ‪ salary‬ﻗد‬
‫أﺧذت ﺗﻧﺳﯾق اﻟﻌﻣﻠﺔ وﺗم ظﮭور اﻟﻌﺑﺎرة "ﻏﯾر ﻣﺣدد" ﺑدﻻ ﻣن ‪ , NULL‬أﻣﺎ ﻛود اﻟﺻﻔﺣﺔ ﻓﮭو ‪:‬‬
‫>‪<div‬‬
‫"‪<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False‬‬
‫>"‪DataKeyNames="id" DataSourceID="SqlDataSource1‬‬
‫>‪<Columns‬‬
‫"‪" InsertVisible="False‬اﻟﺮﻗﻢ"=‪<asp:BoundField DataField="id" HeaderText‬‬
‫>‪ReadOnly="True" SortExpression="id" /‬‬
‫"اﻻﺳﻢ"=‪<asp:BoundField DataField="fname" HeaderText‬‬
‫>‪SortExpression="fname" /‬‬
‫"اﻟﻜﻨﯿﺔ"=‪<asp:BoundField DataField="lname" HeaderText‬‬
‫>‪SortExpression="lname" /‬‬
‫‪- 23 -‬‬
<asp:CheckBoxField DataField="marriage" HeaderText="‫"ﻣﺘﺰوج؟‬

<asp:BoundField DataField="salary" HeaderText="‫"اﻟﺮاﺗﺐ‬
SortExpression="salary" DataFormatString="{0:c}"
NullDisplayText="‫ "ﻏﯿﺮﻣﺤﺪد‬/>
<asp:BoundField DataField="deptId" HeaderText="‫"اﻟﻘﺴﻢ‬
SortExpression="deptId" />
<asp:BoundField DataField="photo" HeaderText="‫"ﺻﻮرةﺷﺨﺼﯿﺔ‬
</Columns>
</asp:GridView>
SelectCommand="SELECT * FROM [employees]"></asp:SqlDataSource>
</div>
‫ ﻓﺄﻧت ﻋزﯾزي‬, ‫ أﺳﻠوب ﺳﮭل ﺟدا ﻟﻠﺗﻌدﯾل ﻋﻠﻰ ﺧﺻﺎﺋص اﻟﺣﻘول‬Visual Studio ‫ﺗوﻓر ﻟﻧﺎ ﻣﻧﺻﺔ اﻟﻌﻣل‬
‫ ﻟﻔﻌل‬Fields ‫ إﻧﻣﺎ ﺑﺎﻹﻣﻛﺎن اﻻﺳﺗﻌﺎﻧﺔ ﺑﺎﻟﻧﺎﻓذة‬, ‫اﻟﻣﺑرﻣﺞ ﻏﯾر ﻣﺿطر ﻟﻛﺗﺎﺑﺔ اﻟﺧﺻﺎﺋص اﻟﺳﺎﺑﻘﺔ ﺑﺷﻛل ﯾدوي‬
: ‫ذﻟك ﻋﺑر اﻟﺧطوات اﻟﺗﺎﻟﯾﺔ‬
‫ اﻟﺗﻲ أﺿﻔﻧﺎھﺎ‬GridView ‫ﺿﻣن اﻟﺻﻔﺣﺔ اﻟﺗﻲ ﻧﻌﻣل ﻋﻠﯾﮭﺎ اﻧﺗﻘل إﻟﻰ وﺿﻊ اﻟﺗﺻﻣﯾم و اﻧﻘر ﻋﻠﻰ اﻷداة‬
Edit Columns ‫ ( اﻧﻘر ﻋﻠﯾﮫ و اﺧﺗر‬smart tag ‫ ﺳﯾظﮭر ﺳﮭم ﺻﻐﯾر ) ﯾدﻋﻰ‬, ‫ﻣﺳﺑﻘﺎ‬
‫ وﻻﺣظ ظﮭور ﺟﻣﯾﻊ‬salary ‫ ﻗم ﺑﺗﺣدﯾد اﻟﺣﻘل‬, Feilds ‫ﺳﺗﻔﺗﺢ اﻵن ﻧﺎﻓذة ﺧﺻﺎﺋص اﻟﺣﻘول واﻟﺗﻲ ﺗدﻋﻰ‬
: ‫ ﻛﻣﺎ ﺗوﺿﺢ اﻟﺻورة اﻟﺗﺎﻟﯾﺔ‬, ‫ﺧﺻﺎﺋﺻﮫ ﻣﻊ اﻟﻘﯾم اﻟﺟدﯾدة اﻟﺗﻲ ﻋدﻟﻧﺎ ﻋﻠﯾﮭﺎ‬
- 24 -
‫إن ھذه اﻟﻧﺎﻓذة ﺗﺳﮭل اﻟﺗﻌﺎﻣل ﻣﻊ ﺧﺻﺎﺋص اﻟﺣﻘول وﻟﻛن ﻻﺗﻌﺗﻣد ﻋﻠﯾﮭﺎ ﺑﺎﻟﻛﺎﻣل وﺗﻧﺳﻰ أﺳﻠوب اﻟﺗﻌدﯾل ﻋﻠﻰ‬
‫اﻟﺧﺻﺎﺋص ﻣن ﺧﻼل اﻟﻛود ﺑﺷﻛل ﻣﺑﺎﺷر ‪.‬‬
‫اﺳﺗﺧدام ﻧﻣط اﻟﺣﻘول ‪CheckBoxFields‬‬
‫ﯾﺳﺗﺧدم ھذا اﻟﻧﻣط ﻣﻊ ﺑﯾﺎﻧﺎت اﻟﺣﻘول اﻟﺗﻲ ﺗدﻋم ﻗﯾﻣﺗﯾن ﻓﻘط ﻛﺎﻟﻘﯾم اﻟﻣﻧطﻘﯾﺔ ‪ True , False‬ﺣﯾث ﯾﺗم‬
‫ﻋرﺿﮭﺎ ﻋﻠﻰ ﺷﻛل أداة اﻟﺗﺣﻛم ‪. CheckBox‬‬
‫إن اﻟﺻف ‪ CheckBoxField‬ﯾرث ﻣن اﻟﺻف ‪ BoundFeild‬وھذا ﯾﻌﻧﻲ أن اﻟﻧﻣط ‪CheckBoxFeild‬‬

‫ﯾدﻋم ﺟﻣﯾﻊ اﻟﺧﺻﺎﺋص اﻟﻣدﻋوﻣﺔ ﻓﻲ اﻟﻧﻣط ‪ BoundField‬واﻟﺗﻲ ﻧﺎﻗﺷﻧﺎھﺎ ﻣﺳﺑﻘﺎ ‪ ,‬ﺑﺎﻹﺿﺎﻓﺔ إﻟﻰ اﻟﺧﺎﺻﯾﺔ‬
‫‪ : Text ‬ﺗﺳﻣﺢ ﺑﺈظﮭﺎر ﻧص ﺑﺟﺎﻧب ﻛل ‪ CheckBox‬ﺿﻣن اﻟﺣﻘل ‪.‬‬

‫‪- 25 -‬‬
‫ ( ھو ﻣن اﻟﻧﻣط‬marriage ) "‫ﺧﻼل اﻟﻣﺛﺎل اﻟذي ﻗﻣﻧﺎ ﺑﺗطﺑﯾﻘﮫ ﺿﻣن اﻟﻔﻘرة اﻟﺳﺎﺑﻘﺔ ﻧﺟد أن اﻟﺣﻘل "ﻣﺗزوج؟‬
‫ ) ﻋﻠﻣﺎ أﻧﻧﺎ ﻟم ﻧﻘم ﺑﺗﺣدﯾد ھذا اﻟﻧﻣط ! ( ﺑﺷﻛل ﺗﻠﻘﺎﺋﻲ ﻓﺈن ﺟﻣﯾﻊ اﻟﺣﻘول اﻟﺗﻲ ﻟﮭﺎ ﻧﻣط‬CheckBoxFeild
‫ ﺿﻣن‬CheckBoxField ‫ ﺿﻣن ﻗﺎﻋدة اﻟﺑﯾﺎﻧﺎت ﯾﺗم إظﮭﺎرھﺎ ﻋﻠﻰ ﺷﻛل ﺣﻘل ﻣن اﻟﻧﻣط‬Boolean ‫اﻟﺑﯾﺎﻧﺎت‬
. ‫أدوات ﻋرض اﻟﺑﯾﺎﻧﺎت‬
: "marriage" ‫وﻟو راﺟﻌﻧﺎ ﻛود اﻟﺻﻔﺣﺔ ﺳﻧﺟد ھذا اﻟﻧﻣط ﻣﺳﺗﺧدم ﻣﻊ اﻟﺣﻘل‬
<div>
<Columns>
<asp:BoundField DataField="id" HeaderText="‫ "اﻟﺮﻗﻢ‬InsertVisible="False"
<asp:BoundField DataField="fname" HeaderText="‫"اﻻﺳﻢ‬
<asp:BoundField DataField="lname" HeaderText="‫"اﻟﻜﻨﯿﺔ‬
<asp:CheckBoxField DataField="marriage" HeaderText="‫"ﻣﺘﺰوج؟‬
<asp:BoundField DataField="salary" HeaderText="‫"اﻟﺮاﺗﺐ‬
SortExpression="salary" DataFormatString="{0:c}"
NullDisplayText="‫ "ﻏﯿﺮﻣﺤﺪد‬/>
<asp:BoundField DataField="deptId" HeaderText="‫"اﻟﻘﺴﻢ‬
<asp:BoundField DataField="photo" HeaderText="‫"ﺷﺨﺼﯿﺔ ﺻﻮرة‬
</Columns>
</asp:GridView>
SelectCommand="SELECT * FROM [employees]"></asp:SqlDataSource>
</div>
‫ أﻣﺎ ﻓﻲ وﺿﻌﯾﺔ اﻟﺗﻌدﯾل ﻓﯾﺗم‬, ‫ ﻓﻲ وﺿﻌﯾﺔ اﻟﻌرض‬Disable ‫ ﺗﻛون ﻓﻲ ﺣﺎﻟﺔ‬CheckBox ‫ﻧﻼﺣظ أن اﻷداة‬
. ‫ﺗﻔﻌﯾﻠﮭﺎ وﺑﺎﻟﺗﺎﻟﻲ ﯾﻣﻛن ﺗﻐﯾﯾر اﻟﻘﯾﻣﺔ اﻟﻣﻘﺎﺑﻠﺔ ﻟﮭﺎ ﺿﻣن ﺟدول ﻗﺎﻋدة اﻟﺑﯾﺎﻧﺎت‬
- 26 -
‫اﺳﺗﺧدام ‪CommandFields‬‬
‫ﻧﺳﺗﺧدم ﻧﻣط اﻟﺣﻘول ‪ CommandFields‬ﻟﺗﺧﺻﯾص ﻣظﮭر أزرار اﻻﺧﺗﯾﺎر واﻟﺗﻌدﯾل واﻟﺗﺣدﯾث واﻟﺣذف‬
‫وإﻟﻐﺎء اﻷﻣر ) ‪ ( Edit, Delete, Update, Cancel, and Select‬وﯾﺗم ھذا ﻓﻲ ﺣﺎل ﺗﺣدﯾد ظﮭور ھذه‬
‫اﻟﺧﯾﺎرات ‪ ,‬ﺣﯾث ﺗﻛون ﻏﯾر ظﺎھرة ﻓﻲ اﻟﺣﺎﻟﺔ اﻻﻓﺗراﺿﯾﺔ ‪.‬‬
‫ﺳﻧﻘوم ﺑﺎﻟﺑداﯾﺔ ﺑﺗطﺑﯾق ﻣﺛﺎل ﯾوﺿﺢ ﻋﻣل ھذا اﻟﻧﻣط ﻣن اﻟﺣﻘول ﺛم ﻧﺳﺗﻌرض ﺑﻌد ذﻟك ﻣﺟﻣوﻋﺔ اﻟﺧﺻﺎﺋص‬
‫اﻟﻣرﺗﺑطﺔ ﺑﮫ ‪.‬‬
‫ﻗم ﺑﺈﻧﺷﺎء ﺻﻔﺣﺔ ﺟدﯾدة وأﺿف أداة ‪ GridView‬و ارﺑطﮭﺎ ﻣﻊ ﻗﺎﻋدة و ﻗم ﺑﺗﻔﻌﯾل ﺧﯾﺎرات اﻹﺿﺎﻓﺔ واﻟﺣذف‬
‫واﻟﺗﻌدﯾل ﻋﻧد ﺿﺑط إﻋدادات اﻻﺗﺻﺎل ﺑﺎﻟﺟدول ) ﺗم ﺗوﺿﯾﺢ ھذه اﻟﺧطوات ﺿﻣن ﻓﺻل اﻟﺗﻌﺎﻣل ﻣﻊ اﻷداة‬
‫‪ ( SqlDataSource‬ﻛﻣﺎ ﺗوﺿﺢ اﻟﺻور اﻟﺗﺎﻟﯾﺔ ‪:‬‬
‫‪- 27 -‬‬
‫ﺑﻌد اﻻﻧﺗﮭﺎء ﻣن إﻋداد ﺑﺎﻗﻲ ﺧطوات اﻻﺗﺻﺎل ﺑﺎﻟﺟدول ‪ ,‬ﻧﺿﻐط ﻋﻠﻰ ‪ smart tag‬ﺛم ﻧﻔﻌل اﻟﺧﯾﺎرﯾن‬
‫‪ Enable Editing‬و ‪Enable Deleting‬‬
‫ﺑﺎﻹﻣﻛﺎن اﻵن ﺗﺷﻐﯾل اﻟﺻﻔﺣﺔ اﻟﺳﺎﺑﻘﺔ وإﺟراء ﻋﻣﻠﯾﺎت اﻟﺗﻌدﯾل واﻟﺣذف ﻋﻠﻰ اﻟﺑﯾﺎﻧﺎت وﺳﺗﻛون اﻟﺻﻔﺣﺔ‬
‫ﻛﺎﻟﺗﺎﻟﻲ ‪:‬‬
‫‪- 28 -‬‬
: ‫أﻣﺎ ﻛود اﻟﺻﻔﺣﺔ ﻓﯾﻛون ﻛﺎﻟﺗﺎﻟﻲ‬
<div>

<Columns>
<asp:CommandField ShowDeleteButton="True" ShowEditButton="True" />
<asp:BoundField DataField="deptId" HeaderText="deptId"
</Columns>
</asp:GridView>
DeleteCommand="DELETE FROM [employees] WHERE [id] = @id"
SelectCommand="SELECT * FROM [employees]"
UpdateCommand="UPDATE [employees] SET [fname] = @fname, [lname] = @lname,
[marriage] = @marriage, [salary] = @salary,
[deptId] = @deptId, [photo] = @photo WHERE [id] = @id" >
<DeleteParameters>
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="marriage" Type="Boolean" />
<asp:Parameter Name="salary" Type="Int32" />
<asp:Parameter Name="deptId" Type="Int32" />
- 29 -
‫>‪<asp:Parameter Name="photo" Type="String" /‬‬

‫>‪<asp:Parameter Name="id" Type="Int32" /‬‬
‫>‪</UpdateParameters‬‬
‫>‪</asp:SqlDataSource‬‬
‫>‪</div‬‬
‫ﻻﺣظ ﺑﺄﻧﻲ ﻗﻣت ﻓﻲ اﻟﻛود اﻟﺳﺎﺑق ﺑﺣذف ﻋﺑﺎرة اﻹﺿﺎﻓﺔ ‪ Insert‬ﺿﻣن اﻷداة ‪ SqlDataSource1‬وذﻟك‬
‫ﻷن اﻷداة ‪ GridView‬ﻻﺗدﻋم ھذه اﻟﻌﻣﻠﯾﺔ ﺑﺷﻛﻠﮭﺎ اﻻﻓﺗراﺿﻲ ‪.‬‬
‫ﻓﻲ اﻟﻛود اﻟﺳﺎﺑق ﻓﺈن ﻧﻣط اﻟﺣﻘول ‪ CommandField‬ھو اﻟذي أﺗﺎح ﻟﻧﺎ اﻟزرﯾن ‪ Edit , Delete‬وذﻟك ﻋﺑر‬
‫ﺗﻔﻌﯾل اﻟﺧﺎﺻﯾﺗﯾن ‪ ShowEditButton‬و ‪. ShowDeleteButton‬‬
‫ﻧﻣط اﻟﺣﻘول ‪ CommandFields‬ﯾدﻋم اﻟﺧﺻﺎﺋص اﻟﺗﺎﻟﯾﺔ ‪:‬‬
‫‪ : ButtonType‬ﻟﺗﺣدﯾد ﻧوع اﻷداة اﻟﺗﻲ ﺳﺗظﮭر ﺿﻣن ھذا اﻟﺣﻘل وﯾﻣﻛن أن ﺗﺄﺧذ إﺣدى اﻟﻘﯾم‬ ‫‪‬‬
‫‪. Button, Image, Link‬‬
‫‪ : ShowSelectButton‬ﯾﺳﺗﺧدم ﻟﻌرض زر اﻻﺧﺗﯾﺎر ‪. Select‬‬ ‫‪‬‬
‫‪ : SelectText‬ﻟﺗﺣدﯾد ﻧص ﯾظﮭر ﻋﻠﻰ زر اﻻﺧﺗﯾﺎر ‪.‬‬ ‫‪‬‬
‫‪ : SelectImageUrl‬ﻟﺗﺣدﯾد ﺻورة ﺗظﮭر ﻛزر اﻻﺧﺗﯾﺎر ‪.‬‬ ‫‪‬‬
‫‪ : ShowEditButton‬ﯾﺳﺗﺧدم ﻟﻌرض زر اﻟﺗﻌدﯾل ‪. Edit‬‬ ‫‪‬‬
‫‪ : EditText‬ﻟﺗﺣدﯾد ﻧص ﯾظﮭر ﻋﻠﻰ زر اﻟﺗﻌدﯾل ‪.‬‬ ‫‪‬‬
‫‪ : EditImageUrl‬ﻟﺗﺣدﯾد ﺻورة ﺗظﮭر ﻛزر ﺗﻌدﯾل ‪.‬‬ ‫‪‬‬
‫‪ : ShowDeleteButton‬ﯾﺳﺗﺧدم ﻟﻌرض زر اﻟﺣذف ‪. Delete‬‬ ‫‪‬‬
‫‪ : DeleteText‬ﻟﺗﺣدﯾد ﻧص ﯾظﮭر ﻋﻠﻰ زر اﻟﺣذف ‪.‬‬ ‫‪‬‬
‫‪ : DeleteImageUrl‬ﻟﺗﺣدﯾد ﺻورة ﺗظﮭر ﻛزر ﺣذف ‪.‬‬ ‫‪‬‬
‫‪ : ShowInsertButton‬ﯾﺳﺗﺧدم ﻟﻌرض زر اﻹﺿﺎﻓﺔ ‪. Insert‬‬ ‫‪‬‬
‫‪ : InsertText‬ﻟﺗﺣدﯾد ﻧص ﯾظﮭر ﻋﻠﻰ زر اﻹﺿﺎﻓﺔ ‪.‬‬ ‫‪‬‬
‫‪ : InsertImageUrl‬ﻟﺗﺣدﯾد ﺻورة ﺗظﮭر ﻛزر إﺿﺎﻓﺔ ‪.‬‬ ‫‪‬‬
‫‪ : ShowCancelButton‬ﯾﺳﺗﺧدم ﻟﻌرض زر إﻟﻐﺎء اﻷﻣر ‪. Cancel‬‬ ‫‪‬‬
‫‪ : CancelText‬ﻟﺗﺣدﯾد ﻧص ﯾظﮭر ﻋﻠﻰ زر إﻟﻐﺎء اﻷﻣر ‪.‬‬ ‫‪‬‬
‫‪ : CancelImageUrl‬ﻟﺗﺣدﯾد ﺻورة ﺗظﮭر ﻛزر إﻟﻐﺎء اﻷﻣر ‪.‬‬ ‫‪‬‬
‫‪ : CuasesValidation‬ﺗﻣﻛﻧﻧﺎ ﻣن ﺗﺟﺎوز أدوات اﻟﺗﺣﻘق ﻋﻧد اﻟﺿﻐط ﻋﻠﻰ زر اﻟﺗﻌدﯾل ‪. Edit‬‬ ‫‪‬‬
‫‪ : ValidationGroup‬ﺗﻣﻛﻧﻧﺎ ﻣن رﺑط زر اﻟﺗﻌدﯾل ﻣﻊ ﻣﺟﻣوﻋﺔ أدوات ﺗﺣﻘق وذﻟك ﻟﻧﺿﻣن أن‬ ‫‪‬‬
‫اﻟﺑﯾﺎﻧﺎت اﻟﺟدﯾدة ﺗﺧﺿﻊ ﻟﺷروط ﻣﺣددة ‪.‬‬
‫‪- 30 -‬‬
‫ ﻓﺈﻧﮫ ﺑﺈﻣﻛﺎﻧﻧﺎ اﻟﺗﻌدﯾل ﻋﻠﻰ ھذه اﻟﺧﺻﺎﺋص‬CommandField ‫ﺑﻌد أن ﺗﻌرﻓﻧﺎ ﻋﻠﻰ ﺧﺻﺎﺋص ﻧﻣط اﻟﺣﻘول‬
: ‫ﺑﺣﯾث ﻧﺻل إﻟﻰ ﻧﺗﯾﺟﺔ ﻣﺷﺎﺑﮭﺔ ﻟﻠﺗﺎﻟﻲ‬
: ‫أﻣﺎ اﻟﺧﺻﺎﺋص اﻟﻣﻌدﻟﺔ ﻓﺗظﮭر ﻓﻲ اﻟﻛود اﻟﺗﺎﻟﻲ‬
<div>
<Columns>
<asp:CommandField
ButtonType="Image"
ShowEditButton="true"
EditText="Edit Movie"
EditImageUrl="edit.png"
UpdateText="Update Movie"
UpdateImageUrl="save.png"
ShowCancelButton="true"
CancelText="Cancel Edit"
CancelImageUrl="cancel.png"
ShowDeleteButton="true"
DeleteText="Delete Movie"
DeleteImageUrl="delete.png"
/>
.
.
- 31 -
‫ﺣﯾث ﯾﻣﻛن اﻟوﺻول إﻟﻰ ھذه اﻟﺧﺻﺎﺋص ﻣن ﺧﻼل اﻟﻧﻘر ﻋﻠﻰ ‪ smart tag‬ﺛم ﻧﺧﺗﺎر ‪ Edit Columns‬ﺛم‬
‫ﻧﺣدد اﻟﺣﻘل ‪CommandField‬‬
‫اﺳﺗﺧدام ﻧﻣط اﻟﺣﻘول ‪ImageField‬‬
‫ﻧﺳﺗﺧدم ﻧﻣط اﻟﺣﻘول ‪ ImageField‬ﻟﻌرض اﻟﺻور داﺧل اﻷداة ‪ GridView‬ﺣﯾث ﺗﻛون ﻣوﺟودة ﻋﻠﻰ‬
‫اﻟﺳﯾرﻓر و ﻣﺳﺎرات ھذه اﻟﺻور ﺗﻛون ﻣﺧزﻧﺔ ﺿﻣن ﺟدول ﻣﺎ ﻓﻲ ﻗﺎﻋدة اﻟﺑﯾﺎﻧﺎت ‪.‬‬
‫ﻟﻧﻘم ﺑداﯾﺔ ﺑﺈﻧﺷﺎء ﺻﻔﺣﺔ ﺟدﯾدة و إﺿﺎﻓﺔ أداة ‪ GridView‬ورﺑطﮭﺎ ﻣﻊ اﻟﺟدول ‪ Employee‬ﺣﯾث ﻧﻘوم‬
‫ﺑﺈﺣﺿﺎر وﻋرض ﻛﺎﻓﺔ اﻟﺣﻘول ‪ ,‬ﻗم ﺑﺗﻧﻔﯾذ ھذه اﻟﺻﻔﺣﺔ ﺿﻣن اﻟﻣﺗﺻﻔﺢ ‪ ,‬ﺳﺗﺣﺻل ﻋﻠﻰ اﻟﻧﺗﯾﺟﺔ اﻟﺗﺎﻟﯾﺔ ‪:‬‬
‫‪- 32 -‬‬
‫ﻧﻼﺣظ اﻟﻘﯾم اﻟﻣﺧزﻧﺔ ﺿﻣن اﻟﻌﻣود ‪ photo‬وھﻲ ﻣﺳﺎرات اﻟﺻور ﺿﻣن اﻟﻣﺷروع اﻟﺣﺎﻟﻲ ‪ ,‬ﻣﺎﻧرﯾده ﻓﻌﻠﯾﺎ‬
‫ھو ﻋرض ھذه اﻟﺻور وﻟﯾس ﻋرض ﻣﺳﺎراﺗﮭﺎ ! وھﻧﺎ ﯾﺄﺗﻲ دور ﻧﻣط اﻟﺣﻘول ‪ , ImageField‬اﺿﻐط ﻋﻠﻰ‬
‫‪ smart tag‬ﺿﻣن اﻟـ ‪ GridView‬و اﺧﺗر ‪Edit Columns‬‬
‫ﺳﺗظﮭر اﻟﻧﺎﻓذة ‪ , Fileds‬ﻧﻘوم ﺑﺣذف اﻟﺣﻘل ‪ ) photo‬ﻷﻧﮫ ﺑوﺿﻌﮫ اﻻﻓﺗراﺿﻲ ﯾﻛون ﻣن اﻟﻧﻣط‬
‫‪ BoundField‬وھو ﻏﯾر ﻗﺎدر ﻋﻠﻰ ﻋرض اﻟﺻور (‬
‫‪- 33 -‬‬
‫ﻧﻘوم ﺑﻌد ذﻟك ﺑﺈﺿﺎﻓﺔ ﺣﻘل ﺟدﯾد ﻣن اﻟﻧﻣط ‪ ImageField‬وﻧﻘوم ﺑﺿﺑط ﺑﻌض ﺧﺻﺎﺋﺻﮫ ﻛﺎﻟﺗﺎﻟﻲ ‪:‬‬
‫‪ DataImageUrlField‬ﻧﻌطﯾﮭﺎ اﻟﻘﯾﻣﺔ ‪ ) photo‬وھﻧﺎ ﺗﻛﻣن ﻋﻣﻠﯾﺔ اﻟرﺑط اﻟﻔﻌﻠﯾﺔ ﻣﻊ ﻣﺻدر اﻟﺑﯾﺎﻧﺎت اﻟذي‬
‫ﺳﯾﺣدد ﻣﺳﺎر اﻟﺻور ( ‪ ,‬ﻛﻣﺎ ﻧﻘوم ﺑﺿﺑط أﺑﻌﺎد اﻟﺻور اﻟﺗﻲ ﺳﯾﺗم ﻋرﺿﮭﺎ ﺣﯾث ﻗﻣت ﺑﺟﻌﻠﮭﺎ ‪75 * 75‬‬
‫ﺑﯾﻛﺳل ‪ ,‬ﺗظﮭر ھذه اﻹﻋدادات ﻓﻲ اﻟﺷﻛل اﻟﺗﺎﻟﻲ ‪:‬‬
‫‪- 34 -‬‬
‫‪1‬‬ ‫‪4‬‬
‫‪2‬‬
‫‪5‬‬
‫‪3‬‬
‫‪6‬‬
‫ﻗم اﻵن ﺑﺗﻧﻔﯾذ اﻟﺻﻔﺣﺔ اﻟﺳﺎﺑﻘﺔ ‪ ,‬وﺳﺗظﮭر اﻟﻧﺗﯾﺟﺔ اﻟﺗﺎﻟﯾﺔ ‪:‬‬
‫‪- 35 -‬‬
Fileds ‫ﺗم ظﮭور اﻟﺻور وھذا ﻣﺎﻧرﯾده وﻟﻛن ﻧﻼﺣظ ﻋدم ظﮭور ﻋﻧوان ﻟﻠﺣﻘل اﻟﺟدﯾد ! ﻧﻌود إﻟﻰ اﻟﻧﺎﻓذة‬
‫ أو أي‬photo ‫ اﻟﻘﯾﻣﺔ‬HeaderText ‫ ﻧﺣدد اﻟﺣﻘل اﻟﺟدﯾد اﻟذي ﻗﻣﻧﺎ ﺑﺈﺿﺎﻓﺗﮫ و ﻧﻌطﻲ اﻟﺧﺎﺻﯾﺔ‬, ‫اﻟﺳﺎﺑﻘﺔ‬
‫ ﺣﯾث ﺳﺄﻛﺗﻔﻲ‬, ‫ ﺑﺈﻣﻛﺎﻧك ﻋزﯾزي اﻟﻘﺎرئ اﺳﺗﻛﺷﺎف ﺑﺎﻗﻲ اﻟﺧﺻﺎﺋص ووظﯾﻔﺔ ﻛل ﻣﻧﮭﺎ‬. ‫ﻋﻧوان ﻣﻧﺎﺳب ﻟك‬
. ‫ﺿﻣن اﻟﺻﻔﺣﺎت اﻟﻘﺎدﻣﺔ ﺑذﻛر اﻟﺧﺻﺎﺋص اﻟﮭﺎﻣﺔ ﻓﻘط ﻟﮭذا اﻟﻧﻣط ﻣن اﻟﺣﻘول‬
: ‫ﻛود اﻟﺻﻔﺣﺔ‬
<Columns>
- 36 -

<asp:ImageField DataImageUrlField="photo" HeaderText="photo">
<ControlStyle Height="75px" Width="75px" />
</asp:ImageField>
</Columns>
</asp:GridView>
SelectCommand="SELECT * FROM [employees]">
: ‫ ﯾدﻋم اﻟﺧﺻﺎﺋص اﻟﺗﺎﻟﯾﺔ‬ImageField ‫ﻧﻣط اﻟﺣﻘول‬
‫ ﻟﺗﺣدﯾد ﻧص ﺑدﯾل ﯾﺗم ﻋرﺿﮫ ﻓﻲ ﺣﺎل ﻋدم ظﮭور اﻟﺻورة‬: AlternateText 

‫ ﻟﺗﺣدﯾد اﺳم ﺣﻘل ﺿﻣن ﺟدول ﻓﻲ ﻗﺎﻋدة اﻟﺑﯾﺎﻧﺎت ﯾﺗم ﺟﻠب اﻟﻧص‬: DataAlternateTextField 
‫اﻟﺑدﯾل ﻣﻧﮫ ﻓﻲ ﺣﺎل ﻋدم ظﮭور اﻟﺻورة‬
‫ ﻟﺗطﺑﯾق ﺗﻧﺳﯾق ﻣﺎ ﻋﻠﻰ اﻟﻧص اﻟﺑدﯾل‬: DataAlternateTextFormatString 
‫ ﻟﺗﺣدﯾد اﺳم ﺣﻘل ﺿﻣن ﻣﺻدر اﻟﺑﯾﺎﻧﺎت ﺑﺣﯾث ﯾﺣﺗوي ﻋﻠﻰ ﻣﺳﺎر اﻟﺻورة‬: DataImageUrlField 
‫ ﻟﺗﺣدﯾد ﻣﺳﺎر ﻟﺻورة ﺑدﯾﻠﺔ ﯾﺗم ﻋرﺿﮭﺎ ﻓﻲ ﺣﺎل ﻛﺎﻧت اﻟﻘﯾﻣﺔ اﻟﻣﺣﺿرة ﻣن‬: NullImageUrl 
NULL ‫ ﺗﺳﺎوي‬DataImageUrlField ‫ﻣﺻدر اﻟﺑﯾﺎﻧﺎت ﻟﻠﺧﺎﺻﯾﺔ‬
‫ وﺑﺎﻟﺗﺎﻟﻲ ﻻﯾﺧﻔﻰ‬HTML ‫< ﺑﻠﻐﺔ‬img> ‫إن اﻟﺻور اﻟﺗﻲ ﯾﺗم إﻧﺷﺎؤھﺎ ﺳﯾﺗم ﺗرﺟﻣﺗﮭﺎ ﻧﮭﺎﯾﺔ اﻟﻣطﺎف إﻟﻰ وﺳوم‬
‫ ﻓﺑﻌض اﻷﺷﺧﺎص ﯾوﻗف ﻋرض اﻟﺻور ﻓﻲ ﻣﺗﺻﻔﺣﮫ اﻟﺧﺎص‬, alt=”” ‫ﻋﻠﻰ أﺣد أھﻣﯾﺔ وﺟود اﻟﻧص اﻟﺑدﯾل‬
. ‫ ﻛﻣﺎ أﻧﮫ ﯾرﻓﻊ ﻣن ﺗرﺗﯾب ﻣوﻗﻌك ﺿﻣن ﻧﺗﺎﺋﺞ اﻟﺑﺣث ﻓﻲ ﻣﺣرﻛﺎت اﻟﺑﺣث‬, ‫ﻓﻌﻧدھﺎ ﺳﯾظﮭر ھذا اﻟﻧص‬
. ‫إذا ً ﻋزﯾزي اﻟﻣﺑرﻣﺞ ﻻﺗﮭﻣل إﻋطﺎء ﻗﯾﻣﺔ ﻟﻠﻧص اﻟﺑدﯾل ﻓﻲ ﻛل ﻣرة ﺗﺳﺗﺧدم ﻓﯾﮭﺎ اﻟﺻور‬
- 37 -
‫اﺳﺗﺧدام ﻧﻣط اﻟﺣﻘول ‪ButtonFields‬‬
‫ﯾﺳﺗﺧدم اﻟﻧﻣط ‪ ButtonField‬ﻟﻌرض أداة ‪ Button‬ﺿﻣن اﻟﺟدول ‪ GridView‬وﺑﺎﻟﺗﺎﻟﻲ ﻧﺳﺗطﯾﻊ ﺑرﻣﺟﺔ ھذا‬
‫اﻟزر ﻟﺗﻧﻔﯾذ ﻛود ﻣﻌﯾن ﻋﻧد اﻟﻧﻘر ﻋﻠﯾﮫ ‪ ,‬ﻣﺛﻼ ﻓﻲ ﺟدول اﻟﻣوظﻔﯾن ‪ employees‬ﺳﻧﻘوم ﺑﻌرض ﺑﯾﺎﻧﺎت‬
‫اﻟﻣوظﻔﯾن و إﺿﺎﻓﺔ ﻋﻣود ﺟدﯾد ﻣن اﻟﻧﻣط ‪ ButtonField‬ﺿﻣن اﻟـ ‪ GridView‬وﻋﻧد اﻟﻧﻘر ﻋﻠﯾﮫ ﯾﺗم ﺗﺣﻣﯾل‬
‫ﺻورة اﻟﻣوظف إﻟﻰ ﺟﮭﺎز اﻟﻣﺗﺻﻔﺢ ﻛﻣﺎ ﺗوﺿﺢ اﻟﺻورة اﻟﺗﺎﻟﯾﺔ ‪:‬‬
‫‪- 38 -‬‬
‫ﻧﺿﯾف ﺻﻔﺣﺔ ﺟدﯾدة ﻟﻧطﺑق اﻟﻣﺛﺎل ﻋﻠﯾﮭﺎ ‪ ,‬أﺿف ‪ GridView‬وﻗم ﺑﺿﺑط إﻋداداﺗﮫ واﺗﺻﺎﻟﮫ ﺑﻘﺎﻋدة اﻟﺑﯾﺎﻧﺎت‬
‫ﻛﻣﺎ ﺗﻌﻠﻣﻧﺎ ﻓﻲ اﻟﻔﻘرات اﻟﺳﺎﺑﻘﺔ ﻟﯾﺻﺑﺢ ﻣﻣﺛﺎﻻ ﻟﻠﺷﻛل اﻟظﺎھر ﻓﻲ اﻟﺻورة ﺑﺎﻷﻋﻠﻰ ) ﺑﺎﺳﺗﺛﻧﺎء ظﮭور اﻷزرار‬
‫‪ , ( Download‬ﺑﻌد ﺗﺟﮭﯾز ﻣﺎﺳﺑق ﻧﺄﺗﻲ اﻵن إﻟﻰ ﻣﺣور ﺣدﯾﺛﻧﺎ ھﻧﺎ وھو إﺿﺎﻓﺔ ﺣﻘل ﻣن اﻟﻧﻣط‬
‫‪ , ButtonField‬أﻧﻘر ﻋﻠﻰ ‪ smart tag‬ﺿﻣن اﻟـ ‪ GridView‬واﺧﺗر ‪Edit Columns‬‬
‫ﺳﺗظﮭر اﻟﻧﺎﻓذة ‪ , Fileds‬ﺿﻣن اﻟﻘﺳم ‪ Available Fields‬اﺧﺗر اﻟﻧﻣط ‪ ButtonField‬واﺿﻐط ﻋﻠﻰ ‪, Add‬‬
‫ﺛم ﻗم ﺑﺗﺣدﯾد اﻟﺣﻘل اﻟﺟدﯾد اﻟذي ﺗم إﺿﺎﻓﺗﮫ ﻓﻲ اﻟﻘﺳم ‪ , Selected Fields‬ﺑﻌد ذﻟك اﻧﺗﻘل إﻟﻰ اﻟﻘﺳم‬
‫‪ ButtonField properties‬و ﻗم ﺑﺗﻌدﯾل ﻗﯾﻣﺔ اﻟﺧﺎﺻﯾﺔ ‪ ButtonType‬إﻟﻰ اﻟﻘﯾﻣﺔ ‪ , Button‬ﺗﻌدﯾل‬
‫اﻟﺧﺎﺻﯾﺔ ‪ Text‬ﻹﻋطﺎﺋﮭﺎ اﻟﻘﯾﻣﺔ ‪ Download‬ھذه اﻟﺧطوات ﺗﺗوﺿﺢ ﻣن ﺧﻼل اﻟﺻورة اﻟﺗﺎﻟﯾﺔ ‪:‬‬
‫‪- 39 -‬‬
‫‪1‬‬ ‫‪4‬‬
‫‪2‬‬ ‫‪5‬‬
‫‪3‬‬
‫‪6‬‬
‫ﻣﻼﺣظﺔ ‪ :‬ﺑﺈﻣﻛﺎﻧﻧﺎ إﻋطﺎء اﻟﺧﺎﺻﯾﺔ ‪ ButonType‬اﻟﻘﯾﻣﺔ ‪ Link‬أو ‪ Image‬ﺣﯾث ﺳﯾﺗم ﻣﻌﺎﻣﻠﺗﮭم ﺑﺎﻋﺗﺑﺎرھم‬
‫أدوات ‪ LinkButton‬و ‪ ImageButton‬وھﻣﺎ ﻣﺷﺗﻘﺎن ﻋﻣوﻣﺎ ﻣن اﻷداة ‪ Button‬وﻗد ﺗﻌرﻓﻧﺎ ﻋﻠﯾﮭم‬
‫ﺑﺎﻟﺗﻔﺻﯾل ﺿﻣن ﻓﺻل ﺳﺎﺑق ‪.‬‬
‫ﺑﻌد اﻟﺿﻐط ﻋﻠﻰ ‪ OK‬ﺿﻣن اﻟﻧﺎﻓذة اﻟﺳﺎﺑﻘﺔ ﺳﯾﺗم إﺿﺎﻓﺔ اﻟﺣﻘل اﻟﺟدﯾد ﻣن اﻟﻧﻣط ‪ ButtonField‬و أﺻﺑﺢ‬
‫ﺑﺈﻣﻛﺎﻧﻧﺎ اﻟﺑدء ﺑﻛﺗﺎﺑﺔ اﻟﻛود ﺿﻣن اﻷزرار اﻟﺗﻲ أﺿﯾﻔت ‪.‬‬
‫ﯾﺗم ﻛﺗﺎﺑﺔ اﻟﻛود ﻓﻌﻠﯾﺎ ﺿﻣن اﻟﺣدث ‪ RowCommand‬اﻟﺗﺎﺑﻊ ﻟﻸداة ‪. GridView‬‬
‫ﺗﺟرﺑﺔ ﺑﺳﯾطﺔ ‪:‬‬
‫ﺳﻧﻘوم ﺑﺈﺿﺎﻓﺔ أداة ‪ Lable‬إﻟﻰ اﻟﺻﻔﺣﺔ اﻟﺣﺎﻟﯾﺔ اﻟﺗﻲ ﻧﻌﻣل ﻋﻠﯾﮭﺎ وﻧﻌطﻲ اﻟﺧﺎﺻﯾﺔ ‪ Text‬اﻟﻘﯾﻣﺔ ‪ ) 0‬ﺻﻔر(‬
‫وﻋﻧد اﻟﻧﻘر ﻋﻠﻰ أﺣد اﻷزرار اﻟﺗﻲ ﺿﻣن اﻟـ ‪ GridView‬ﯾزﯾد ھذا اﻟﻌدد ﺑﻣﻘدار واﺣد ‪ ,‬ﻗم ﺑﺗﺣدﯾد اﻷداة‬
‫‪ GridView‬ﺛم ﺿﻣن اﻟﺣدث ‪ GridView1_RowCommand‬أﻛﺗب اﻟﻛود اﻟﺗﺎﻟﻲ ‪:‬‬
‫‪- 40 -‬‬
C# ‫ﻛود‬
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
Label1.Text = (int.Parse(Label1.Text) + 1).ToString();
}
VB ‫ﻛود‬
Protected Sub GridView1_RowCommand(ByVal sender As Object, ByVal e As
GridViewCommandEventArgs)
Label1.Text = (Integer.Parse(Label1.Text) + 1).ToString()
End Sub
: ‫أﻣﺎ ﻛود اﻟﺻﻔﺣﺔ ﻓﯾﻛون ﺑﺎﻟﺷﻛل‬
onrowcommand="GridView1_RowCommand" >
<Columns>
<asp:BoundField DataField="id" HeaderText="id" ReadOnly="True"
SortExpression="id" />
</asp:ImageField>
<asp:ButtonField ButtonType="Button" Text="Download" />
</Columns>
</asp:GridView>
SelectCommand="SELECT * FROM [employees]" >
<br />
<asp:Label ID="Label1" runat="server" Text="0" />
- 41 -
. Lable ‫ وﻻﺣظ زﯾﺎدة ﻗﯾﻣﺔ اﻷداة‬GridView ‫ﻗم ﺑﺗﺷﻐﯾل اﻟﺻﻔﺣﺔ اﻵن و ﻗم ﺑﺎﻟﻧﻘر ﻋﻠﻰ اﻷزرار ﺿﻣن اﻟـ‬
‫إذا و ﺣﺗﻰ اﻵن ﻓﺈن ﺟﻣﯾﻊ اﻷزرار ﺗﻘوم ﺑﺗﻧﻔﯾذ ﻧﻔس اﻟﻛود ﺗﻣﺎﻣﺎ ) وھو زﯾﺎدة اﻟﻌداد ﺑﻘﯾﻣﺔ واﺣد ( و ﻟﻛن‬
‫ﻣﺎﻧرﯾده ﻧﺣن ھو ﺗﺣﻣﯾل اﻟﺻورة اﻟﻣﺟﺎورة ﻟﻠزر و ﺑﺎﻟﺗﺎﻟﻲ ﯾﺟب ﻣﻌرﻓﺔ ﻣﺳﺎر اﻟﺻورة اﻟﺗﻲ ﺗظﮭر ﻓﻲ ﻧﻔس‬
DataKeyNames ‫ إﻟﻰ‬photo ‫ ﻧﻌود إﻟﻰ ﻛود اﻟﺻﻔﺣﺔ ﻧﺿﯾف اﻟﻌﻣود‬, ‫ﺳطر اﻟزر اﻟذي ﺗم اﻟﻧﻘر ﻋﻠﯾﮫ‬
‫ ﻧﺣدد ﻟﻠﺧﺎﺻﯾﺔ‬, ‫ وھذه اﻟﻌﻣﻠﯾﺔ ﺣﺗﻰ ﻧﺗﻣﻛن ﻣن اﻟوﺻول إﻟﻰ ﻗﯾم ھذا اﻟﻌﻣود‬GridView1 ‫ﺿﻣن‬
: ‫ وﺑﺎﻟﺗﺎﻟﻲ ﯾﺻﺑﺢ ﻛود اﻟﺻﻔﺣﺔ‬, “download” ‫ اﻟﻘﯾﻣﺔ‬ButtonField ‫ اﻟﺗﺎﺑﻌﺔ ﻟﻠﻧﻣط‬CommandName
DataKeyNames="id,photo" DataSourceID="SqlDataSource1"
onrowcommand="GridView1_RowCommand">
<Columns>
</asp:ImageField>
<asp:ButtonField ButtonType="Button" Text="Download"
CommandName="download" />
</Columns>
</asp:GridView>
SelectCommand="SELECT * FROM [employees]" >
<br />
<asp:Label ID="Label1" runat="server" Text="0" />
‫أﻣﺎ اﻟﻛود اﻟذي ﯾﻘوم ﺑﺎﻟوﺻول إﻟﻰ ﻣﺳﺎر اﻟﺻورة وﺗﺣﻣﯾﻠﮭﺎ ﻋﻠﻰ ﺟﮭﺎز اﻟﻣﺗﺻﻔﺢ ﻓﺳﯾﻛون ﺿﻣن اﻟﺣدث‬
: ‫ ﺑﺎﻟﺷﻛل اﻟﺗﺎﻟﻲ‬GridView1_RowCommand
- 42 -
C# ‫ﻛود‬
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "download")
{
int index = int.Parse((string)e.CommandArgument);
string filename = GridView1.DataKeys[index].Values["photo"].ToString();
if (filename != "")
{
string path = MapPath(filename);
byte[] bts = System.IO.File.ReadAllBytes(path);
Response.Clear();
Response.ClearHeaders();
Response.AddHeader("Content-Type", "Application/octet-stream");
Response.AddHeader("Content-Length", bts.Length.ToString());
Response.AddHeader("Content-Disposition", "attachment; filename=" +
filename);
Response.BinaryWrite(bts);
Response.Flush();
Response.End();
}
}
VB ‫ﻛود‬
Protected Sub GridView1_RowCommand(ByVal sender As Object, ByVal e As
GridViewCommandEventArgs)
If e.CommandName = "download" Then
Dim index As Integer = Integer.Parse(CType(e.CommandArgument, String))
Dim filename As String = GridView1.DataKeys(index).Values("photo").ToString()
If filename <> "" Then

Dim path As String = MapPath(filename)
Dim bts() As Byte = System.IO.File.ReadAllBytes(path)
Response.Clear()
Response.ClearHeaders()
Response.AddHeader("Content-Type", "Application/octet-stream")
Response.AddHeader("Content-Length", bts.Length.ToString())
Response.AddHeader("Content-Disposition", "attachment; filename=" +
filename)
Response.BinaryWrite(bts)
Response.Flush()
Response.End()
End If
End If
End Sub
- 43 -
‫إن اﻟﻣﺗﺣول ‪ e‬ﯾﻣﺗﻠك ﻣﺟﻣوﻋﺔ ﻣن اﻟﺧﺻﺎﺋص ﻣﻧﮭﺎ ‪ CommandName‬و ‪CommandArgument‬‬

‫واﻟذﯾن ﻗﻣﻧﺎ ﺑﺗﺣدﯾد ﻗﯾﻣﮭﻣﺎ ﺿﻣن اﻷداة ‪ , GridView‬ﺑداﯾﺔ اﺧﺗﺑرﻧﺎ ﻗﯾﻣﺔ ‪ CommandName‬ﻟﻠﺗﺣﻘق ﻣن أن‬
‫اﻟزر اﻟذي ﺗم اﻟﻧﻘر ﻋﻠﯾﮫ ھو أﺣد أزرار اﻟـ ‪ ) download‬ﺿﻣن ھذا اﻟﻣﺛﺎل ﺑﺈﻣﻛﺎﻧﻧﺎ إﻟﻐﺎء ھذا اﻟﺷرط ﻷﻧﮫ‬
‫أﺳﺎﺳﺎ ﻻﯾوﺟد ﺳوى ﻋﻣود واﺣد ﻣن اﻟﻧﻣط ‪ ButtonFeilds‬وﻟﻛن ﻟو ﺗم وﺿﻊ أﻛﺛر ﻣن ﻋﻣود ﻣن ھذا اﻟﻧﻣط‬
‫ﻋﻧدﺋذ ﻻﺑد ﻣن ﻓﺣص ﻗﯾﻣﺔ ‪ CommandName‬ﻟﻣﻌرﻓﺔ أي اﻟﻌﻣودﯾن ﺗم اﻟﻧﻘر ﻓﯾﮫ ( ‪ .‬ﻗﻣﻧﺎ ﺑﻌد ذﻟك‬
‫ﺑﺎﻟﺣﺻول ﻋﻠﻰ رﻗم اﻟﺳطر اﻟذي ﺗم ﻧﻘر اﻟزر ﻓﯾﮫ وﺗﺧزﯾﻧﮫ ﻓﻲ اﻟﻣﺗﺣول ‪ index‬ﺛم ﺣﺻﻠﻧﺎ ﻋﻠﻰ ﻗﯾﻣﺔ اﻟﺧﻠﯾﺔ‬
‫اﻟﺗﻲ ھﻲ ﺗﻘﺎطﻊ اﻟﻌﻣود ‪ photo‬ﻣﻊ اﻟﺳطر ذو اﻟدﻟﯾل ‪ , index‬وذﻟك ﻟﻣﻌرﻓﺔ ﻣﺳﺎر اﻟﺻورة ﻋﻠﻰ اﻟﺳﯾرﻓر‬
‫وأﺧﯾرا ﻗﻣﻧﺎ ﺑﺗﻧزﯾﻠﮭﺎ ﻋﻠﻰ ﺟﮭﺎز اﻟﻣﺳﺗﺧدم ‪.‬‬
‫اﺳﺗﺧدام ﻧﻣط اﻟﺣﻘول ‪HyperLinkField‬‬
‫ﻧﺳﺗﺧدم ﻧﻣط اﻟﺣﻘول ‪ HyperLinkFiled‬ﻟﺑﻧﺎء رواﺑط ﺗﺷﻌﺑﯾﺔ داﺧل اﻷداة ‪ , GridView‬وﺑﺈﻣﻛﺎﻧﻧﺎ ﺟﻌل ھذه‬
‫اﻟرواﺑط دﯾﻧﺎﻣﯾﻛﯾﺔ ﺑﺣﯾث ﯾﻘوم ﻛل ﻣﻧﮭﺎ ﺑﻌرض ﻧص ﻣﺧﺗﻠف ﻋن اﻵﺧر و ﯾﻧﻘﻠﻧﺎ إﻟﻰ ﺻﻔﺣﺔ ﻣﺧﺗﻠﻔﺔ ﻋن ﻏﯾره‬
‫وﺑﺈﻣﻛﺎﻧﻧﺎ ﻣن ﻧﺎﺣﯾﺔ أﺧرى ﺟﻌل ھذه اﻟرواﺑط ﺛﺎﺑﺗﺔ اﻟﻧص وﺗﻧﻘﻠﻧﺎ ﺟﻣﯾﻌﮭﺎ إﻟﻰ ﺻﻔﺣﺔ ﺛﺎﺑﺗﺔ ‪.‬‬
‫ﺳﻧﻘوم ﺑﺈﻧﺷﺎء ﺻﻔﺣﺗﯾن ‪ ,‬اﻟﺻﻔﺣﺔ اﻷوﻟﻰ ) ‪ ( Departments.aspx‬ﻧﻌرض ﻓﯾﮭﺎ أﻗﺳﺎم اﻟﺷرﻛﺔ وﻋﻧد اﻟﻧﻘر‬
‫ﻋﻠﻰ اﺳم ﻗﺳم ﻣﺎ ﯾﺗم اﻻﻧﺗﻘﺎل إﻟﻰ ﺻﻔﺣﺔ أﺧرى ) ‪ ( employees.aspx‬ﻟﻌرض اﻟﻣوظﻔﯾن اﻟﺗﺎﺑﻌﯾن ﻟﮭذا‬
‫اﻟﻘﺳم ﻛﻣﺎ ﺗوﺿﺢ اﻟﺻور اﻟﺗﺎﻟﯾﺔ ‪:‬‬
‫‪- 44 -‬‬
‫ﻟﻧﻘم ﺑداﯾﺔ ﺑﺑﻧﺎء اﻟﺻﻔﺣﺔ ‪ , Deparments.aspx‬أﺿف ﻋﻠﯾﮭﺎ أداة ‪ GridView‬ارﺑطﮭﺎ ﻣﻊ اﻟﺟدول‬

‫‪ . deparments‬ﺛم ﻧﺿﻐط ﻋﻠﻰ اﻟـ ‪ smart tag‬اﻟﺧﺎص ﺑﺎﻷداة ‪ GridView‬وﻧﺧﺗﺎر ‪Edit Columns‬‬
‫ﺳﺗظﮭر اﻟﻧﺎﻓذة ‪ , Fields‬ﻣن اﻟﻘﺳم ‪ selected fields‬ﻗم ﺑﺣذف ﺟﻣﯾﻊ اﻟﺣﻘول اﻟﻣوﺟودة ‪ ,‬ﺑﻌد ذﻟك اﺧﺗر‬
‫‪ HyperLinkField‬ﻣن اﻟﻘﺳم ‪ Available fields‬واﺿﻐط ﻋﻠﻰ ‪ , Add‬ﻧﻘوم اﻵن ﺑﺿﺑط ﺑﻌض ﺧﺻﺎﺋص‬
‫ھذا اﻟﺣﻘل اﻟﺟدﯾد ‪ .‬ﻧﻌطﻲ اﻟﺧﺎﺻﯾﺔ ‪ DataNavigateUrlField‬اﻟﻘﯾﻣﺔ ‪ , id‬ﻛﻣﺎ ﻧﻌطﻲ اﻟﺧﺎﺻﯾﺔ‬
‫‪ DataNavigateUrlFormatString‬اﻟﻘﯾﻣﺔ }‪ employees.aspx?id={0‬ھذه اﻟﻌﺑﺎرة ﺗﻣﺛل اﺳم اﻟﺻﻔﺣﺔ‬
‫اﻟﺗﻲ ﺳﯾﺗم اﻻﻧﺗﻘﺎل إﻟﯾﮭﺎ ﻋﻧد اﻟﻧﻘر ﻋﻠﻰ أﺣد اﻟرواﺑط اﻟﺗﺷﺑﻌﯾﺔ اﻟﺗﻲ ﺳﯾوﻟدھﺎ ھذا اﻟﺣﻘل ‪ ,‬ﻧﻼﺣظ أﻧﮫ ﯾﺣﺗﺎج‬
‫ﻟﻘﯾﻣﺔ ﻟﻠﺑﺎراﻣﺗر }‪ id={0‬ھذه اﻟﻘﯾﻣﺔ ﯾﺗم أﺧذھﺎ ﻣن ﻗﯾﻣﺔ اﻟﺧﺎﺻﯾﺔ ‪ DataNavigateUrlField‬اﻟﺗﻲ ﻋدﻟﻧﺎھﺎ‬
‫ﻗﺑل ﻗﻠﯾل ) ﺳﻧﺗﺄﺗﻲ ﻋﻠﻰ ﺷرح ھذه اﻟﺧﺻﺎﺋص ﺑﻌد ﻗﻠﯾل ( ‪ ,‬أﺧﯾرا ﻧﻌطﻲ اﻟﺧﺎﺻﯾﺔ ‪ DataTextField‬اﻟﻘﯾﻣﺔ‬
‫‪ name‬وھﻲ ﺗﻣﺛل اﻟﻧص اﻟذي ﺳﯾﺗم ﻋرﺿﮫ ﻛراﺑط ﺗﺷﻌﺑﻲ ‪ .‬اﻟﺻورة اﻟﺗﺎﻟﯾﺔ ﺗوﺿﺢ اﻟﺧطوات اﻟﺗﻲ ﻗﻣﻧﺎ ﺑﮭﺎ‬
‫‪- 45 -‬‬
1
4
‫إﻟﻰ ھﻧﺎ ﻧﻛون ﻗد اﻧﺗﮭﯾﻧﺎ ﻣن إﻋداد ھذا اﻟﺣﻘل وﻟﻛن ﻗﺑل إﻏﻼق اﻟﻧﺎﻓذة اﻟﺳﺎﺑﻘﺔ ﺑﺈﻣﻛﺎﻧك ﺗﻌدﯾل اﻟﺧﺎﺻﯾﺔ‬
. "‫ ﻹﻋطﺎء ﻋﻧوان ﻟﮭذا اﻟﺣﻘل وﻟﯾﻛن "اﺳم اﻟﻘﺳم‬HeaderText
<div>

<Columns>
<asp:HyperLinkField
DataNavigateUrlFields="id"
DataNavigateUrlFormatString="employees.aspx?id={0}"
DataTextField="name"
HeaderText="‫ "اﻟﻘﺴﻢ اﺳﻢ‬/>
</Columns>
</asp:GridView>
- 46 -

‫>‪SelectCommand="SELECT * FROM [departments]"></asp:SqlDataSource‬‬
‫>‪</div‬‬
‫ﻧﻣط اﻟﺣﻘول ‪ HyperLinkField‬ﯾدﻋم اﻟﺧﺻﺎﺋص اﻟﺗﺎﻟﯾﺔ ‪:‬‬
‫‪ : DataNavigateUrlFields‬ﻟﺗﺣدﯾد ﺣﻘل ) أو ﻣﺟﻣوﻋﺔ ﺣﻘول ( ﻣن ﻣﺻدر اﻟﺑﯾﺎﻧﺎت ﻟﯾﺗم‬ ‫‪‬‬

‫اﺳﺗﺧداﻣﮫ ﻣﻊ اﻟﺧﺎﺻﯾﺔ ‪DataNavigateUrlFormatString‬‬
‫‪ : DataNavigateUrlFormatString‬ﻟﺗﺣدﯾد ﺻﯾﻐﺔ اﻟﻧص اﻟﻣراد ﺑﻧﺎؤه ﻟﺗﻣﺛﯾل اﻟراﺑط اﻟذي ﺳﯾﺗم‬ ‫‪‬‬
‫اﻻﻧﺗﻘﺎل إﻟﯾﮫ‬
‫‪ : DataTextField‬ﻟﺗﺣدﯾد ﺣﻘل ﻣن ﻣﺻدر اﻟﺑﯾﺎﻧﺎت ﯾﺗم اﺳﺗﺧداﻣﮫ ﻛﻧص ظﺎھر ﻟﻠراﺑط‬ ‫‪‬‬
‫‪ : DataTextFormatString‬ﻟﺗﺣدﯾد ﺻﯾﻐﺔ اﻟﻧص اﻟﻣطﻠوب ﺑﻧﺎؤه ﻟﯾظﮭر ﻛﻧص ﻟﻠراﺑط‬ ‫‪‬‬
‫‪ : NavigateUrl‬ﻟﺗﺣدﯾد راﺑط ﺛﺎﺑت ﯾﺗم اﻻﻧﺗﻘﺎل إﻟﯾﮫ‬ ‫‪‬‬
‫‪ : Target‬ﻟﺗﺣدﯾد أﺳﻠوب ﻋرض اﻟﺻﻔﺣﺔ اﻟﻣﺣددة ﻓﻲ اﻟراﺑط وھﻲ ﺗﺄﺧد إﺣدى اﻟﻘﯾم ‪blank ,‬‬ ‫‪‬‬
‫‪ parent , self , top‬ﻛﻣﺎ ﯾﻣﻛن أن ﺗﺄﺧد اﺳم ﻟـ ‪ frame‬أو ‪iframe‬‬
‫‪ : Text‬ﻟﺗﺣدﯾد ﻧص ﺛﺎﺑت ﯾظﮭر ﻛﻧص ظﺎھر ﻟﻠراﺑط‬ ‫‪‬‬
‫إﻟﻰ ھﻧﺎ ﻧﻛون ﻗد اﻧﺗﮭﯾﻧﺎ ﻣن اﻟﺣدﯾث ﻋن ﻧﻣط اﻟﺣﻘول ‪ HyperLinkField‬ﺑﺈﻣﻛﺎﻧك ﻋرض اﻟﺻﻔﺣﺔ ﺿﻣن‬
‫اﻟﻣﺗﺻﻔﺢ و ﻣﺷﺎھدة اﻟﻧﺗﯾﺟﺔ ‪ .‬ﺑﺎﻟطﺑﻊ ﻋﻧد اﻟﻧﻘر ﻋﻠﻰ أﺣد اﻟروﺑط ﻓﺈﻧﮫ ﺳﯾﻧﻘﻠك إﻟﻰ اﻟﺻﻔﺣﺔ ‪employees‬‬
‫وھﻲ ﻏﯾر ﻣوﺟودة ﺑﻌد وﻟﻛن ﻻﺣظ اﻟﻌﻧوان اﻟﻣطﻠوب واﻟﻘﯾﻣﺔ اﻟﺗﻲ ﯾﺄﺧذھﺎ اﻟﺑﺎراﻣﺗر ‪ id‬ﺑﺣﺳب رﻗم اﻟﻘﺳم‬
‫اﻟذي اﺧﺗرﺗﮫ ‪.‬‬
‫ﻋﻣوﻣﺎ ﺳﻧﻘوم اﻵن ﺑﺑﻧﺎء اﻟﺻﻔﺣﺔ ‪ employees.aspx‬ﻟﻌرض اﻟﻣوظﻔﯾن اﻟﺗﺎﺑﻌﯾن ﻟﻠﻘﺳم اﻟذي ﺗم اﺧﺗﯾﺎره ﻣن‬
‫اﻟﺻﻔﺣﺔ ‪ . departments‬أﺿف أداة ‪ GridView‬وارﺑطﮭﺎ ﻣﻊ اﻟﺟدول ‪ employees‬ﻣن ﻗﺎﻋدة اﻟﺑﯾﺎﻧﺎت‬
‫وﻟﻛن أﺿف ﺷرط ﻋﻠﻰ ﻋﺑﺎرة اﻻﺳﺗﻌﻼم وھو أن ﯾﺗم ﻋرض اﻟﻣوظﻔﯾن اﻟﺗﺎﺑﻌﯾن ﻟﻠﻘﺳم اﻟذي ﺗم ﺗﻣرﯾر رﻗﻣﮫ‬
‫ﺿﻣن ﻋﻧوان اﻟﺻﻔﺣﺔ ) ﻧﺎﻗﺷﻧﺎ ﻛﯾﻔﯾﺔ إﺿﺎﻓﺔ ھذه اﻟﺷروط ﻓﻲ ﻓﺻل ﺳﺎﺑق ( اﻟﺻورة اﻟﺗﺎﻟﯾﺔ ﺗوﺿﺢ اﻟﻌﻣل‬
‫اﻟﻣطﻠوب‬
‫‪- 47 -‬‬
‫‪1‬‬
‫‪4‬‬
‫‪2‬‬
‫‪3‬‬
‫‪5‬‬
‫‪6‬‬
‫‪- 48 -‬‬
. ‫ﻧﻛﻣل ﺑﺎﻗﻲ اﻟﺧطوات ﻛﺎﻟﻣﻌﺗﺎد‬
‫ ﻓﮭو ﺗﻘﻠﯾدي‬GridView ‫ﻛود اﻟﺻﻔﺣﺔ ) ﺳﺄﻛﺗﻔﻲ ﺑﻌرض اﻟﺟزء اﻟﺧﺎص ﺑﻌﺑﺎرة اﻻﺳﺗﻌﻼم أﻣﺎ ﻛود اﻷداة‬
( ‫وﻻﺟدﯾد ﻋﻠﯾﮫ ﻓﻲ ھذه اﻟﺻﻔﺣﺔ‬
SelectCommand="SELECT * FROM [employees] WHERE ([deptId] = @deptId)">
<SelectParameters>
<asp:QueryStringParameter Name="deptId" QueryStringField="id"
Type="Int32" />
</SelectParameters>
‫ واﺧﺗر ﻗﺳم ﻣﺎ ﻟﯾﺗم ﻋرض اﻟﺻﻔﺣﺔ‬departments ‫ ﺷﻐل اﻟﺻﻔﺣﺔ‬, ‫ﻗم اﻵن ﺑﺈﻋﺎدة اﺧﺗﺑﺎر اﻟﺗﻣرﯾن ﻛﺎﻣﻼ‬
‫ ﺿﻣن‬id ‫ ﻣرة أﺧرى ﻻﺣظ ﻛﯾﻔﯾﺔ ﺗﻣرﯾر اﻟﺑﺎراﻣﺗر‬. ‫ ﻣﻊ ﺑﯾﺎﻧﺎت اﻟﻣوظﻔﯾن اﻟﺗﺎﺑﻌﯾن ﻟﮭذا اﻟﻘﺳم‬employess
. ‫ﻋﻧوان اﻟﺻﻔﺣﺔ‬
- 49 -
‫اﺳﺗﺧدام ﻧﻣط اﻟﺣﻘول ‪TemplteField‬‬
‫ﯾﻣﻛﻧﻧﺎ ھذا اﻟﻧﻣط ﻣن إﺿﺎﻓﺔ أي ﺷﻲ ﻧرﻏب ﺑﮫ داﺧل ﻋﻣود اﻟـ ‪ , GridView‬ﻓﮭو ﺑﻣﺛﺎﺑﺔ ﻗﺎﻟب ﻓﺎرغ ﻧﺳﺗطﯾﻊ‬
‫ﻣن ﺧﻼﻟﮫ إﻧﺷﺎء اﻟﺷﻛل اﻟذي ﻧرﯾد ‪ ,‬ﺣﯾث ﺑﺈﻣﻛﺎﻧﻧﺎ إﺿﺎﻓﺔ ﻣﻌظم أدوات ‪ ASP.NET‬أو ‪ HTML‬ﻟﯾﺗم ﻋرﺿﮭﺎ‬
‫ﺿﻣن ھذا اﻟﻧﻣط ) … ‪ . ( Button, Image, HyperLink‬وﺑﺎﻟﺗﺎﻟﻲ ﻧﺳﺗﯾطﻊ اﻟﻘول إن ﺗﻣﻛﻧت ﺟﯾدا ﻣن ھذا‬
‫اﻟﻧﻣط ﻓﮭو ﯾﻐﻧﯾك ﻋن ﺟﻣﯾﻊ اﻷﻧﻣﺎط اﻟﺳﺎﺑﻘﺔ اﻟﺗﻲ ﺗﺣدﺛﻧﺎ ﻋﻧﮭﺎ ‪ .‬ﻟﺗوﺿﯾﺢ أﺳﻠوب اﻟﺗﻌﺎﻣل ﻣﻊ ھذا اﻟﻧﻣط ﺳﻧﻘوم‬
‫ﺑﺗطﺑﯾق ﺛﻼث أﻣﺛﻠﺔ ﻣﺧﺗﻠﻔﺔ ﻣن ﻧﺎﺣﯾﺔ اﻟﮭدف و اﻟﺻﻌوﺑﺔ وذﻟك ﻟﻺﺣﺎطﺔ ﺑﺄﻛﺑر ﻗدر ﻣﻣﻛن ﻣن ﻣزاﯾﺎ ھذا اﻟﻧﻣط‪.‬‬
‫اﻟﻣﺛﺎل اﻷول ‪:‬‬
‫ﺳﻧﻘوم ﺿﻣن ھذا اﻟﻣﺛﺎل ﺑﺗوﺿﯾﺢ ﻛﯾﻔﯾﺔ ﻋرض ﺻورة ﺿﻣن ﻧﻣط اﻟﺣﻘول ‪ , TemplateField‬ﻗم ﺑﺈﺿﺎﻓﺔ‬
‫ﺻﻔﺣﺔ ﺟدﯾد و أﺿف ﻋﻠﯾﮭﺎ أداة ‪ GridView‬و ارﺑطﮭﺎ ﻣﻊ اﻟﺟدول ‪ employees‬ﻟﯾﺗم ﻋرض ﺟﻣﯾﻊ ﺑﯾﺎﻧﺎت‬
‫اﻟﻣوظﻔﯾن ﻓﻲ اﻟﺟدول ‪ ,‬ﻗم ﺑﺎﻟﻧﻘر ﻋﻠﻰ ‪ SmartTag‬و اﺧﺗر ‪EditColumns‬‬
‫ﺛم ﻗم ﺑﺗﺣدﯾد اﻟﻌﻣود ‪ , photo‬ﺛم اﺿﻐط ﻋﻠﻰ ‪ , Convert this field into a TemplateFiled‬ﺛم‬
‫اﺿﻐط ﻋﻠﻰ ‪OK‬‬
‫‪- 50 -‬‬
1
2
‫ ( إﻟﻰ اﻟﻧﻣط‬BoundField ) ‫ ﻣن اﻟﻧﻣط اﻻﻓﺗراﺿﻲ ﻟﮫ‬photo ‫وﺑﮭذا ﻧﻛون ﻗد ﺣوﻟﻧﺎ اﻟﻌﻣود‬

photo ‫ وﻟو ﻗﻣﻧﺎ ﺑﻔﺣص ﻛود اﻟﺻﻔﺣﺔ ﺳﻧﺟد اﻟﺟزء اﻟﺗﺎﻟﻲ اﻟﺧﺎص ﺑﺎﻟﻌﻣود‬. TemplateField
<asp:TemplateField HeaderText="photo" SortExpression="photo">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("photo") %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("photo") %>'/>
</EditItemTemplate>
</asp:TemplateField>
‫ اﻟﻘﺎﻟب اﻷول‬, ‫ و ﺑداﺧﻠﮫ أداﺗﯾن أو ﻗﺎﻟﺑﯾن‬TemplateField ‫ أﺻﺑﺢ ﻣن اﻟﻧﻣط‬photo ‫ﻧﻼﺣظ أن اﻟﺣﻘل‬

‫ و ﺑداﺧﻠﮫ ﯾﺗم وﺿﻊ اﻟﻣﺣﺗوﯾﺎت اﻟﺗﻲ ﻧرﻏب ﺑﻌرﺿﮭﺎ ﻋﻧد ﺗﻧﻔﯾذ اﻟﺻﻔﺣﺔ و ﺗﻛون اﻷداة‬ItemTemplate
- 51 -
‫‪ GridView‬ﺑوﺿﻌﯾﺔ ﻋرض اﻟﺑﯾﺎﻧﺎت ) وھﻲ اﻟﺣﺎﻟﺔ اﻻﻓﺗراﺿﯾﺔ ( ‪ ,‬اﻟﻘﺎﻟب اﻟﺛﺎﻧﻲ ‪EditItemTemplate‬‬

‫وﺑداﺧﻠﮫ ﯾﺗم وﺿﻊ اﻟﻣﺣﺗوﯾﺎت اﻟﺗﻲ ﺳﯾﺗم ﻋرﺿﮭﺎ ﻋﻧدﻣﺎ ﺗﻛون اﻷداة ‪ GridView‬ﺑوﺿﻌﯾﺔ ﺗﻌدﯾل اﻟﺑﯾﺎﻧﺎت ‪.‬‬
‫ﻧﻌود اﻵن إﻟﻰ اﻟﺻﻔﺣﺔ ﺑوﺿﻌﯾﺔ اﻟﺗﺻﻣﯾم و ﻧﻧﻘر ﻋﻠﻰ ‪ samrtTag‬وﻧﺧﺗﺎر ‪Edit Templates‬‬
‫ھذا اﻟﺧﯾﺎر ﯾﻣ ّﻛﻧﻧﺎ ﻣن ﺗﻌدﯾل ﺟﻣﯾﻊ اﻟﺣﻘول اﻟﺗﻲ ﻣن اﻟﻧﻣط ‪TemplateField‬‬
‫ﻧﺣذف اﻷداة ‪ Lable1‬و ﻧﺿﻊ ﻋوﺿﺎ ً ﻋﻧﮭﺎ أداة ‪ , Image‬ﻟﻧﺟﻌﻠﮭﺎ ﺗﻘوم ﺑﻌرض ﺻورة اﻟﻣوظف‬
‫‪- 52 -‬‬
‫ﻧﺿﻐط ﻋﻠﻰ ‪ SmartTag‬اﻟﺧﺎص ﺑﺎﻷداة ‪ Image1‬اﻟﺗﻲ ﺿﻔﻧﺎھﺎ و ﻧﺧﺗﺎر ‪ , Edit DataBindings‬ھذه‬

‫اﻟﺧطوة ﻟﻛﻲ ﻧﺣدد اﺳم اﻟﻌﻣود اﻟذي ﯾﺣﺗوي ﻋﻠﻰ ﻣﺳﺎرات اﻟﺻور ﺿﻣن اﻟﺟدول ‪ employees‬ﻛﻣﺎ ﺗوﺿﺢ‬
‫اﻟﺻورة اﻟﺗﺎﻟﯾﺔ ‪:‬‬
‫‪2‬‬
‫‪1‬‬
‫‪3‬‬
‫ﻧﻼﺣظ أﻧﮫ ﺑﺎﻹﻣﻛﺎن ﺗﺣدﯾد ﻋﻣود آﺧر ﯾﻛون ﺑﻣﺛﺎﺑﺔ ﻣﺻدر ﺑﯾﺎﻧﺎت ﻟﻠﺧﺎﺻﯾﺔ ‪ AlternateText‬واﻟﺗﻲ ﺳﯾﺗم‬
‫ﻋرض ﻗﯾﻣﺗﮭﺎ ﻓﻲ ﺣﺎل ﻋدم ظﮭور اﻟﺻورة ‪.‬‬
‫ﺑﻌد اﻻﻧﺗﮭﺎء ﻣن ﺗﺣدﯾد ﻣﺻدر ﺑﯾﺎﻧﺎت اﻟﺻورة ﻧﺿﻐط ﻋﻠﻰ ‪ SmartTag‬اﻟﺧﺎص ﺑﺎﻷداة ‪ GridView‬وﻧﺧﺗﺎر‬
‫‪. End Template Editng‬‬
‫‪- 53 -‬‬
: ‫ ﻟﻧﺟده أﺻﺑﺢ ﻛﺎﻟﺗﺎﻟﻲ‬photo ‫ﻧﻌود إﻟﻰ ﻛود اﻟﺻﻔﺣﺔ و ﺑﺎﻟﺗﺣدﯾد إﻟﻰ ﻛود اﻟﺣﻘل‬
<ItemTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("photo") %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("photo") %>'>
</asp:TextBox>
</EditItemTemplate>
‫ و ﻗد‬Lable ‫ ﺣﯾث ﻛﺎن‬, ItemTemplate ‫ﻧﻼﺣظ ﻣن ﺧﻼل اﻟﻛود اﻟﺳﺎﺑق ﺗﻐﯾﯾر ﻗﯾﻣﺔ ﻣﺣﺗوﯾﺎت اﻟﻘﺎﻟب‬
‫ ﻛﺎن ﺑﺈﻣﻛﺎﻧﻧﺎ ﺑﺳﮭوﻟﺔ إﺟراء ھذا اﻟﺗﻌدﯾل ﻋﻠﻰ اﻟﻛود ﻣﺑﺎﺷرة دون اﻟﺣﺎﺟﺔ ﻟﻺﺳﺗﻌﺎﻧﺔ ﺑﺎﻟﻧواﻓذ‬, Image ‫أﺻﺑﺢ‬
. ‫ إﻧﻣﺎ أردت ﺗوﺿﯾﺢ ﻛﻼ اﻷﺳﻠوﺑﯾن وﻟك اﻟﺣرﯾﺔ ﻓﯾﻣﺎ ﺗﺧﺗﺎر‬, ‫اﻟﺳﺎﺑﻘﺔ‬
‫ﻗم ﺑﺗﺷﻐﯾل اﻟﺻﻔﺣﺔ اﻟﺳﺎﺑﻘﺔ و ﺳﺗﻼﺣظ ﻋرض ﺻور اﻟﻣوظﻔﯾن دون اﻟﺣﺎﺟﺔ ﻻﺳﺗﺧدام ﻧﻣط اﻟﺣﻘول‬
‫ ﻗم‬. ‫ و ﺑﺄﺳﻠوب ﻣﻣﺎﺛل ﺑﺈﻣﻛﺎﻧك وﺿﻊ أوات أﺧرى واﻻﺳﺗﻐﻧﺎء ﻋن أﻧﻣﺎط اﻟﺣﻘول اﻟﺳﺎﺑﻘﺔ‬ImageField
: ‫ ﻛود اﻟﺻﻔﺣﺔ ﻟﮭذا اﻟﻣﺛﺎل ﻛﺎﻣﻼ‬, ‫ ﻓﻼ داﻋﻲ ﻟﮫ ﻓﻲ ﻣﺛﺎﻟﻧﺎ ھذا‬EditItemTemplate ‫ﺑﺣذف اﻟﻘﺎﻟب‬
<div>
<Columns>
<ItemTemplate>
<asp:Image ID="Image1" runat="server"
ImageUrl='<%# Eval("photo") %>' />
</ItemTemplate>
- 54 -
‫>‪</asp:TemplateField‬‬
‫>‪</Columns‬‬
‫>‪</asp:GridView‬‬
‫>‪SelectCommand="SELECT * FROM [employees]"></asp:SqlDataSource‬‬
‫>‪</div‬‬
‫ﻻﺣظﻧﺎ ﻣن ﺧﻼل اﻟﻣﺛﺎل اﻟﺳﺎﺑق أن ﻧﻣط اﻟﺣﻘول ‪ TemplateField‬ﯾﺣﺗوي ﻋﻠﻰ ﻧﻣطﯾن ﻣن اﻟﻘواﻟب أﺣدھﻣﺎ‬
‫ﻟوﺿﻌﯾﺔ ﻋرض اﻟﺑﯾﺎﻧﺎت و اﻵﺧر ﯾظﮭر ﻋﻧد وﺿﻌﯾﺔ اﻟﺗﻌدﯾل ‪ ,‬ﻓﻲ اﻟﺣﻘﯾﻘﺔ ﯾوﺟد أرﺑﻌﺔ أﻧﻣﺎط أﺧرى ﺣﯾث إن‬
‫ﻧﻣط اﻟﺣﻘول ‪ TemplateField‬ﯾدﻋم أﻧﻣﺎط اﻟﻘواﻟب اﻟﺗﺎﻟﯾﺔ ‪:‬‬
‫‪ : ItemTemplate‬ﺗظﮭر ﻣﺣﺗوﯾﺎت ھذا اﻟﻘﺎﻟب ﻓﻲ ﻛل ﺳطر ﺑﯾﺎﻧﺎت ﯾﺗم ﻋرﺿﮫ ﺿﻣن اﻷداة‬ ‫‪‬‬
‫‪GridView‬‬
‫‪ : EditItemTemplate‬ﺗظﮭر ﻣﺣﺗوﯾﺎت ھذا اﻟﻘﺎﻟب ﻓﻘط ﻋﻧدﻣﺎ ﯾﻛون اﻟﺳطر ﻓﻲ ﺣﺎﻟﺔ ﺗﻌدﯾل‬ ‫‪‬‬
‫اﻟﺑﯾﺎﻧﺎت‬
‫‪ : InsertItemTemplate‬ﺗظﮭر ﻣﺣﺗوﯾﺎت ھذا اﻟﻘﺎﻟب ﻓﻘط ﻋﻧدﻣﺎ ﻧرﻏب ﺑﺈﺿﺎﻓﺔ ﺳطر ﺟدﯾد و ھذه‬ ‫‪‬‬
‫اﻟﻌﻣﻠﯾﺔ ﻏﯾر ﻣدﻋوﻣﺔ ﺿﻣن اﻷداة ‪ GridView‬وﺑﺎﻟﺗﺎﻟﻲ ﻻﯾوﺟد اﺳﺗﺧدام ﻓﻌﻠﻲ ﻟﮭذا اﻟﻘﺎﻟب ﺿﻣن اﻟـ‬
‫‪ GridView‬وﻟﻛﻧﻧﺎ ﺳﻧﺳﺗﺧدﻣﮫ ﻣﻊ أدوات أﺧرى ﺿﻣن ﻓﺻول ﻗﺎدﻣﺔ‬
‫‪ : AlternatingItemTemplate‬ﺗظﮭر ﻣﺣﺗوﯾﺎت ھذا اﻟﻘﺎﻟب ﻓﻲ اﻷﺳطر ذات اﻟدﻟﯾل اﻟزوﺟﻲ‬ ‫‪‬‬
‫ﺿﻣن اﻟـ ‪ ) GridView‬اﻟﺳطر اﻟﺛﺎﻧﻲ و اﻟراﺑﻊ واﻟﺳﺎدس ‪ ...‬وھﻛذا ( ‪ ,‬ﻓﻲ ﺣﯾن أن اﻷﺳطر اﻟﻔردﯾﺔ‬
‫ﺗﺑﻘﻰ ﻟﺗﻌرض ﻣﺣﺗوﯾﺎت اﻟﻘﺎﻟب ‪ , ItemTemplate‬واذا ﻟم ﯾﺗم ذﻛر ھذا اﻟﻘﺎﻟب ﻓﺈن ﺟﻣﯾﻊ اﻷﺳطر‬
‫ﺳﺗﻌرض ﻣﺣﺗوﯾﺎت اﻟﻘﺎﻟب ‪ ) ItemTemplate‬ﻛﻣﺎ ﻓﻌﻠﻧﺎ ﺿﻣن اﻟﻣﺛﺎل اﻟﺳﺎﺑق (‬
‫‪ : HeaderTemplate‬ﻣﺣﺗوﯾﺎت ھذا اﻟﻘﺎﻟب ﺗظﮭر ﻛﻌﻧوان ﯾظﮭر أﻋﻠﻰ اﻟﻌﻣود‬ ‫‪‬‬
‫‪ : FooterTemplate‬ﻣﺣﺗوﯾﺎت ھذا اﻟﻘﺎﻟب ﺗظﮭر ﻛﻌﻧوان ﯾظﮭر أﺳﻔل اﻟﻌﻣود‬ ‫‪‬‬
‫اﻟﻣﺛﺎل اﻟﺛﺎﻧﻲ‬
‫ﺳﻧﻘوم ﺿﻣن ھذا اﻟﻣﺛﺎل ﺑﺎﻟﺗﻌﺎﻣل ﻣﻊ ﻧﻣط اﻟﻘواﻟب ‪ EditItemTemplate‬وذﻟك ﻹﺿﺎﻓﺔ أداة اﻟﺗﺣﻘق‬
‫‪ RequiredFieldValidator‬ﻟﺿﻣﺎن أن اﻟﻣﺳﺗﺧدم ﻟم ﯾﺗرك ﺣﻘل اﻟﺑﯾﺎﻧﺎت ﻓﺎرغ ﻋﻧد إﺟراء ﻋﻣﻠﯾﺔ اﻟﺗﻌدﯾل‬
‫‪- 55 -‬‬
‫ﻗم ﺑﺈﻧﺷﺎء ﺻﻔﺣﺔ ﺟدﯾدة و أﺿف ﻋﻠﯾﮭﺎ أداة ‪ GridView‬ﻣﻊ ﺗﻔﻌﯾل إﻣﻛﺎﻧﯾﺔ ﺗﻌدﯾل وﺣذف اﻟﺑﯾﺎﻧﺎت ‪ ,‬ﻗم ﺑﻌد‬
‫ذﻟك ﺑﺗﺣوﯾل اﻟﺣﻘل ‪ fname‬إﻟﻰ اﻟﻧﻣط ‪ , TemplateField‬اﺿﻐط ﻋﻠﻰ ‪ SmartTag‬اﻷداة ‪GridView‬‬
‫واﺧﺗر ‪Edit Templates‬‬
‫‪2‬‬
‫‪1‬‬
‫ﻗم ﺑﺗﺣدﯾد اﻟﻘﺎﻟب ‪ , EditItemTemplate‬ﺛم أﺿف أداة اﻟﺗﺣﻘق ‪ RequiredFieldValidator‬ﺑﺟﺎﻧب اﻷداة‬

‫‪ TextBox‬اﻟﻣوﺟودة ﻣﺳﺑﻘﺎ ‪ ,‬ﻗم ﺑظﺑط ﻗﯾﻣﺔ اﻟﺧﺎﺻﯾﺔ ‪ ControlToValidate‬اﻟﺗﺎﺑﻌﺔ ﻷداة اﻟﺗﺣﻘق ﻟرﺑطﮭﺎ‬
‫ﻣﻊ اﻟـ ‪ ) TextBox‬ﻟﻣزﯾد ﻣن اﻟﻣﻌﻠوﻣﺎت ﻋن أدوات اﻟﺗﺣﻘق راﺟﻊ ﻓﺻل "اﺳﺗﺧدام أدوات اﻟﺗﺣﻘق" ( ‪ .‬أﺧﯾرا‬
‫اﺿﻐط ﻋﻠﻰ ‪ End Template Editing‬وﻗم ﺑﺗﺷﻐﯾل اﻟﺻﻔﺣﺔ ‪ ,‬ﻗم ﺑﺎﻟﺿﻐط ﻋﻠﻰ ‪ Edit‬وﺣﺎول ﺗﻌدﯾل‬
‫اﻟﺑﯾﺎﻧﺎت ﺑﻌد أن ﺗﻘوم ﺑﻣﺳﺢ ﻗﯾﻣﺔ اﻻﺳم اﻷول وﻻﺣظ ظﮭور رﺳﺎﻟﺔ اﻻﻋﺗراض و ﻋدم ﺗﻧﻔﯾذ ﻋﻣﻠﯾﺔ اﻟﺗﻌدﯾل ‪.‬‬
‫ﻛود اﻟﺻﻔﺣﺔ ‪:‬‬
‫>‪<div‬‬
‫"‪<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False‬‬
‫> "‪DataKeyNames="id" DataSourceID="SqlDataSource1‬‬
‫>‪<Columns‬‬
‫>‪<asp:CommandField ShowEditButton="True" /‬‬
‫"‪<asp:BoundField DataField="id" HeaderText="id" ReadOnly="True‬‬
‫>‪SortExpression="id" /‬‬
‫‪- 56 -‬‬
<asp:TemplateField HeaderText="fname" SortExpression="fname">

<ItemTemplate>
<asp:Label ID="Label1" runat="server"
Text='<%# Bind("fname") %>'>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"
Text='<%# Bind("fname") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
runat="server" ControlToValidate="TextBox1"
ErrorMessage="‫ "اﻻﺳﻢ إدﺧﺎل اﻟﺮﺟﺎء‬ForeColor="Red" >
</asp:RequiredFieldValidator>
</EditItemTemplate>
</Columns>
</asp:GridView>
SelectCommand="SELECT * FROM [employees]"
UpdateCommand="UPDATE [employees] SET [fname] = @fname, [lname] = @lname
WHERE [id] = @id">
<UpdateParameters>
</UpdateParameters>
</div>
: ‫اﻟﻣﺛﺎل اﻟﺛﺎﻟث‬
GridView ‫ داﺧل اﻷداة‬DropDownList ‫اﺳﺗﺧدام اﻷداة‬
‫ داﺧل اﻷداة‬DropDownList ‫ ﻟوﺿﻊ أداة‬TemplateField ‫ﺿﻣن ھذا اﻟﻣﺛﺎل ﺳﻧﻘوم ﺑﺎﺳﺗﺧدام ﻧﻣط اﻟﺣول‬
‫ ﻛﻣﺎ‬,( ‫ ﺣﯾث ﺗظﮭر ﻓﻲ ﺣﺎﻟﺔ ﺗﺣرﯾر ﺳطر اﻟﺑﯾﺎﻧﺎت ﻷﺟراء ﺗﻌدﯾل ﻣﺎ ) راﺟﻊ اﻟﻣﺛﺎل اﻟﺳﺎﺑق‬GridView
: ‫ﺗوﺿﺢ اﻟﺻورة اﻟﺗﺎﻟﯾﺔ‬
- 57 -
‫ وارﺑطﮭﺎ ﻣﻊ‬GridView ‫ ﺑداﯾﺔ ﻗم ﺑﺈﺿﺎﻓﺔ أداة‬. EditItemTemplate ‫وﺑﺎﻟﺗﺎﻟﻲ ﻓﺈﻧﻧﺎ ﺳﻧﺗﻌﺎﻣل ﻣﻊ اﻟﻘﺎﻟب‬
‫ و‬Departments ‫ ﻧﻘوم ﺑرﺑط اﻟﺟدوﻟﯾن‬Select ‫ ﺑﺣﯾث ﺿﻣن ﻋﺑﺎرة اﻟـ‬SqlDataSource1 ‫ﻣﺻدر ﺑﯾﺎﻧﺎت‬
‫ ﻣﻊ ﺑﻌﺿﮭﻣﺎ ) ﻋﺑر اﻟﺣﻘل رﻗم اﻟﻘﺳم ( وذﻟك ﻟﻛﻲ ﻧﺗﻣﻛن ﻣن ﻋرض اﺳم اﻟﻘﺳم ﺿﻣن ﺟدول‬Employees
. ‫ و ﻗم طﺑﻌﺎ ﺑﺗﻔﻌﯾل ﺧﯾﺎرات اﻟﺗﻌدﯾل واﻟﺣذف ﺿﻣن ﻣﺻدر اﻟﺑﯾﺎﻧﺎت‬GridView ‫اﻟـ‬
<div>
<Columns>
<asp:CommandField ShowEditButton="True" />
</Columns>
</asp:GridView>
SelectCommand="SELECT [employees].[id], [fname], [lname], [deptId], [name]
FROM [employees] inner join [departments] ON [employees].[deptId] = [departments].[id] "
[deptId] = @deptId WHERE [id] = @id">
<UpdateParameters>
</UpdateParameters>
</div>
- 58 -
‫ واﻟﺗﻲ ﺗظﮭر ﺑﻌد اﻟﻧﻘر‬Fields ‫ وذﻟك ﻣن اﻟﻧﺎﻓذة‬TemplateField ‫ﻗم ﺑﻌد ذﻟك ﺑﺈﺿﺎﻓﺔ ﺣﻘل ﺟدﯾد ﻣن اﻟﻧﻣط‬
‫ و ﻧﺣدد‬Edit Template ‫ ﺑﻌد ذﻟك ﻧﺧﺗﺎر‬. Edit Columns ‫ واﺧﺗﯾﺎر‬GridView ‫ اﻷداة‬smart tag ‫ﻋﻠﻰ‬
‫ و ﻧرﺑطﮭﺎ ﻣﻊ ﺟدول اﻷﻗﺳﺎم‬DropDownList ‫ ﺛم ﻧﺿﻊ ﺑداﺧﻠﮫ أداة‬EditItemTemplate ‫اﻟﻘﺎﻟب‬
‫ وذﻟك ﺣﺗﻰ‬deptId ‫ اﺳم ﻣﺳﺗﻌﺎر وﻟﯾﻛن‬Id ‫ ﻗم ﺑﺈﻋطﺎء اﻟﺣﻘل‬select ‫ و ﻟﻛن ﻓﻲ ﻋﺑﺎرة اﻟـ‬Departments
‫ ﻟﻛﻲ ﻧﺗﻣﻛن ﻣن اﺳﺗﺧدام ﻗﯾﻣﺗﮫ ﻋﻧد ﺗﻌدﯾل رﻗم‬Employees ‫ﯾﺗطﺎﺑق ﻣﻊ اﺳم اﻟﻌﻣود اﻟﻣﻘﺎﺑل ﻟﮫ ﺿﻣن اﻟﺟدول‬
‫ ﻧﺟﻌﻠﮭﺎ ﺗﻌرض‬Lable ‫ ﻓﺈﻧﻧﺎ ﺳﻧﺿﯾف أداة‬ItemTemplate ‫أﻣﺎ ﺿﻣن اﻟﻘﺎﻟب‬. ‫اﻟﻘﺳم اﻟﺧﺎص ﺑﻣوظف ﻣﺎ‬
: ‫اﺳم اﻟﻘﺳم ﻛﻣﺎ ﯾوﺿﺢ ﻛود اﻟﺻﻔﺣﺔ‬
<div>
<Columns>
<asp:CommandField ShowEditButton="True" />
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label1" runat="server"
Text='<%# Eval("name") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:DropDownList ID="DropDownList1" runat="server"
DataSourceID="SqlDataSource2" DataTextField="name"
DataValueField="deptId"
SelectedValue='<%# Bind("deptId") %>'
>
</asp:DropDownList>
</EditItemTemplate>
- 59 -
</Columns>
</asp:GridView>

SelectCommand="SELECT [id] as deptId, [name] FROM [departments]">
SelectCommand="SELECT [employees].[id], [fname], [lname], [deptId], [name]
FROM [employees] inner join [departments]
ON [employees].[deptId] = [departments].[id] "
[deptId] = @deptId WHERE [id] = @id">
<UpdateParameters>
</UpdateParameters>
</div>
GridView ‫اﻷﺣداث اﻟﺗﻲ ﺗطﻠﻘﮭﺎ اﻷداة‬
: ‫ واﻟﺗﻲ ﯾﻣﻛن ﺗﻘﺳﯾﻣﮭﺎ إﻟﻰ ﺛﻼث ﻣﺟﻣوﻋﺎت‬, Events ‫ ﻣﺟﻣوﻋﺔ ﻛﺑﯾرة ﻣن اﻷﺣداث‬GridView ‫ﺗطﻠق اﻷداة‬
ً‫ ﻣﻊ ﻣﺻدر اﻟﺑﯾﺎﻧﺎت واﻧﺗﮭﺎءا‬GridView ‫ اﻷﺣداث اﻟﺗﻲ ﯾﺗم إطﻼﻗﮭﺎ ﺑدءاً ﻣن رﺑط اﻷداة‬: ‫اﻟﻣﺟﻣوﻋﺔ اﻷوﻟﻰ‬
: ‫ وھذه اﻷﺣداث ھﻲ‬, ‫ﺑﻌرض اﻟﺑﯾﺎﻧﺎت‬
‫ ﻣﻊ ﻣﺻدر اﻟﺑﯾﺎﻧﺎت‬GridView ‫ ﯾﺗم إطﻼﻗﮫ ﻣﺑﺎﺷر ًة ﻗﺑل رﺑط اﻷداة‬: DataBinding 

‫ ﻣﻊ ﻣﺻدر اﻟﺑﯾﺎﻧﺎت‬GridView ‫ ﯾﺗم إطﻼﻗﮫ ﻣﺑﺎﺷر ًة ﺑﻌد رﺑط اﻷداة‬: DataBound 
‫ ﻟﻧﻔرض أن ﻣﺻدر اﻟﺑﯾﺎﻧﺎت ﯾﺣﺗوي‬. ‫ ﯾﺗم إطﻼﻗﮫ ﻋﻧد ﻛل ﻋﻣﻠﯾﺔ إﻧﺷﺎء ﻟﺳطر ﺟدﯾد‬: RowCreated 
‫ ﺧﻣﺳﯾن ﻣرة ) ﻣرة واﺣدة‬GridView ‫ ﻋﻧدﺋذ ﯾﺗم إطﻼق ھذا اﻟﺣدث ﺿﻣن اﻟـ‬, ‫ﻋﻠﻰ ﺧﻣﺳﯾن ﺳﺟل‬
. ( ‫ﻟﻛل ﺳطر ﯾﺗم إﻧﺷﺎؤه‬
‫ ﻣﻊ ﺳﺟل ﺑﯾﺎﻧﺎت ﻣن ﻣﺻدر‬GridView ‫ ﯾﺗم إطﻼﻗﮫ ﻋﻧد رﺑط ﺳطر ﻣن اﻟـ‬: RowDataBound 
. ( ‫ وﻟﻛن ﻋﻧد رﺑط اﻟﺳطر و ﻟﯾس ﻋﻧد إﻧﺷﺎﺋﮫ‬RowCreated ‫اﻟﺑﯾﺎﻧﺎت ) ﻣﺷﺎﺑﮫ ﻟﻠﺣدث‬
GridView ‫ ﻣﺟﻣوﻋﺔ اﻷﺣداث اﻟﺗﻲ ﺗﺗﻌﻠق ﺑﺎﺧﺗﯾﺎر أو ﺗﻌدﯾل ﺳطر اﻟﺑﯾﺎﻧﺎت ﺿﻣن اﻷدة‬: ‫اﻟﻣﺟﻣوﻋﺔ اﻟﺛﺎﻧﯾﺔ‬
: ‫ وھذه اﻷﺣداث ھﻲ‬, ‫وھﻲ اﺳﺗﺟﺎﺑﺔ ﻟﻔﻌل ﻗﺎم ﺑﮫ اﻟﻣﺳﺗﺧدم‬
- 60 -
‫‪ : RowUpdating‬ﯾﺗم إطﻼﻗﮫ ﻗﺑل ﺗﻌدﯾل ﺳطر اﻟﺑﯾﺎﻧﺎت ﻣﺑﺎﺷرة‬ ‫‪‬‬

‫‪ : RowUpdated‬ﯾﺗم إطﻼﻗﮫ ﺑﻌد ﺗﻌدﯾل ﺳطر اﻟﺑﯾﺎﻧﺎت ﻣﺑﺎﺷرة‬ ‫‪‬‬
‫‪ : RowCancelingEdit‬ﯾﺗم إطﻼﻗﮫ ﻋﻧدﻣﺎ ﯾﺗم إﻟﻐﺎء ﻋﻣﻠﯾﺔ ﺗﻌدﯾل ﺳطر اﻟﺑﯾﺎﻧﺎت‬ ‫‪‬‬
‫‪ : RowDeleting‬ﯾﺗم إطﻼﻗﮫ ﻗﺑل ﺣذف ﺳطر اﻟﺑﯾﺎﻧﺎت ﻣﺑﺎﺷرة‬ ‫‪‬‬
‫‪ : RowDeleted‬ﯾﺗم إطﻼﻗﮫ ﺑﻌد ﺣذف ﺳطر اﻟﺑﯾﺎﻧﺎت ﻣﺑﺎﺷرة‬ ‫‪‬‬
‫‪ : RowCommand‬ﯾﺗم إطﻼﻗﮫ ﻛﺎﺳﺗﺟﺎﺑﺔ ﻷي ﺣدث اﻧطﻠق ﻣن ﻗﺑل أداة ﻣوﺟودة ﺿﻣن اﻷداة‬ ‫‪‬‬
‫‪ , GridView‬ﻣﺛﻼ ﻟو ﻗﻣت ﺑﺎﻟﺿﻐط ﻋﻠﻰ زر ﻣوﺟود ﺿﻣن اﻷداة ‪ GridView‬ﻋﻧدﺋذ ﯾﺗم إطﻼق‬
‫ھذا اﻟﺣدث وﻗد رأﯾﻧﺎ ھذا اﻷﻣر ﺿﻣن ﻣﺛﺎل ﺳﺎﺑق ﻓﻲ ھذا اﻟﻔﺻل ‪.‬‬
‫‪ : SelectedIndexChanging‬ﯾﺗم إطﻼق ھذا اﻟﺣدث ﻋﻧدﻣﺎ ﯾﻘوم اﻟﻣﺳﺗﺧدم ﺑﺎﺧﺗﯾﺎر ﺳطر ﺑﯾﺎﻧﺎت‬ ‫‪‬‬
‫ﻣﺧﺗﻠف ﻋن اﻟﺳطر اﻟﺣﺎﻟﻲ ‪ ,‬وھذا اﻟﺣدث ﯾﺗم إطﻼﻗﮫ ﻗﺑل ﺗﻐﯾﯾر اﻟﺳطر اﻟﻣﺧﺗﺎر ﻣﺑﺎﺷرة‬
‫‪ : SelectedIndexChanged‬ﯾﺗم إطﻼﻗﮫ ﺑﻌد اﻟﻘﯾﺎم ﺑﺎﺧﺗﯾﺎر ﺳطر ﻣﺎ ﻣﺑﺎﺷرة‬ ‫‪‬‬
‫اﻟﻣﺟﻣوﻋﺔ اﻟﺛﺎﻟﺛﺔ ‪ :‬اﻷﺣداث اﻟﺗﻲ ﺗﺗﻌﻠق ﺑﺗرﺗﯾب اﻟﺑﯾﺎﻧﺎت أو ﺗﻘﺳﯾﻣﮭﺎ إﻟﻰ ﻋدة ﺻﻔﺣﺎت وھﻲ ‪:‬‬
‫‪ : Sorting‬ﯾﺗم إطﻼﻗﮫ ﻗﺑل ﺗرﺗﯾب اﻟﺑﯾﺎﻧﺎت ﻣﺑﺎﺷرة‬ ‫‪‬‬

‫‪ : Sorted‬ﯾﺗم إطﻼﻗﮫ ﺑﻌد ﺗرﺗﯾب اﻟﺑﯾﺎﻧﺎت ﻣﺑﺎﺷرة‬ ‫‪‬‬
‫‪ : PageIndexChanging‬ﯾﺗم إطﻼﻗﮫ ﻗﺑل ﺗﻐﯾﯾر اﻟﺻﻔﺣﺔ اﻟﺣﺎﻟﯾﺔ ﻣﺑﺎﺷرة )ﺻﻔﺣﺔ ‪(GridView‬‬ ‫‪‬‬
‫وھذا اﻟﺣدث ﯾﻌﻣل ﻓﻘط ﻓﻲ ﺣﺎﻟﺔ ﺗﻘﺳﯾم اﻟﺑﯾﺎﻧﺎت ﺿﻣن اﻷداة ‪ GridView‬إﻟﻰ ﻋدة ﺻﻔﺣﺎت ‪.‬‬
‫‪ : PageIndexChanged‬ﻣﺷﺎﺑﮫ ﻟﻠﺣدث اﻟﺳﺎﺑق وﻟﻛن ﯾﺗم إطﻼﻗﮫ ﺑﻌد ﺗﻐﯾﯾر اﻟﺻﻔﺣﺔ اﻟﺣﺎﻟﯾﺔ ﻣﺑﺎﺷرة‬ ‫‪‬‬
‫ﺗﻣﯾﯾز اﻷﺳطر وﻓق ﺷطر ﻣﻌﯾن‬
‫ﺳﻧﻘوم ﺿﻣن ھذه اﻟﻔﻘرة ﺑﺗطﺑﯾق ﻣﺛﺎل ﻟﺗوﺿﯾﺢ ﻋﻣل اﻟﺣدث ‪ , RowDataBound‬ﺣﯾث ﺳﻧﻘوم ﺑﺟﻌل أﺳطر‬
‫اﻟﻣوظﻔﯾن اﻟﻣﺗزوﺟﯾن ﺗظﮭر ﺑﺎﻟﻠون اﻷﺻﻔر ‪ ,‬ﻛﻣﺎ ﺗوﺿﺢ اﻟﺻورة اﻟﺗﺎﻟﯾﺔ ‪:‬‬
‫‪- 61 -‬‬
‫ ﺑﻌد اﻻﻧﺗﮭﺎء ﻣن ذﻟك‬, ‫ و ارﺑطﮭﺎ ﻣﻊ ﺟدول اﻟﻣوظﻔﯾن‬GridView ‫ﻗم ﺑﺈﻧﺷﺎء ﺻﻔﺣﺔ ﺟدﯾدة و أﺿف إﻟﯾﮭﺎ أداة‬
GridView ‫ اﻟﺧﺎص ﺑﺎﻷداة‬RowDataBound ‫ﻗم ﺑﻛﺗﺎﺑﺔ اﻟﻛود اﻟﺗﺎﻟﻲ ﺿﻣن اﻟﺣدث‬
C# ‫ﻛود‬
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
bool marriage = (bool)DataBinder.Eval(e.Row.DataItem, "marriage");
if (marriage)
e.Row.BackColor = System.Drawing.Color.Yellow;
}
}
VB ‫ﻛود‬
Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As
GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
Dim marriage As Boolean = CType(DataBinder.Eval(e.Row.DataItem, "marriage"),
Boolean)
If marriage Then
e.Row.BackColor = System.Drawing.Color.Yellow
End If
End If
End Sub
‫ وﺑﺎﻟﺗﺎﻟﻲ ﻧﻔﺣص‬, ‫ ﻣﻊ ﺳﺟل اﻟﺑﯾﺎﻧﺎت‬GridView ‫ﻻﺣظ ﺑﺄن اﻟﻛود اﻟﺳﺎﺑق ﯾﻌﻣل ﺑﻌد رﺑط ﻛل ﺳطر ﺿﻣن اﻟـ‬
‫ أﻣﺎ اﻟﺳطر‬. ‫“ ﯾﺗم ﺗﻠوﯾن اﻟﺳطر اﻟﺣﺎﻟﻲ ﺑﺧﻠﻔﯾﺔ ﺻﻔراء‬True” ‫“ ﻓﺈن ﻛﺎﻧت ﻗﯾﻣﺗﮫ‬marriage” ‫ﻗﯾﻣﺔ اﻟﺣﻘل‬
‫اﻟذي وﺿﻌﻧﺎه ﻓﻲ أول اﻟﻛود ﻓﮭو ﯾﻔﺣص أن اﻟﺳطر اﻟﺣﺎﻟﻲ ھو ﺳطر ﺑﯾﺎﻧﺎت و ذﻟك ﺣﺗﻰ ﯾﺗم اﺳﺗﺛﻧﺎء ﺳطر‬
‫ ﻓﮭو اﻟذي ﯾﻘوم ﺑرﺑط ﺳﺟل اﻟﺑﯾﺎﻧﺎت ﻣن ﻣﺻدر‬DataBinder ‫ أﻣﺎ اﻟﺻف‬. ‫اﻟﻌﻧﺎوﯾن ﻣن اﻟﻛود اﻟﺳﺎﺑق‬
‫ ﻟذﻟك ﻗﻣﻧﺎ ﺑﺎﺳﺗﺧداﻣﮭﺎ ﻟﻠوﺻول إﻟﻰ‬, Eval() ‫ وذﻟك ﻋﺑر اﻟداﻟﺔ‬GridView ‫اﻟﺑﯾﺎﻧﺎت ﻣﻊ ﺳطر ﺿﻣن اﻷداة‬
. “marriage” ‫ﻗﯾﻣﺔ اﻟﺣﻘل‬
<div>
onrowdatabound="GridView1_RowDataBound" >
- 62 -
<Columns>
</Columns>
</asp:GridView>
SelectCommand="SELECT * FROM [employees]" />
</div>
GridViewRow ‫ وھﻲ ﺧﺻﺎﺋص ﺗﺗﺑﻊ ﻟﻠﺻف‬RowType , DataItem ‫ﺿﻣن اﻟﻣﺛﺎل اﻟﺳﺎﺑق اﺳﺗﺧدﻣﻧﺎ‬
: ‫ﺣﯾث إﻧﮫ ﯾﺣﺗوي ﻋﻠﻰ اﻟﺧﺻﺎﺋص اﻟﺗﺎﻟﯾﺔ‬
. ‫ ﺗﻣﺛل ﻣﺟﻣوﻋﺔ ﺧﻼﯾﺎ اﻟﺳطر اﻟﺣﺎﻟﻲ ﺣﯾث ﯾﻣﻛن اﻟوﺻول ﻟﻘﯾﻣﺔ ﻛل ﺧﻠﯾﺔ ﻣﻧﮭﺎ‬: Cells 
. ‫ ﯾﻣﺛل ﺳﺟل اﻟﺑﯾﺎﻧﺎت اﻟذي ﯾﺗم رﺑطﮫ ﻣﻊ ﺳطر اﻟﺑﯾﺎﻧﺎت اﻟﺣﺎﻟﻲ‬: DataItem 
. ‫ ﯾﻣﺛل دﻟﯾل اﻟﺳطر اﻟﺣﺎﻟﻲ‬: RowIndex 
DataRow, ‫ ﯾﻣﺛل ﻧﻣط اﻟﺳطر اﻟﺣﺎﻟﻲ ﺣﯾث ﯾﻣﻛن أن ﯾﺄﺧد إﺣدى اﻟﻘﯾم اﻟﺗﺎﻟﯾﺔ‬: RowType 
. Header, Footer, NullRow, Pager, Separator
‫ آﺧر‬GridView ‫ داﺧل‬GridView ‫اﺳﺗﺧدام‬
‫ ﻣﺛﻼ ﻟﻧﻔﺗرض أﻧﻧﺎ‬, ‫ آﺧر‬GridView ‫ داﺧل‬GridView ‫ھﻧﺎك اﻟﻌدﯾد ﻣن اﻟﺣﺎﻻت اﻟﺗﻲ ﻧﺣﺗﺎج ﻓﯾﮭﺎ ﻟوﺿﻊ‬
: ‫ ﻛﻣﺎ ﺗوﺿﺢ اﻟﺻورة‬, ‫ﻧرﯾد ﻋرض اﻷﻗﺳﺎم اﻟﺗﻲ ﻟدﯾﻧﺎ و ﺗﺣت ﻛل ﻗﺳم ﯾﺗم ﻋرض اﻟﻣوظﻔﯾن اﻟﻌﺎﻣﻠﯾن ﻓﯾﮫ‬
- 63 -
‫ وإﺿﺎﻓﺔ ﺣﻘل ﻣن اﻟﻧﻣط‬, ‫ اﻟﺧﺎرﺟﻲ ورﺑطﮫ ﻣﻊ ﺟدول اﻷﻗﺳﺎم‬GridView ‫ﺗﻛﻣن اﻟﻔﻛرة ﺑﺑﺳﺎطﺔ ﺑوﺿﻊ اﻟـ‬
‫ آﺧر و ﻧرﺑطﮫ ﻣﻊ ﺟدول اﻟﻣوظﻔﯾن و ﻧﺿﯾف ﻋﻠﯾﮫ‬GridView ‫ إﻟﯾﮫ وﻧﺿﯾف ﺿﻣﻧﮫ‬TemplateField
‫ ھذا اﻟﻣﺗﺣول ﺳﻧﻘوم ﺑﺗﻐﯾﯾر ﻗﯾﻣﺗﮫ ﻋﻧد ﻛل إطﻼق ﺣدث‬, ‫ﺷرط أن ﯾﻛون رﻗم اﻟﻘﺳم ﻣﺳﺎوي ﻟﻘﯾﻣﺔ ﻣﺗﺣول ﻣﺎ‬
. ‫ اﻟﺧﺎرﺟﻲ ﺑﺣﯾث ﻧﺟﻌﻠﮫ ﯾﺳﺎوي ﻗﯾﻣﺔ رﻗم اﻟﻘﺳم اﻟﺣﺎﻟﻲ‬GridView ‫ ﺿﻣن اﻟـ‬RowDataBound
<div>
DataKeyNames="id" DataSourceID="SqlDataSource1" ShowHeader="False"
onrowdatabound="GridView1_RowDataBound" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<center>
<h2><%#Eval("name") %></h2>
<asp:GridView ID="GridView2" runat="server"
AutoGenerateColumns="False"
DataKeyNames="id" DataSourceID="empDataSource">
<Columns>
- 64 -
<asp:BoundField DataField="id" HeaderText="id"

InsertVisible="False"
<asp:CheckBoxField DataField="marriage"
HeaderText="marriage"
</Columns>
</asp:GridView>
</center>
<asp:SqlDataSource ID="empDataSource" runat="server"
SelectCommand="SELECT * FROM [employees]
WHERE deptId = @deptId">
<SelectParameters>
<asp:Parameter Name="deptId" />
</SelectParameters>
</ItemTemplate>
</Columns>
</asp:GridView>
SelectCommand="SELECT * FROM [departments] ORDER BY [name]">
</div>
: ‫ ﻓﻧﻛﺗب اﻟﻛود اﻟﺗﺎﻟﻲ‬GridView1 ‫ اﻟﺧﺎص ﺑﺎﻷداة‬RowDataBound ‫أﻣﺎ ﺿﻣن اﻟﺣدث‬
C# ‫ﻛود‬
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
int departmentId = (int)DataBinder.Eval(e.Row.DataItem, "id");
SqlDataSource empDataSource =
(SqlDataSource)e.Row.FindControl("empDataSource");
empDataSource.SelectParameters["deptId"].DefaultValue =
departmentId.ToString();
}
}
- 65 -
‫ﻛود ‪VB‬‬
‫‪Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As‬‬
‫)‪GridViewRowEventArgs‬‬
‫‪If e.Row.RowType = DataControlRowType.DataRow Then‬‬
‫‪Dim departmentId As Integer = CType(DataBinder.Eval(e.Row.DataItem, "id"),‬‬
‫)‪Integer‬‬
‫= ‪Dim empDataSource As SqlDataSource‬‬
‫)‪CType(e.Row.FindControl("empDataSource"), SqlDataSource‬‬
‫= ‪empDataSource.SelectParameters("deptId").DefaultValue‬‬
‫)(‪departmentId.ToString‬‬
‫‪End If‬‬
‫‪End Sub‬‬
‫ﺣﯾث ﯾﺗم ﺗﻐﯾﯾر ﻗﯾﻣﺔ اﻟﺑﺎراﻣﺗر ‪ deptId‬ﻋﻧد ﻛل ﻋﻣﻠﯾﺔ رﺑط ﺳﺟل ﺟدﯾد ﻣن اﻟﺟدول ‪ Departments‬ﻣﻊ‬
‫ﺳطر ﻣن اﻷداة ‪. GridView‬‬
‫اﻟﺧﺎﺗﻣﺔ‬
‫إﻟﻰ ھﻧﺎ ﻧﺄﺗﻲ إﻟﻰ ﻧﮭﺎﯾﺔ ھذا اﻟﻔﺻل اﻟطوﯾل واﻟﻣﺗﻌدد اﻷﻓﻛﺎر ﻟﻠﺗﻌﺎﻣل ﻣﻊ اﻷداة ‪ , GridView‬إن اﻟﻛﺛﯾر ﻣن‬
‫اﻟﻣواﺿﯾﻊ اﻟﺗﻲ ﻧﺎﻗﺷﻧﺎھﺎ ﯾﻣﻛن أن ﯾﺗم ﺗطﺑﯾﻘﮭﺎ ﺑﺎﺳﺗﺧدام أدوات اﻟﺑﯾﺎﻧﺎت اﻷﺧرى ﻣﺛل ‪ DataList‬و‬
‫‪ Repeater‬وﻏﯾرھم ﻣن اﻷدوات اﻟﺗﻲ ﺳﻧﻧﺎﻗﺷﮭﺎ ﺑﺎﻟﺗﻔﺻﯾل ﺿﻣن ﻓﺻول ﻗﺎدﻣﺔ ‪ .‬إن أدوات اﻟﺗﺣﻛم ﺑﺎﻟﺑﯾﺎﻧﺎت‬
‫ﺗﻣﺛل ﺟزء ﻛﺑﯾر ﻣن ﻋﺎﻟم ﺗطوﯾر ﻣواﻗﻊ وﺗطﺑﯾﻘﺎت اﻻﻧﺗرﻧت ‪ ,‬وھذا اﻟﻔﺻل ﺳﯾﻛون ﻗﺎﻋدة ﻧﻌﺗﻣد ﻋﻠﯾﮭﺎ أﺛﻧﺎء‬
‫اﻟﻔﺻول اﻟﻘﺎدﻣﺔ ﺣﺗﻰ ﻻﻧﻛرر ﻧﻔس اﻷﻓﻛﺎر ‪ ,‬ﻟذﻟك أرﺟو ﺗطﺑﯾق واﺳﺗﯾﻌﺎب ﺟﻣﯾﻊ اﻷﻓﻛﺎر واﻷﻣﺛﻠﺔ اﻟﺗﻲ ﺗﻣت‬
‫ﻣﻧﺎﻗﺷﺗﮭﺎ ‪ .‬وﷲ وﻟﻲ اﻟﺗوﻓﯾق ‪.‬‬
‫‪- 66 -‬‬
‫اﻟﻔﺻول اﻟﺗﻲ ﺻدرت ﺣﺗﻰ اﻵن ‪:‬‬
‫اﻟﻔﺻل اﻷول ‪ :‬اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻘﯾﺎﺳﯾﺔ‬ ‫‪-1‬‬

‫اﻟﻔﺻل اﻟﺛﺎﻧﻲ ‪ :‬اﺳﺗﺧدام أدوات اﻟﺗﺣﻛم اﻟﻣﺗﻘدﻣﺔ‬ ‫‪-2‬‬
‫اﻟﻔﺻل اﻟﺛﺎﻟث ‪ :‬اﺳﺗﺧدام أدوات اﻟﺗﺣﻘق‬ ‫‪-3‬‬
‫اﻟﻔﺻل اﻟراﺑﻊ ‪ :‬اﺳﺗﺧدام ﺻﻔﺣﺎت اﻟﻣﺎﺳﺗرﺑﯾﺞ‬ ‫‪-4‬‬
‫اﻟﻔﺻل اﻟﺧﺎﻣس ‪ :‬اﺳﺗﺧدام اﻟﺛﯾﻣﺎت ‪Themes‬‬ ‫‪-5‬‬
‫اﻟﻔﺻل اﻟﺳﺎدس ‪ :‬أﺳﺎﺳﯾﺎت اﻟﺗﻌﺎﻣل ﻣﻊ ﻗواﻋد اﻟﺑﯾﺎﻧﺎت‬ ‫‪-6‬‬
‫اﻟﻔﺻل اﻟﺳﺎﺑﻊ ‪ :‬اﺳﺗﺧدام ﻗواﺋم اﻟﺗﻛرار‬ ‫‪-7‬‬
‫اﻟﻔﺻل اﻟﺛﺎﻣن ‪ :‬اﺳﺗﺧدام اﻷداة ‪GridView‬‬ ‫‪-8‬‬
‫ﻟﺗﺣﻣﯾل ﺟﻣﯾﻊ أﺟزاء اﻟﺳﻠﺳﻠﺔ اﻟﻣﺗوﻓرة ‪:‬‬
‫‪https://www.mediafire.com/folder/u44z9omx9ajjv/asp.net‬‬
‫‪http://www.4shared.com/folder/i34_lCo0/ASP.html‬‬
‫أو اﻟﺑﺣث ﻓﻲ ‪Google‬ﻋن ‪ :‬ﻣﺣﻣد ﻋﻣر اﻟﺣﺎج ﺧﻠف ‪-‬أو‪ ASP.NET -‬ﺧطوة ﺑﺧطوة ﺣﺗﻰ اﻻﺣﺗراف‬
‫ﻟﻠﺗواﺻل ‪:‬‬
‫‪m-hajjkhalaf@hotmail.com‬‬
‫‪http://www.facebook.com/mohammed.hajkhalaf‬‬
‫ﻣﺣﻣد ﻋﻣر اﻟﺣﺎج ﺧﻠف – ﺳورﯾﺎ‬
‫‪- 67 -‬‬

GridView - in Arabic PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

GridView - in Arabic PDF

Uploaded by

Copyright:

Available Formats

‫اﻟﻔﺻل اﻟﺛﺎﻣن‬

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

‫ﻋرض وﺗﻌدﯾل وﺣذف اﻟﺑﯾﺎﻧﺎت‬ ‫‪‬‬

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

‫ﺗﺣﺿﯾر ﻗﺎﻋدة اﻟﺑﯾﺎﻧﺎت‬

‫وﺻف اﻟﺣﻘل‬ ‫ﻧﻣط اﻟﺑﯾﺎﻧﺎت‬ ‫اﺳم اﻟﺣﻘل‬

‫أﻣﺎ ﺟدول اﻟﻣوظﻔﯾن ﻓﻧﻌطﯾﮫ اﻻﺳم ‪ employees‬وﻟﮫ اﻟﺑﻧﯾﺔ اﻟﺗﺎﻟﯾﺔ ‪:‬‬

‫وﺻف اﻟﺣﻘل‬ ‫ﻧﻣط اﻟﺑﯾﺎﻧﺎت‬ ‫اﺳم اﻟﺣﻘل‬

‫ﻧﻘوم ﺑﻣﻠﺊ ﺟدول اﻷﻗﺳﺎم ﺑﺎﻟﺑﯾﺎﻧﺎت اﻟﺗﺎﻟﯾﺔ ‪:‬‬

‫‪discreption‬‬ ‫‪Name‬‬ ‫‪Id‬‬

‫ﻛﻣﺎ ﻧﻘوم ﺑﻣﻠﺊ ﺟدول اﻟﻣوظﻔﯾن ﺑﺎﻟﺑﯾﺎﻧﺎت اﻟﺗﺎﻟﯾﺔ ‪:‬‬

‫‪photo‬‬ ‫‪deptID‬‬ ‫‪salary‬‬ ‫‪marriage‬‬ ‫‪lname‬‬ ‫‪Fname‬‬ ‫‪id‬‬

: ‫أﻣﺎ ﻛود اﻟﺻﻔﺣﺔ ﻓﯾﻛون‬

: ‫أﻣﺎ ﻛود اﻟﺻﻔﺣﺔ ﻛﺎﻣﻼ ﻓﯾﻛون ﻛﺎﻟﺗﺎﻟﻲ‬

‫"‪<asp:SqlDataSource ID="SqlDataSource1" runat="server‬‬

‫ﺗﻘﺳﯾم اﻟﺑﯾﺎﻧﺎت إﻟﻰ ﻋدة ﺻﻔﺣﺎت‬

‫"‪<asp:SqlDataSource ID="SqlDataSource1" runat="server‬‬

‫ﺣذف وﺗﻌدﯾل اﻟﺑﯾﺎﻧﺎت‬

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

‫ﻋدم وﺟود ﺑﯾﺎﻧﺎت‬

: ‫أﻣﺎ ﻛود اﻟﺻﻔﺣﺔ ﻓﯾﻛون ﺑﺎﻟﺷﻛل اﻟﺗﺎﻟﻲ‬

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

‫ﺗﻧﺳﯾق ﻣظﮭر اﻷداة ‪GridView‬‬

‫‪ : HeaderStyle‬ﺗﻣﻛﻧﻧﺎ ﻣن ﺗﻧﺳﯾق ﻣظﮭر ﺳطر ﻋﻧﺎوﯾن اﻷﻋﻣدة ‪.‬‬ ‫‪‬‬

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

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" PageSize="5"

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

‫ﺗﺧﺻﯾص اﻟﺣﻘول ﻓﻲ اﻷدة ‪GridView‬‬

‫ﺗدﻋم اﻷداة ‪ GridView‬ﺳﺑﻌﺔ أﻧﻣﺎط ﻟﻠﺣﻘول وھﻲ ‪:‬‬

‫‪ : BoundField‬ﺗﻣﻛﻧﻧﺎ ﻣن ﻋرض اﻟﺑﯾﺎﻧﺎت ﻛﻧص ﻋﺎدي ‪.‬‬ ‫‪‬‬

‫اﺳﺗﺧدام ﻧﻣط اﻟﺣﻘول ‪BoundFiled‬‬

‫ﺧﺻﺎﺋص اﻟﻧﻣط ‪: BoundField‬‬

‫‪ : DataField‬ﺗﺳﻣﺢ ﺑﺗﺧﺻﯾص اﺳم ﺑرﻣﺟﻲ ﻟﻠﺣﻘل ‪.‬‬ ‫‪‬‬

‫‪ : Visible ‬ﻟﻌرض أو إﺧﻔﺎء ھذا اﻟﺣﻘل ‪.‬‬

<asp:CheckBoxField DataField="marriage" HeaderText="‫"ﻣﺘﺰوج؟‬

‫اﺳﺗﺧدام ﻧﻣط اﻟﺣﻘول ‪CheckBoxFields‬‬

‫إن اﻟﺻف ‪ CheckBoxField‬ﯾرث ﻣن اﻟﺻف ‪ BoundFeild‬وھذا ﯾﻌﻧﻲ أن اﻟﻧﻣط ‪CheckBoxFeild‬‬

‫‪ : Text ‬ﺗﺳﻣﺢ ﺑﺈظﮭﺎر ﻧص ﺑﺟﺎﻧب ﻛل ‪ CheckBox‬ﺿﻣن اﻟﺣﻘل ‪.‬‬

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

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"

‫>‪<asp:Parameter Name="photo" Type="String" /‬‬

‫ﻧﻣط اﻟﺣﻘول ‪ CommandFields‬ﯾدﻋم اﻟﺧﺻﺎﺋص اﻟﺗﺎﻟﯾﺔ ‪:‬‬

: ‫أﻣﺎ اﻟﺧﺻﺎﺋص اﻟﻣﻌدﻟﺔ ﻓﺗظﮭر ﻓﻲ اﻟﻛود اﻟﺗﺎﻟﻲ‬

‫اﺳﺗﺧدام ﻧﻣط اﻟﺣﻘول ‪ImageField‬‬

‫ﻗم اﻵن ﺑﺗﻧﻔﯾذ اﻟﺻﻔﺣﺔ اﻟﺳﺎﺑﻘﺔ ‪ ,‬وﺳﺗظﮭر اﻟﻧﺗﯾﺟﺔ اﻟﺗﺎﻟﯾﺔ ‪:‬‬

<asp:CheckBoxField DataField="marriage" HeaderText="marriage"

: ‫ ﯾدﻋم اﻟﺧﺻﺎﺋص اﻟﺗﺎﻟﯾﺔ‬ImageField ‫ﻧﻣط اﻟﺣﻘول‬

‫ ﻟﺗﺣدﯾد ﻧص ﺑدﯾل ﯾﺗم ﻋرﺿﮫ ﻓﻲ ﺣﺎل ﻋدم ظﮭور اﻟﺻورة‬: AlternateText 

‫اﺳﺗﺧدام ﻧﻣط اﻟﺣﻘول ‪ButtonFields‬‬

‫ﯾﺗم ﻛﺗﺎﺑﺔ اﻟﻛود ﻓﻌﻠﯾﺎ ﺿﻣن اﻟﺣدث ‪ RowCommand‬اﻟﺗﺎﺑﻊ ﻟﻸداة ‪. GridView‬‬

‫ﺗﺟرﺑﺔ ﺑﺳﯾطﺔ ‪:‬‬

: ‫أﻣﺎ ﻛود اﻟﺻﻔﺣﺔ ﻓﯾﻛون ﺑﺎﻟﺷﻛل‬

If filename <> "" Then

‫إن اﻟﻣﺗﺣول ‪ e‬ﯾﻣﺗﻠك ﻣﺟﻣوﻋﺔ ﻣن اﻟﺧﺻﺎﺋص ﻣﻧﮭﺎ ‪ CommandName‬و ‪CommandArgument‬‬

‫اﺳﺗﺧدام ﻧﻣط اﻟﺣﻘول ‪HyperLinkField‬‬

‫ﻟﻧﻘم ﺑداﯾﺔ ﺑﺑﻧﺎء اﻟﺻﻔﺣﺔ ‪ , Deparments.aspx‬أﺿف ﻋﻠﯾﮭﺎ أداة ‪ GridView‬ارﺑطﮭﺎ ﻣﻊ اﻟﺟدول‬

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"

‫">‪ConnectionString="<%$ ConnectionStrings:ConnectionString %‬‬

‫ﻧﻣط اﻟﺣﻘول ‪ HyperLinkField‬ﯾدﻋم اﻟﺧﺻﺎﺋص اﻟﺗﺎﻟﯾﺔ ‪:‬‬

‫‪ : DataNavigateUrlFields‬ﻟﺗﺣدﯾد ﺣﻘل ) أو ﻣﺟﻣوﻋﺔ ﺣﻘول ( ﻣن ﻣﺻدر اﻟﺑﯾﺎﻧﺎت ﻟﯾﺗم‬ ‫‪‬‬

. ‫ﻧﻛﻣل ﺑﺎﻗﻲ اﻟﺧطوات ﻛﺎﻟﻣﻌﺗﺎد‬

‫اﺳﺗﺧدام ﻧﻣط اﻟﺣﻘول ‪TemplteField‬‬

‫اﻟﻣﺛﺎل اﻷول ‪:‬‬