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

其他類(lèi)型方面的數(shù)據(jù)顯示文本內(nèi)容交替使用、CheckBoxField 復(fù)選框顯示布爾數(shù)據(jù)類(lèi)型、CommandField 顯示一個(gè)按扭，按扭的類(lèi)型可以是Button 普通按扭、LinkButton超鏈接按扭、ImageButton圖片按扭，等等類(lèi)型，GridView控件還提供Templatefield,使用模板. 可以對(duì)數(shù)據(jù)字段進(jìn)行自定義的模板，模板可包括各種靜態(tài)文本、lable、TextBox 文本框. 此外,有各種Templatefield模板,可被用來(lái)為用戶(hù)提供了不同情況下的模板。例如,ItemTemplate顯示模板可以用來(lái)制作顯示數(shù)據(jù)時(shí)的,但EditItemTemplate編輯模板可以用來(lái)制作編輯時(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)證模式，輸入用戶(hù)名、密碼，選擇選擇名為Northwind的數(shù)據(jù)庫(kù)并測(cè)試連接，測(cè)試連接成功后，保存連接字符串單擊“下一步”按扭，在“指定來(lái)自表或視圖中”選擇Employees表，在選擇列中選擇LastName, FirstName, Title, HireDate 等字段。單擊“高級(jí)”，選中“生成INSERT、UPDATE和DELETE語(yǔ)句”和“使用開(kāi)放式并發(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 所示，

圖 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〉無(wú)標(biāo)題頁(yè)〈/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#

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

圖 2

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

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

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

圖 3

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

圖 4

#p#

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

圖 5

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

圖 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所示。

圖 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#

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

圖 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 所示。

圖 9

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

圖 10

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

圖 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代碼如下：

〈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控件中應(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)模塊