ASP.NET 2.0中如何使用GridView控件

本篇文章給大家分享的是有關ASP.NET 2.0中如何使用GridView控件，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

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

為頁面添加GridView控件，在便捷任務面板中，選擇SqlDataSource，然后關閉便捷任務面板。這樣就創建了ASP.NET 2.0的數據綁定控件。并為GridView控件設置自動套用格式。保存并運行如圖 1 所示，

圖 1

HTML 代碼如下：

〈%@ Page Language="C#" AutoEventWireup="true"   CodeFile="Default.aspx.cs" Inherits="_Default" %〉   〈!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"〉   〈html xmlns="http://www.w3.org/1999/xhtml" 〉  〈head runat="server"〉  〈title〉無標題頁〈/title〉  〈/head〉  〈body〉  〈form id="form1" runat="server"〉  〈div〉  〈asp:SqlDataSource ID="SqlDataSource1" runat="server"   ConflictDetection="CompareAllValues" ConnectionString="  〈%$ ConnectionStrings:NorthwindConnectionString %〉"   DeleteCommand="DELETE FROM [Employees] WHERE [EmployeeID] =   @original_EmployeeID AND [LastName] =   @original_LastName AND [FirstName] =   @original_FirstName AND [Title] =   @original_Title AND [HireDate] = @original_HireDate"  InsertCommand="INSERT INTO [Employees] ([LastName],   [FirstName], [Title], [HireDate]) VALUES (@LastName,   @FirstName, @Title, @HireDate)"  OldValuesParameterFormatString="original_{0}"   SelectCommand="SELECT [EmployeeID], [LastName],   [FirstName], [Title], [HireDate] FROM [Employees]"  UpdateCommand="UPDATE [Employees] SET [LastName] =   @LastName, [FirstName] = @FirstName, [Title] =   @Title, [HireDate] = @HireDate WHERE [EmployeeID] =   @original_EmployeeID AND [LastName] = @original_LastName AND   [FirstName] = @original_FirstName AND [Title] = @original_Title   AND [HireDate] = @original_HireDate"〉  〈DeleteParameters〉  〈asp:Parameter Name="original_EmployeeID" Type="Int32" /〉  〈asp:Parameter Name="original_LastName" Type="String" /〉  〈asp:Parameter Name="original_FirstName" Type="String" /〉  〈asp:Parameter Name="original_Title" Type="String" /〉  〈asp:Parameter Name="original_HireDate" Type="DateTime" /〉  〈/DeleteParameters〉  〈UpdateParameters〉  〈asp:Parameter Name="LastName" Type="String" /〉  〈asp:Parameter Name="FirstName" Type="String" /〉  〈asp:Parameter Name="Title" Type="String" /〉  〈asp:Parameter Name="HireDate" Type="DateTime" /〉  〈asp:Parameter Name="original_EmployeeID" Type="Int32" /〉  〈asp:Parameter Name="original_LastName" Type="String" /〉  〈asp:Parameter Name="original_FirstName" Type="String" /〉  〈asp:Parameter Name="original_Title" Type="String" /〉  〈asp:Parameter Name="original_HireDate" Type="DateTime" /〉  〈/UpdateParameters〉  〈InsertParameters〉  〈asp:Parameter Name="LastName" Type="String" /〉  〈asp:Parameter Name="FirstName" Type="String" /〉  〈asp:Parameter Name="Title" Type="String" /〉  〈asp:Parameter Name="HireDate" Type="DateTime" /〉  〈/InsertParameters〉  〈/asp:SqlDataSource〉   〈/div〉  〈asp:GridView ID="GridView1" runat="server"   AutoGenerateColumns="False" CellPadding="4" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1"   ForeColor="#333333" GridLines="None" Width="640px"〉  〈FooterStyle BackColor="#990000" Font-Bold="True"   ForeColor="White" /〉  〈Columns〉  〈asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID"   InsertVisible="False" ReadOnly="True" SortExpression="EmployeeID" /〉  〈asp:BoundField DataField="LastName" HeaderText="LastName"   SortExpression="LastName" /〉  〈asp:BoundField DataField="FirstName" HeaderText="FirstName"   SortExpression="FirstName" /〉  〈asp:BoundField DataField="Title" HeaderText="Title"   SortExpression="Title" /〉  〈asp:BoundField DataField="HireDate" HeaderText="HireDate"   SortExpression="HireDate" /〉  〈/Columns〉  〈RowStyle BackColor="#FFFBD6" ForeColor="#333333" /〉  〈SelectedRowStyle BackColor="#FFCC66" Font-Bold="True"   ForeColor="Navy" /〉  〈PagerStyle BackColor="#FFCC66" ForeColor="#333333"   HorizontalAlign="Center" /〉  〈HeaderStyle BackColor="#990000" Font-Bold="True"   ForeColor="White" /〉  〈AlternatingRowStyle BackColor="White" /〉  〈/asp:GridView〉  〈/form〉  〈/body〉  〈/html〉

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

圖 2

這時我們在設計視圖中并沒有發現有什么改變發現，實際上TemplateField已經為firstName字段 默認設置了EditItemTemplate 編輯時模版和ItemTemplate自定義普通模版，并代替了原來的代碼

〈 asp:BoundField DataField="FirstName"   HeaderText="FirstName" SortExpression="FirstName" /〉  新的代碼如下：  〈 asp:TemplateField HeaderText="FirstName"   SortExpression="FirstName"〉  〈 EditItemTemplate〉  〈 asp:TextBox ID="TextBox1" runat="server"   Text='〈 %# Bind("FirstName") %〉'〉〈 /asp:TextBox〉  〈 /EditItemTemplate〉  〈 ItemTemplate〉  〈 asp:Label ID="Label1" runat="server"   Text='〈 %# Bind("FirstName") %〉'〉〈 /asp:Label〉  〈 /ItemTemplate〉  〈 /asp:TemplateField〉

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

通過在設計視圖中單擊GridView模板的智能標簽選擇編輯摸版一項，可以進入GridView模板的編輯界面。如圖 3所示。

圖 3

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

圖 4

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

圖 5

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

圖 6

注意一點:在databindings對話框中有一個雙向數據綁定的復選框，這是在數據插入和編輯時才會用到，這一點我們在以后會介紹到，我們運行這個程序，我們可以看到在FirstName一列中同時顯示了LastName和FirstName兩個字段。如圖 7所示。

圖 7

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

〈 asp:GridView ID="GridView1" runat="server"  AutoGenerateColumns="False" CellPadding="4" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1"   ForeColor="#333333" GridLines="None" Width="640px" 〉  〈 FooterStyle BackColor="#990000"   Font-Bold="True" ForeColor="White" / 〉  〈 Columns 〉  〈 asp:BoundField DataField="EmployeeID"   HeaderText="EmployeeID" InsertVisible="False" ReadOnly="True" SortExpression="EmployeeID" / 〉  〈 asp:BoundField DataField="LastName" HeaderText="LastName"   SortExpression="LastName" / 〉  〈 asp:TemplateField HeaderText="FirstName"   SortExpression="FirstName" 〉  〈 EditItemTemplate 〉  〈 asp:TextBox ID="TextBox1" runat="server"   Text='〈 %# Bind("FirstName") % 〉' 〉〈 /asp:TextBox 〉  〈 /EditItemTemplate 〉  〈 ItemTemplate 〉  〈 asp:Label ID="Label1" runat="server"   Text='〈 %# Bind("FirstName") % 〉' 〉〈 /asp:Label 〉  〈 asp:Label ID="Label2" runat="server"   Text='〈 %# Eval("LastName") % 〉' Width="62px" 〉〈 /asp:Label 〉  〈 /ItemTemplate 〉  〈 /asp:TemplateField 〉  〈 asp:BoundField DataField="Title" HeaderText="Title"   SortExpression="Title" / 〉  〈 asp:BoundField DataField="HireDate" HeaderText="HireDate"   SortExpression="HireDate" / 〉  〈 /Columns 〉  〈 RowStyle BackColor="#FFFBD6" ForeColor="#333333" / 〉  〈 SelectedRowStyle BackColor="#FFCC66" Font-Bold="True"   ForeColor="Navy" / 〉  〈 PagerStyle BackColor="#FFCC66" ForeColor="#333333"   HorizontalAlign="Center" / 〉  〈 HeaderStyle BackColor="#990000" Font-Bold="True"   ForeColor="White" / 〉  〈 AlternatingRowStyle BackColor="White" / 〉  〈 /asp:GridView 〉

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

圖 8

這時我們進入再次進入編輯摸版時，單擊GridView控件的智能標簽，選擇編輯模版，templatefield含有一個ItemTemplate和EditItemTemplate的標簽,選擇hiredateTemplatefield的EditItemTemplatee選項,將lable 標簽刪除，從工具箱中選擇日歷控件放在EditItemTemplate 編輯模版界面上，并設計日歷控件控件的風格樣式。如圖 9 所示。

圖 9

我們為日歷控件選擇要顯示的數據字段，在可綁定屬性分別選擇selecteddate屬性和VisibleDate屬性進行數據綁定， 當我們單擊編輯按扭對GridView的數據進行修改時，在hireddate一列中不在是一個文本框讓我們輸入要修改的日期而是一個可用來選擇日期的日歷控件，這樣可以方便用戶對日期的修改，也防止了用戶輸入的字段不是日期而引發的異常，如圖 10 所示。

圖 10

運行程序如圖 11所示。

圖 11

到目前為止,我們已經應用了兩個ASP.NET 2.0模版:在同一個網格中同時顯示兩個數據字段,對數據編輯時不在是一個文本框輸入編輯內容而是一個日歷控件用于日期的選擇。

GridView控件的HTML代碼如下：

〈asp:GridView ID="GridView1" runat="server"   AutoGenerateColumns="False" CellPadding="4" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1"   ForeColor="#333333" GridLines="None" Width="620px" AutoGenerateEditButton="True" 〉  〈FooterStyle BackColor="#990000"   Font-Bold="True" ForeColor="White" / 〉  〈Columns 〉  〈asp:BoundField DataField="EmployeeID"   HeaderText="EmployeeID" InsertVisible="False" ReadOnly="True" SortExpression="EmployeeID" / 〉  〈asp:BoundField DataField="LastName" HeaderText="LastName"   SortExpression="LastName" / 〉  〈asp:TemplateField HeaderText="FirstName"   SortExpression="FirstName" 〉  〈EditItemTemplate 〉  〈asp:TextBox ID="TextBox1" runat="server"   Text='〈%# Bind("FirstName") % 〉' 〉〈/asp:TextBox 〉  〈/EditItemTemplate 〉  〈ItemTemplate 〉  〈asp:Label ID="Label1" runat="server"   Text='〈%# Bind("FirstName") % 〉' 〉〈/asp:Label 〉  〈asp:Label ID="Label2" runat="server"   Text='〈%# Eval("LastName") % 〉' Width="62px" 〉  〈/asp:Label 〉  〈/ItemTemplate 〉  〈/asp:TemplateField 〉  〈asp:BoundField DataField="Title" HeaderText="Title"   SortExpression="Title" / 〉  〈asp:TemplateField HeaderText="HireDate"   SortExpression="HireDate" 〉  〈EditItemTemplate 〉      〈asp:Calendar ID="Calendar1" runat="server"   BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest"   Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px"   SelectedDate='〈%# Bind("HireDate") % 〉' ShowGridLines="True" VisibleDate='〈%# Eval("HireDate") % 〉' Width="220px" 〉  〈SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" / 〉  〈TodayDayStyle BackColor="#FFCC66" ForeColor="White" / 〉  〈SelectorStyle BackColor="#FFCC66" / 〉  〈OtherMonthDayStyle ForeColor="#CC9966" / 〉  〈NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" / 〉  〈DayHeaderStyle BackColor="#FFCC66"   Font-Bold="True" Height="1px" / 〉  〈TitleStyle BackColor="#990000" Font-Bold="True"   Font-Size="9pt" ForeColor="#FFFFCC" / 〉  〈/asp:Calendar 〉  〈/EditItemTemplate 〉  〈ItemTemplate 〉      〈asp:Label ID="Label3" runat="server"   Text='〈%# Eval("HireDate") % 〉' 〉〈/asp:Label 〉   〈/ItemTemplate 〉  〈/asp:TemplateField 〉  〈/Columns 〉  〈RowStyle BackColor="#FFFBD6" ForeColor="#333333" / 〉  〈SelectedRowStyle BackColor="#FFCC66"   Font-Bold="True" ForeColor="Navy" / 〉  〈PagerStyle BackColor="#FFCC66"   ForeColor="#333333" HorizontalAlign="Center" / 〉  〈HeaderStyle BackColor="#990000"   Font-Bold="True" ForeColor="White" / 〉  〈AlternatingRowStyle BackColor="White" / 〉  〈/asp:GridView 〉

以上就是ASP.NET 2.0中如何使用GridView控件，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。