自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

ASP.NET 2.0中的GridView控件應(yīng)用實(shí)例

作者：佚名
開發(fā) 后端
GridView控件可以綁定到 SqlDataSource 控件以返回的數(shù)據(jù)記錄的字段以動(dòng)態(tài)生成網(wǎng)格， GridView控件為我們提供了多種數(shù)據(jù)綁定列類型，本文將向您詳細(xì)介紹ASP.NET 2.0中的GridView控件的應(yīng)用。

ASP.NET 2.0的GridView控件是由一系列數(shù)據(jù)顯示控件之一，它可以綁定到 SqlDataSource 控件以返回的數(shù)據(jù)記錄的字段以動(dòng)態(tài)生成網(wǎng)格， GridView控件為我們提供了多種數(shù)據(jù)綁定列類型，例如BoundField 默認(rèn)數(shù)據(jù)綁定列類型是一種簡(jiǎn)單的數(shù)據(jù)類型,展現(xiàn)了文本數(shù)據(jù)值。

其他類型方面的數(shù)據(jù)顯示文本內(nèi)容交替使用、CheckBoxField 復(fù)選框顯示布爾數(shù)據(jù)類型、CommandField 顯示一個(gè)按扭，按扭的類型可以是Button 普通按扭、LinkButton超鏈接按扭、ImageButton圖片按扭，等等類型，GridView控件還提供Templatefield,使用模板. 可以對(duì)數(shù)據(jù)字段進(jìn)行自定義的模板，模板可包括各種靜態(tài)文本、lable、TextBox 文本框. 此外,有各種Templatefield模板,可被用來為用戶提供了不同情況下的模板。例如,ItemTemplate顯示模板可以用來制作顯示數(shù)據(jù)時(shí)的,但EditItemTemplate編輯模板可以用來制作編輯時(shí)、HeaderTemplate自定義表頭模板、FooterTemplate自定義表尾模板。

今天我們要介紹如何利用Templatefield設(shè)置 GridView的外觀樣式.下面的示例我們要用GridView控件顯示Northwind數(shù)據(jù)庫(kù)下的employees(雇員表)的EmployeeID、LastName、FirtName、BrthDote字段,要列出所有的員工,員工的姓、名（并將姓和名在同一個(gè)網(wǎng)格顯示）聘請(qǐng)日期、當(dāng)我們編輯數(shù)據(jù)時(shí)聘用日期用日歷控件顯示。

新建一個(gè)頁(yè)面，在設(shè)計(jì)示圖中為頁(yè)面添加一個(gè)SqlDataSource 控件，用于為GridView控件提供所要顯示的數(shù)據(jù)，新建一個(gè)連接，數(shù)據(jù)源配置選擇本地（local或.）使用SQL Servert混合驗(yàn)證模式，輸入用戶名、密碼，選擇選擇名為Northwind的數(shù)據(jù)庫(kù)并測(cè)試連接，測(cè)試連接成功后，保存連接字符串單擊“下一步”按扭，在“指定來自表或視圖中”選擇Employees表，在選擇列中選擇LastName, FirstName, Title, HireDate 等字段。單擊“高級(jí)”，選中“生成INSERT、UPDATE和DELETE語句”和“使用開放式并發(fā)”復(fù)選框，然后單擊“完成”按扭完成對(duì)數(shù)據(jù)的選擇。

為頁(yè)面添加GridView控件，在便捷任務(wù)面板中，選擇SqlDataSource，然后關(guān)閉便捷任務(wù)面板。這樣就創(chuàng)建了ASP.NET 2.0的數(shù)據(jù)綁定控件。并為GridView控件設(shè)置自動(dòng)套用格式。保存并運(yùn)行如圖 1 所示，

GridView控件
圖 1

HTML 代碼如下：

  1. 〈%@ Page Language="C#" AutoEventWireup="true"   
  2. CodeFile="Default.aspx.cs" Inherits="_Default" %〉  
  3.  
  4. 〈!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
  5. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"〉  
  6.  
  7. 〈html xmlns="http://www.w3.org/1999/xhtml" 〉  
  8. 〈head runat="server"〉  
  9. 〈title〉無標(biāo)題頁(yè)〈/title〉  
  10. 〈/head〉  
  11. 〈body〉  
  12. 〈form id="form1" runat="server"〉  
  13. 〈div〉  
  14. 〈asp:SqlDataSource ID="SqlDataSource1" runat="server"   
  15. ConflictDetection="CompareAllValues" 
  16. ConnectionString="  
  17. 〈%$ ConnectionStrings:NorthwindConnectionString %〉"   
  18. DeleteCommand="DELETE FROM [Employees] WHERE [EmployeeID] =   
  19. @original_EmployeeID AND [LastName] =   
  20. @original_LastName AND [FirstName] =   
  21. @original_FirstName AND [Title] =   
  22. @original_Title AND [HireDate] = @original_HireDate"  
  23. InsertCommand="INSERT INTO [Employees] ([LastName],   
  24. [FirstName], [Title], [HireDate]) VALUES (@LastName,   
  25. @FirstName, @Title, @HireDate)"  
  26. OldValuesParameterFormatString="original_{0}"   
  27. SelectCommand="SELECT [EmployeeID], [LastName],   
  28. [FirstName], [Title], [HireDate] FROM [Employees]"  
  29. UpdateCommand="UPDATE [Employees] SET [LastName] =   
  30. @LastName, [FirstName] = @FirstName, [Title] =   
  31. @Title, [HireDate] = @HireDate WHERE [EmployeeID] =   
  32. @original_EmployeeID AND [LastName] = @original_LastName AND   
  33. [FirstName] = @original_FirstName AND [Title] = @original_Title   
  34. AND [HireDate] = @original_HireDate"〉  
  35. 〈DeleteParameters〉  
  36. 〈asp:Parameter Name="original_EmployeeID" Type="Int32" /〉  
  37. 〈asp:Parameter Name="original_LastName" Type="String" /〉  
  38. 〈asp:Parameter Name="original_FirstName" Type="String" /〉  
  39. 〈asp:Parameter Name="original_Title" Type="String" /〉  
  40. 〈asp:Parameter Name="original_HireDate" Type="DateTime" /〉  
  41. 〈/DeleteParameters〉  
  42. 〈UpdateParameters〉  
  43. 〈asp:Parameter Name="LastName" Type="String" /〉  
  44. 〈asp:Parameter Name="FirstName" Type="String" /〉  
  45. 〈asp:Parameter Name="Title" Type="String" /〉  
  46. 〈asp:Parameter Name="HireDate" Type="DateTime" /〉  
  47. 〈asp:Parameter Name="original_EmployeeID" Type="Int32" /〉  
  48. 〈asp:Parameter Name="original_LastName" Type="String" /〉  
  49. 〈asp:Parameter Name="original_FirstName" Type="String" /〉  
  50. 〈asp:Parameter Name="original_Title" Type="String" /〉  
  51. 〈asp:Parameter Name="original_HireDate" Type="DateTime" /〉  
  52. 〈/UpdateParameters〉  
  53. 〈InsertParameters〉  
  54. 〈asp:Parameter Name="LastName" Type="String" /〉  
  55. 〈asp:Parameter Name="FirstName" Type="String" /〉  
  56. 〈asp:Parameter Name="Title" Type="String" /〉  
  57. 〈asp:Parameter Name="HireDate" Type="DateTime" /〉  
  58. 〈/InsertParameters〉  
  59. 〈/asp:SqlDataSource〉  
  60.  
  61. 〈/div〉  
  62. 〈asp:GridView ID="GridView1" runat="server"   
  63. AutoGenerateColumns="False" CellPadding="4" 
  64. DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1"   
  65. ForeColor="#333333" GridLines="None" 
  66. Width="640px"〉  
  67. 〈FooterStyle BackColor="#990000" Font-Bold="True"   
  68. ForeColor="White" /〉  
  69. 〈Columns〉  
  70. 〈asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID"   
  71. InsertVisible="False" 
  72. ReadOnly="True" SortExpression="EmployeeID" /〉  
  73. 〈asp:BoundField DataField="LastName" HeaderText="LastName"   
  74. SortExpression="LastName" /〉  
  75. 〈asp:BoundField DataField="FirstName" HeaderText="FirstName"   
  76. SortExpression="FirstName" /〉  
  77. 〈asp:BoundField DataField="Title" HeaderText="Title"   
  78. SortExpression="Title" /〉  
  79. 〈asp:BoundField DataField="HireDate" HeaderText="HireDate"   
  80. SortExpression="HireDate" /〉  
  81. 〈/Columns〉  
  82. 〈RowStyle BackColor="#FFFBD6" ForeColor="#333333" /〉  
  83. 〈SelectedRowStyle BackColor="#FFCC66" Font-Bold="True"   
  84. ForeColor="Navy" /〉  
  85. 〈PagerStyle BackColor="#FFCC66" ForeColor="#333333"   
  86. HorizontalAlign="Center" /〉  
  87. 〈HeaderStyle BackColor="#990000" Font-Bold="True"   
  88. ForeColor="White" /〉  
  89. 〈AlternatingRowStyle BackColor="White" /〉  
  90. 〈/asp:GridView〉  
  91. 〈/form〉  
  92. 〈/body〉  
  93. 〈/html〉 

#p#

目前,每名員工的姓和名展示了不同表格中。我們也可以在一個(gè)表格中同時(shí)顯示姓和名.在此,我們需要使用Templatefield編輯模板. 我們可以增加一個(gè)新的Templatefield,加上它需要的標(biāo)記和句法databinding,點(diǎn)擊編輯欄的連接GridView控件的智能標(biāo)簽、選擇編輯列選項(xiàng). 選擇Boundfield屬性的在左下角的將次字段轉(zhuǎn)換為TemplateField選項(xiàng),然后單擊"轉(zhuǎn)換成Templatefield這一項(xiàng)，如圖2 所示。

GridView
圖 2

這時(shí)我們?cè)谠O(shè)計(jì)視圖中并沒有發(fā)現(xiàn)有什么改變發(fā)現(xiàn)，實(shí)際上TemplateField已經(jīng)為firstName字段 默認(rèn)設(shè)置了EditItemTemplate 編輯時(shí)模版和ItemTemplate自定義普通模版，并代替了原來的代碼

  1. 〈 asp:BoundField DataField="FirstName"   
  2. HeaderText="FirstName" SortExpression="FirstName" /〉  
  3. 新的代碼如下：  
  4. 〈 asp:TemplateField HeaderText="FirstName"   
  5. SortExpression="FirstName"〉  
  6. 〈 EditItemTemplate〉  
  7. 〈 asp:TextBox ID="TextBox1" runat="server"   
  8. Text='〈 %# Bind("FirstName") %〉'〉〈 /asp:TextBox〉  
  9. 〈 /EditItemTemplate〉  
  10. 〈 ItemTemplate〉  
  11. 〈 asp:Label ID="Label1" runat="server"   
  12. Text='〈 %# Bind("FirstName") %〉'〉〈 /asp:Label〉  
  13. 〈 /ItemTemplate〉  
  14. 〈 /asp:TemplateField〉   

大家可以看到,Templatefield分為兩個(gè)模板—ItemTemplate自定義普通模版用Lable標(biāo)簽顯示數(shù)據(jù)字段firstName,EditItemTemplate編輯時(shí)模版用textbox文本框顯示數(shù)據(jù)字段firstName.大家可以看到在兩個(gè)模板中都都有〈%#bind("fieldname")%〉語句，用來指定要綁定的數(shù)據(jù)字段，我們綁定的字段都為 fieldname 。

通過在設(shè)計(jì)視圖中單擊GridView模板的智能標(biāo)簽選擇編輯摸版一項(xiàng)，可以進(jìn)入GridView模板的編輯界面。如圖 3所示。

GridView
圖 3

我們要在一個(gè)網(wǎng)格中同時(shí)顯示姓和名，這個(gè)時(shí)候我們只需要編輯一下ItemTemplate模版即可以，從工具箱中選擇一個(gè)Lable控件添加到ItemTemplate的模板編輯界面中。如圖 4 所示。

GridView
圖 4

#p#

在ItemTemplate模版中添加Lable標(biāo)簽后，接下來我們要做的是要為其綁定數(shù)據(jù)字段，單擊Lable智能標(biāo)簽選擇選擇編輯databindings選項(xiàng).如圖 5所示。

GridView
圖 5

這時(shí)就會(huì)彈出databindings對(duì)話框. 在這里你可以選擇要綁定的屬性和所綁定的數(shù)據(jù)字段，在可綁定屬性中我們選擇Text屬性，字段綁定我們選擇LastName字段。如圖 6 所示。

GridView
圖 6

注意一點(diǎn):在databindings對(duì)話框中有一個(gè)雙向數(shù)據(jù)綁定的復(fù)選框，這是在數(shù)據(jù)插入和編輯時(shí)才會(huì)用到，這一點(diǎn)我們?cè)谝院髸?huì)介紹到，我們運(yùn)行這個(gè)程序，我們可以看到在FirstName一列中同時(shí)顯示了LastName和FirstName兩個(gè)字段。如圖 7所示。

GridView
圖 7

這樣我們就完成這***步，下面是我們修改后的這些變化后的GridView控件的HTML代碼:

  1. 〈 asp:GridView ID="GridView1" runat="server" 
  2.  AutoGenerateColumns="False" CellPadding="4" 
  3. DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1"   
  4. ForeColor="#333333" GridLines="None" 
  5. Width="640px" 〉  
  6. 〈 FooterStyle BackColor="#990000"   
  7. Font-Bold="True" ForeColor="White" / 〉  
  8. 〈 Columns 〉  
  9. 〈 asp:BoundField DataField="EmployeeID"   
  10. HeaderText="EmployeeID" InsertVisible="False" 
  11. ReadOnly="True" SortExpression="EmployeeID" / 〉  
  12. 〈 asp:BoundField DataField="LastName" HeaderText="LastName"   
  13. SortExpression="LastName" / 〉  
  14. 〈 asp:TemplateField HeaderText="FirstName"   
  15. SortExpression="FirstName" 〉  
  16. 〈 EditItemTemplate 〉  
  17. 〈 asp:TextBox ID="TextBox1" runat="server"   
  18. Text='〈 %# Bind("FirstName") % 〉' 〉〈 /asp:TextBox 〉  
  19. 〈 /EditItemTemplate 〉  
  20. 〈 ItemTemplate 〉  
  21. 〈 asp:Label ID="Label1" runat="server"   
  22. Text='〈 %# Bind("FirstName") % 〉' 〉〈 /asp:Label 〉  
  23. 〈 asp:Label ID="Label2" runat="server"   
  24. Text='〈 %# Eval("LastName") % 〉' Width="62px" 〉〈 /asp:Label 〉  
  25. 〈 /ItemTemplate 〉  
  26. 〈 /asp:TemplateField 〉  
  27. 〈 asp:BoundField DataField="Title" HeaderText="Title"   
  28. SortExpression="Title" / 〉  
  29. 〈 asp:BoundField DataField="HireDate" HeaderText="HireDate"   
  30. SortExpression="HireDate" / 〉  
  31. 〈 /Columns 〉  
  32. 〈 RowStyle BackColor="#FFFBD6" ForeColor="#333333" / 〉  
  33. 〈 SelectedRowStyle BackColor="#FFCC66" Font-Bold="True"   
  34. ForeColor="Navy" / 〉  
  35. 〈 PagerStyle BackColor="#FFCC66" ForeColor="#333333"   
  36. HorizontalAlign="Center" / 〉  
  37. 〈 HeaderStyle BackColor="#990000" Font-Bold="True"   
  38. ForeColor="White" / 〉  
  39. 〈 AlternatingRowStyle BackColor="White" / 〉  
  40. 〈 /asp:GridView 〉 

#p#

接下來我們要做的是在編輯狀態(tài)下雇員雇用日期用日歷控件顯示出來，點(diǎn)擊編輯欄的連接GridView控件的智能標(biāo)簽、選擇編輯列選項(xiàng).選擇hireddate字段， 選擇Boundfield屬性的在左下角的將次字段轉(zhuǎn)換為TemplateField選項(xiàng),然后單擊"轉(zhuǎn)換成Templatefield這一項(xiàng)，如圖 8 所示。

GridView
圖 8

這時(shí)我們進(jìn)入再次進(jìn)入編輯摸版時(shí)，單擊GridView控件的智能標(biāo)簽，選擇編輯模版，templatefield含有一個(gè)ItemTemplate和EditItemTemplate的標(biāo)簽,選擇hiredateTemplatefield的EditItemTemplatee選項(xiàng),將lable 標(biāo)簽刪除，從工具箱中選擇日歷控件放在EditItemTemplate 編輯模版界面上，并設(shè)計(jì)日歷控件控件的風(fēng)格樣式。如圖 9 所示。

GridView
圖 9

我們?yōu)槿諝v控件選擇要顯示的數(shù)據(jù)字段，在可綁定屬性分別選擇selecteddate屬性和VisibleDate屬性進(jìn)行數(shù)據(jù)綁定， 當(dāng)我們單擊編輯按扭對(duì)GridView的數(shù)據(jù)進(jìn)行修改時(shí)，在hireddate一列中不在是一個(gè)文本框讓我們輸入要修改的日期而是一個(gè)可用來選擇日期的日歷控件，這樣可以方便用戶對(duì)日期的修改，也防止了用戶輸入的字段不是日期而引發(fā)的異常，如圖 10 所示。

GridView
圖 10

運(yùn)行程序如圖 11所示。

GridView
圖 11

到目前為止,我們已經(jīng)應(yīng)用了兩個(gè)ASP.NET 2.0模版:在同一個(gè)網(wǎng)格中同時(shí)顯示兩個(gè)數(shù)據(jù)字段,對(duì)數(shù)據(jù)編輯時(shí)不在是一個(gè)文本框輸入編輯內(nèi)容而是一個(gè)日歷控件用于日期的選擇。

GridView控件的HTML代碼如下：

  1. 〈asp:GridView ID="GridView1" runat="server"   
  2. AutoGenerateColumns="False" CellPadding="4" 
  3. DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1"   
  4. ForeColor="#333333" GridLines="None" 
  5. Width="620px" AutoGenerateEditButton="True" 〉  
  6. 〈FooterStyle BackColor="#990000"   
  7. Font-Bold="True" ForeColor="White" / 〉  
  8. 〈Columns 〉  
  9. 〈asp:BoundField DataField="EmployeeID"   
  10. HeaderText="EmployeeID" InsertVisible="False" 
  11. ReadOnly="True" SortExpression="EmployeeID" / 〉  
  12. 〈asp:BoundField DataField="LastName" HeaderText="LastName"   
  13. SortExpression="LastName" / 〉  
  14. 〈asp:TemplateField HeaderText="FirstName"   
  15. SortExpression="FirstName" 〉  
  16. 〈EditItemTemplate 〉  
  17. 〈asp:TextBox ID="TextBox1" runat="server"   
  18. Text='〈%# Bind("FirstName") % 〉' 〉〈/asp:TextBox 〉  
  19. 〈/EditItemTemplate 〉  
  20. 〈ItemTemplate 〉  
  21. 〈asp:Label ID="Label1" runat="server"   
  22. Text='〈%# Bind("FirstName") % 〉' 〉〈/asp:Label 〉  
  23. 〈asp:Label ID="Label2" runat="server"   
  24. Text='〈%# Eval("LastName") % 〉' Width="62px" 〉  
  25. 〈/asp:Label 〉  
  26. 〈/ItemTemplate 〉  
  27. 〈/asp:TemplateField 〉  
  28. 〈asp:BoundField DataField="Title" HeaderText="Title"   
  29. SortExpression="Title" / 〉  
  30. 〈asp:TemplateField HeaderText="HireDate"   
  31. SortExpression="HireDate" 〉  
  32. 〈EditItemTemplate 〉  
  33.     
  34. 〈asp:Calendar ID="Calendar1" runat="server"   
  35. BackColor="#FFFFCC" BorderColor="#FFCC66" 
  36. BorderWidth="1px" DayNameFormat="Shortest"   
  37. Font-Names="Verdana" Font-Size="8pt" 
  38. ForeColor="#663399" Height="200px"   
  39. SelectedDate='〈%# Bind("HireDate") % 〉' ShowGridLines="True" 
  40. VisibleDate='〈%# Eval("HireDate") % 〉' Width="220px" 〉  
  41. 〈SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" / 〉  
  42. 〈TodayDayStyle BackColor="#FFCC66" ForeColor="White" / 〉  
  43. 〈SelectorStyle BackColor="#FFCC66" / 〉  
  44. 〈OtherMonthDayStyle ForeColor="#CC9966" / 〉  
  45. 〈NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" / 〉  
  46. 〈DayHeaderStyle BackColor="#FFCC66"   
  47. Font-Bold="True" Height="1px" / 〉  
  48. 〈TitleStyle BackColor="#990000" Font-Bold="True"   
  49. Font-Size="9pt" ForeColor="#FFFFCC" / 〉  
  50. 〈/asp:Calendar 〉  
  51. 〈/EditItemTemplate 〉  
  52. 〈ItemTemplate 〉  
  53.     
  54. 〈asp:Label ID="Label3" runat="server"   
  55. Text='〈%# Eval("HireDate") % 〉' 〉〈/asp:Label 〉  
  56.  
  57. 〈/ItemTemplate 〉  
  58. 〈/asp:TemplateField 〉  
  59. 〈/Columns 〉  
  60. 〈RowStyle BackColor="#FFFBD6" ForeColor="#333333" / 〉  
  61. 〈SelectedRowStyle BackColor="#FFCC66"   
  62. Font-Bold="True" ForeColor="Navy" / 〉  
  63. 〈PagerStyle BackColor="#FFCC66"   
  64. ForeColor="#333333" HorizontalAlign="Center" / 〉  
  65. 〈HeaderStyle BackColor="#990000"   
  66. Font-Bold="True" ForeColor="White" / 〉  
  67. 〈AlternatingRowStyle BackColor="White" / 〉  
  68. 〈/asp:GridView 〉 

在ASP.NET 2.0的GridView控件中應(yīng)用模版可以靈活地展現(xiàn)數(shù)據(jù)，靈活性很高，我們可以根據(jù)不同的需要設(shè)置不用的模版。

【編輯推薦】

  1. ASP.NET環(huán)境下的Shell函數(shù)
  2. 在ASP.NET中向數(shù)據(jù)庫(kù)批量插入數(shù)據(jù)
  3. ASP.NET用Post方式向網(wǎng)頁(yè)發(fā)送數(shù)據(jù)
  4. ASP.NET 2.0部署WEB應(yīng)用程序淺析
  5. ASP.NET頁(yè)面請(qǐng)求原理淺析
  6. ASP.NET頁(yè)面靜態(tài)化四步走
  7. 淺析ASP.NET授權(quán)模塊
責(zé)任編輯：冰荷 來源： yesky
GridView控件ASP.NET 2.0
相關(guān)推薦

2009-07-24 15:35:00

ASP.NET Gri

2009-07-27 15:58:25

添加GridView

2009-07-24 16:15:00

擴(kuò)展ASP.NET G

2009-09-09 22:53:34

ASP.NET 時(shí)間控

2009-07-21 15:27:12

ASP.NET 2.0

2009-07-27 16:09:05

GridView顯示數(shù)

2009-07-27 16:22:54

GridView選擇行

2009-07-24 17:15:52

SiteMapData

2009-08-03 18:29:31

GridView與Da

2009-07-27 10:12:37

GridView和Ob

2009-09-11 09:09:00

ASP.NETAdRotator控件

2009-07-20 13:32:24

ScriptManagASP.NET

2009-07-24 15:07:56

ASP.NET上傳文件

2009-08-05 17:43:48

ASP.NET 2.0

2009-07-23 16:28:20

URL映射ASP.NET 2.0

2009-07-22 17:28:07

CSS文件ASP.NET 2.0

2009-07-22 17:23:03

XmlDataSourASP.NET 2.0

2009-07-23 14:25:03

ASP.NET 2.0

2009-07-30 15:39:55

ASP.NET 2.0

2009-07-20 13:54:31

ScriptManagASP.NET AJA
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)