ASP.NET 2.0中的GridView控件應用實例
ASP.NET 2.0的GridView控件是由一系列數據顯示控件之一，它可以綁定到 SqlDataSource 控件以返回的數據記錄的字段以動態生成網格， GridView控件為我們提供了多種數據綁定列類型，例如BoundField 默認數據綁定列類型是一種簡單的數據類型,展現了文本數據值。
其他類型方面的數據顯示文本內容交替使用、CheckBoxField 復選框顯示布爾數據類型、CommandField 顯示一個按扭，按扭的類型可以是Button 普通按扭、LinkButton超鏈接按扭、ImageButton圖片按扭，等等類型，GridView控件還提供Templatefield,使用模板. 可以對數據字段進行自定義的模板，模板可包括各種靜態文本、lable、TextBox 文本框. 此外,有各種Templatefield模板,可被用來為用戶提供了不同情況下的模板。例如,ItemTemplate顯示模板可以用來制作顯示數據時的,但EditItemTemplate編輯模板可以用來制作編輯時、HeaderTemplate自定義表頭模板、FooterTemplate自定義表尾模板。
今天我們要介紹如何利用Templatefield設置 GridView的外觀樣式.下面的示例我們要用GridView控件顯示Northwind數據庫下的employees(雇員表)的EmployeeID、LastName、FirtName、BrthDote字段,要列出所有的員工,員工的姓、名（并將姓和名在同一個網格顯示）聘請日期、當我們編輯數據時聘用日期用日歷控件顯示。
新建一個頁面，在設計示圖中為頁面添加一個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〉
#p#
目前,每名員工的姓和名展示了不同表格中。我們也可以在一個表格中同時顯示姓和名.在此,我們需要使用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
#p#
在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 〉
#p#
接下來我們要做的是在編輯狀態下雇員雇用日期用日歷控件顯示出來，點擊編輯欄的連接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控件中應用模版可以靈活地展現數據，靈活性很高，我們可以根據不同的需要設置不用的模版。
【編輯推薦】
