ASP.NET 2.0 GridView控制項應用模版

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，然後關閉便捷工作面板。這樣就建立了資料繫結控制項。並為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

　　到目前為止,我們已經應用了兩個模版:在同一個網格中同時顯示兩個資料欄位,對資料編輯時不在是一個文字框輸入編輯內容而是一個日曆控制項用於日期的選擇。

　　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＞

　　在GridView控制項中應用模版可以靈活地展現資料，靈活性很高，我們可以根據不同的需要設定不用的模版。