9.8 ?數據控件的七種字段類型（Fields Type）的應用

GridView共支持七種字段類型，字段原本應該叫“Column”比較恰當，但ASP.NET 2.0卻采用另一個名稱“Field”來表示，對于名稱的命名祭司認為有點不直觀，因為不明的人看了根本不知道Field代表什么東西，但既然ASP.NET 2.0使用了Field，各位就遷就一下，表9-6為GridView支持七種字段類型的說明。

表9-6 ?GridView字段Field類型表

Field字段類型	說? 明
BoundField（數據綁定字段）	將Data Source數據源的字段數據以文本方式顯示
ButtonField（按鈕字段）	在數據綁定控件中顯示命令按鈕。根據控件的不同，它可讓您顯示具有自定義按鈕控件（例如【添加】或【移除】按鈕）的數據行或數據列，按下時會引發RowCommand事件
CommandField（命令字段）	顯示含有命令的Button按鈕，包括了Select、Edit、Update、Delete命令按鈕（DetailsView的CommandField才支持Insert命令）
CheckBoxField（CheckBox字段）	顯示為CheckBox類型，通常用于布爾值True/False的顯示
HyperLinkField（超鏈接字段）	將Data Source數據源字段數據顯示成HyperLink超級鏈接，并可指定另外的NavigateUrl超鏈接
ImageField（圖像字段）	在數據綁定控件中顯示圖像字段
TemplateField（模板字段）	顯示用戶自定義的模板內容

而Field字段聲明在GridView中是被包含在<Columns>...</Columns>標簽區塊中，請參考范例9-1完成后的HTML程序，以下為<Columns>區塊聲明：

<asp:GridView ID=”GridView1” runat=”server” AutoGenerateColumns=”False” DataKeyNames=”EmployeeID” DataSourceID=”SqlDataSource1” EmptyDataText=”沒有數據記錄可顯示。”>

??? <Columns>

??????? <asp:BoundField DataField=”EmployeeID” HeaderText=”EmployeeID”

??????? ReadOnly=”True” SortExpression=”EmployeeID” />

??????? <asp:BoundField DataField=”LastName” HeaderText=”LastName”

??????? SortExpression=”LastName” />

??????? <asp:BoundField DataField=”FirstName” HeaderText=”FirstName”

??????? SortExpression=”FirstName” />

??????? <asp:BoundField DataField=”Address” HeaderText=”Address”

??????? SortExpression=”Address” />

??? </Columns>

</asp:GridView>

由于其HTML聲明使用BoundField字段，可以證明一般數據源的字段數據值會以文本方式顯示。

相比較而言，DataGrid 1.0默認只支持四種類型：（1）Bound Column，（2）Button Column，（3）HyperLink Column，（4）Template Column。故可以看出以GridView功能較為豐富，應用起來也會相對容易；而以字段名稱命名的DataGrid仍沿用Column，GridView則用Field。

注

（1） 以上七種Field字段類型并非只有GridView控件獨有或獨享，其他如DetailsView也共享這七種字段類型。

（2）不知各位是否知道為何用“Field”這個字眼，而非用“Column”，這是因為七種類型字段主要是由DataControl-Field類派生而來的，所以字尾都會帶有Field字眼。

9.8.1? BoundField數據綁定字段

BoundField數據綁定字段會將Data Source數據源字段值以文本方式顯示。然而BoundField對象在不同的數據綁定控件中會有不同的顯示方式，如在GridView控件中顯示BoundField對象為數據列，而DetailsView控件會將其顯示為數據行。

BoundField屬性共分為五大類，說明如表9-7和圖9-7所示。

表9-7 ?BoundField屬性分類

五大類型屬性	說? 明
可訪問性（Accessibility）	設置AccessibleHeaderText
外觀（Appearance）	設置如HeaderText、FooterText、HeaderImageUrl
行為（Behavior）	設置行為屬性，其中大多為布爾值True/False
數據（Data）	設置數據源字段與字符串格式化
樣式（Style）	設置顏色、字體等樣式屬性，包括ControlStyle、HeaderStyle、FooterStyle、ItemStyle樣式

圖9-7 ?BoundField屬性分類

l? BoundField數據綁定字段屬性列表

表9-8為BoundField數據綁定字段的重要屬性說明。

表9-8 ?BoundField字段重要屬性

屬? 性	說? 明
DataField	指定對應Data Source數據字段
DataFormatString	顯示文本的字符串格式化，如顯示成貨幣、科學符號
SortExpression	設置字段的排序鍵值
ConvertEmptyStringToNull	將Empty字符串轉換為Null值，應用于當Update的數據屬于Empty字符串時，將它轉換為Null值
NullDisplayText	當欲顯示的字段數據為Null值時，則以自定義的標題文本來顯示
ApplyFormatInEditMode	當處于編輯模式時，是否套用格式化
HtmlEncode	是否進行HtmlEncode編碼
InsertVisible	當處于Insert模式時，字段是否可見

以下針對BoundField重要屬性作更進一步的說明：

l? BoundField數據屬性

w? 若要指定在BoundField對象中顯示的字段，可以設置DataField屬性為數據字段的名稱。

w? 若要自定義字段字符串的格式，可以通過設置DataFormatString屬性，后面會教各位如何自定義DataFormatString格式。

l? BoundField行為屬性

w? 顯示字段值之前，將HtmlEncode屬性設置為True（默認為True），可對此字段值進行HTML編碼，這樣可防止惡意的程序代碼。

w? 默認只有在數據綁定控件處于只讀模式時，才可以將格式字符串套用至字段值。若要在數據綁定控件處于編輯模式時將格式字符串套用至顯示的值，請將ApplyFormatInEditMode屬性設置為True。

w? BoundField還可以針對null或空字符串進行處理，例如字段值若為null，則可通過設置NullDisplayText屬性顯示自定義標題，或將ConvertEmptyStringToNull屬性設置為True，BoundField對象還可自動將空字符串（""）字段值轉換為null值。不像在ASP.NET 1.1中若遇到null值數據綁定會產生異常錯誤而當掉，必須自行花費一番功夫來處理null值的數據防呆。

l? BoundField樣式屬性

w? 通過ControlStyle可設置BoundField字段服務器子控件的樣式。

w? 通過FooterStyle可設置BoundField字段之頁尾的樣式。

w? 通過HeaderStyle可設置BoundField字段之頁首的樣式。

w? 通過ItemStyle可設置BoundField字段中數據項的樣式。

?范例9-3? 使用BoundField數據綁定字段

本范例將說明BoundField數據綁定字段的應用，例如直接將數據表字段拖曳到設計界面所產生的GridView的文本字段就是以BoundField字段來呈現，請參考BoundField.aspx程序，以下為步驟說明。

? 拖曳數據表創建GridView

請直接從Northwind數據庫的Products數據表點擊數據表字段拖曳到設計界面（見圖9-8）。

圖9-8 ?拖曳數據表創建GridView

? GridView自動格式化設置

由于原始的GridView控件太單調，故請點擊GridView智能標簽的【自動套用格式】，再選取其中一種方案樣式即可變成較為美麗之外觀（見圖9-9）。

? 編輯BoundField字段

若要編輯BoundField字段相關屬性，請點擊GridView智能標簽的【編輯列】進行字段的編輯，進去之后可以看到左邊四個字段正是BoundField字段類型，接著隨意點擊一個BoundField字段（ProductID）右側就會出現相關屬性（見圖9-10）。

圖9-9? GridView自動套用格式設置

圖9-10 ?編輯BoundField字段

? 修改BoundField字段標題文字

由于GridView的BoundField字段標題文字是英文的，而我們打算用中文來取代，故請修改BoundField字段的HeaderText屬性，修改如下：

l? 請將ProducID字段的HeaderText改為“產品代號”。

l? 請將ProducName字段的HeaderText改為“產品名稱”。

l? 請將CategoryID字段的HeaderText改為“種類代號”。

l? 請將UnitPrice字段的HeaderText改為“單位價格”。

以上只簡單示范BoundField字段屬性要如何修改，其他屬性修改方式也是在此完成的，最后請運行程序，運行結果如圖9-11所示。

圖9-11? BoundField字段運行界面

9.8.2? 標準數值格式化字符串（Standard Numeric Format Strings）

前面曾提到BoundField數據綁定提供DataFormatString字符串格式化功能，可以在不變動原始數據數字或格式的情況下將數據顯示成另一種格式。但是DataFormatString不過就是一個窗口而已，它必須通過.NET 1.0原本就存在的機制叫“標準數值格式化字符串”來完成，表9-9為標準數值格式化字符串所支持的參數。

表9-9? 標準數值格式化字符串

格式代號	說? 明	原始格式	格式指令	運行結果
{0:C}	顯示貨幣符號格式	2005.5	{0:C2}	NT$2,005.50
{0:D}	顯示十進制數格式（限用于整數）	128	{0:D}	128
{0:E}	顯示科學符號格式	2005.5	{0:E2}	2.01E+003
{0:F}	顯示固定小數字數格式	2005.5	{0:F4}	2005.5000
{0:G}	顯示一般格式	2005.5	{0:G}	2005.5
{0:N}	顯示有逗號固定小數字數格式	2005.5	{0:N3}	2,005.500
{0:P}	顯示百分比格式	0.25	{0:P}	25.00%
{0:X}	顯示十六進制數格式（限用于整數）	128	{0:X}	80
{0:#}	顯示自定義的數字格式	2005.5	{0:00####.00}	002005.00

?范例9-4 ?標準數值格式化字符串（Standard Numeric Format Strings）的應用

在了解了標準數值格式化字符串的方式后，您才能將此技巧套用到BoundField字段的DataFormatString屬性來格式化字符串，故請先參考FormatStrings.aspx程序，以下為程序代碼：

01? Partial Class FormatStrings

02? ??? Inherits System.Web.UI.Page

03?

04? ??? Protected Sub Page_Load(ByVal sender As Object, ByVal e As?

?????????? System.EventArgs) Handles Me.Load

05? ??????? Dim x As Double = 2005.5

06? ??????? Dim y As Integer = 128

07? ??????? Dim z As Double = 0.25

08?

09? ??????? Response.Write(x.ToString() & "? 以C2格式化之后? " & ?????????

??????????????? String.Format("{0:C2}", x) & "<BR>")

10? ??????? Response.Write(y.ToString() & "? 以D格式化之后? " & ??????

??????????????? String.Format("{0:D}", y) & "<BR>")

11? ??????? Response.Write(x.ToString() & "? 以E2格式化之后? " &

??????????????? String.Format("{0:E2}", x) & "<BR>")

12? ??????? Response.Write(x.ToString() & "? 以F4格式化之后? " &

??????????????? String.Format("{0:F4}", x) & "<BR>")

13? ??????? Response.Write(x.ToString() & "? 以G格式化之后? " & ??????

??????????????? String.Format("{0:G}", x) & "<BR>")

14? ??????? Response.Write(x.ToString() & "? 以N3格式化之后? " & ?????????

??????????????? String.Format("{0:N3}", x) & "<BR>")

15? ??????? Response.Write(z.ToString() & "? 以P格式化之后? " & ??????

??????????????? String.Format("{0:P}", z) & "<BR>")

16? ??????? Response.Write(y.ToString() & "? 以X格式化之后? " & ?

??????????????? String.Format("{0:X}", y) & "<BR>")

17? ??????? Response.Write(x.ToString() & "? 以00####.00格式化之后? " &

??????????????? String.Format("{0:00####.00}", x) & "<BR>")

18? ??? End Sub

19? End Class

完成后請運行程序，運行界面如圖9-12所示。

圖9-12 ?標準數值格式化字符串運行界面

注

（1）格式英文指令不分大小寫。

（2） 標準數值格式化字符串并不限定類型項目才能使用，而是整個.NET都可以應用，所以Console、ASP.NET到Win Form都能使用。

?范例9-5 ?BoundField字段DataFormatString字符串格式化的應用

圖9-13是GridView控件顯示Northwind數據庫Product數據表的原始格式，本范例說明如何將標準數值格式化字符串設置在BoundField字段的DataFormatString屬性，以格式化原始數據，請參考BoundFieldFormat.aspx程序，步驟說明如下。

圖9-13? Products數據表原始顯示格式

? 創建GridView及SqlDataSource控件

請從工具箱中拖曳一個GridView及SqlDataSource控件到設計界面，并在GridView的智能標簽中選擇數據源為“SqlDataSource1”（見圖9-14）。

圖9-14 ?創建GridView及SqlDataSource控件

? 設置GridView外觀樣式

請在GridView智能標簽中的自動格式化選擇一個外觀樣式。

? 設置SqlDataSource數據庫連接

GridView要能夠顯示數據庫數據最重要的助手莫過于SqlDataSource數據源控件，故請在SqlDataSource的智能標簽中選擇【配置數據源】→【新建連接】→在添加連接的對話框中輸入SQL Server服務器名、用戶名、密碼和數據庫名稱，完成后請按【測試連接】按鈕，若設置正確，則會產生測試連接成功消息（見圖9-15）。

圖9-15 ?設置SqlDataSource數據庫連接

? 保存數據庫連接字符串

設置完數據庫連接后請點擊【下一步】按鈕，系統會詢問你“是否將連接保存到應用程序配置文件中？”，并要求您提供命名“NorthwindConnectionString”（見圖9-16）。

圖9-16? 保存數據庫連接字符串

各位別小看這個存儲小操作，我反問你，它是存儲在哪？又有什么用途？

（1）它會將剛才的數據庫連接設置保存在Web.config配置文件中，設置如下：

<configuration>

??? <connectionStrings>

??????? <add name=”NorthwindConnectionString” connectionString=”Data

??????? Source=localhost;Initial Catalog=Northwind;User ID=

??????? sa;Password=test” providerName=”System.Data.SqlClient” />

??? </connectionStrings>

<configuration>

（2）有什么用途呢？就是ADO.NET可以讀取這個數據庫連接設置，您就無須再在每個Web Form中重復聲明，將來數據庫帳號密碼一更改，每張Web Form又要一一調出來修改。讀取程序如下（請參考第2章范例2-4）：

string connString =ConfigurationManager.ConnectionStrings [”NorthwindConnectionString”].ConnectionString;

（3）若您擔心數據庫連接的帳號及密碼曝光，可用第2章2.9節的加密技巧：

aspnet_regiis -pe “connectionStrings” -app “/07GridView” -prov “RSAProtectedConfigurationProvider”

? 設置SqlDataSource的Select、Insert、Update與Delete命令

請選擇Products數據源，并勾選星號（*）以讀取所有的數據庫字段，然而這樣只會產生出Select命令，若您還想要Insert、Update與Delete語法，則必須按【高級】按鈕將“生成INSERT、UPDATE和DELETE語句”（必要）及“使用開放式并發”（選擇性）打鉤（見圖9-17）。

圖9-17? 配置SqlDataSource的SQL命令

? 編輯DataFormatString格式化

請在GridView智能標簽中點擊【編輯數據列】進入編輯模式，請依照表9-10將相關字段的DataFormatString及HtmlEncode屬性設置為False（見圖9-18）。

表9-10 ?字段格式化設置

字? 段	格式化字符串	HtmlEncode屬性
ProductID	{0:000#}	False
SupplierID	{0:0#}	False
CategoryID	{0:00#}	False
QuantityPerUnit	{0:N1}	False
UnitPrice	{0:C2}	False
UnitsInStock	{0:00##}	False
UnitsOnOrder	{0:0#}	False
RecorderLevel	{0:00}	False

圖9-18 ?編輯DataFormatString格式化

設置完成后請按【F5】運行，在圖9-19格式化結果與原始圖片對照下，各位應能明顯察覺格式已按照我們所給定的參數來顯示了。

圖9-19? Products數據表格式化結果

本范例表面上在講格式化，但實則一并講解了許多重要知識，包括數據庫連接設置、儲存位置、ADO.NET連接字符串的讀取、連接字符串的加密等，各位可以細細體會本范例。

?提醒

（1）BoundField字段的格式化必須將“HtmlEncode”屬性設置為False（默認為True），若不改為False，則格式化是起不了任何作用的；但是HtmlEncode屬性默認為True并不是沒有原因的，目的是為防止惡意的Client Script程序破壞ASP.NET系統，如果不需要格式化則請維持HtmlEncode屬性為True。

（2）記得將自動生成字段CheckBox打鉤移除，否則字段會重復產生。

9.8.3 ?ButtonField按鈕字段

ButtonField是在GridView字段中顯示Button按鈕（例如自定義的添加、刪除按鈕），并且當按下Button按鈕時會引發“RowCommand”事件，在此事件中可以加入自定義的程序代碼，比如說產品數據的訂購、刪除或取消的按鈕。然而，ButtonField對象在不同的數據綁定控件中會有不同的顯示方式，如在GridView控件中顯示BoundField對象為數據列，而DetailsView控件會將其顯示為數據行。

l? ButtonField按鈕字段屬性列表

ButtonField屬性與前面的BoundField屬性大致上相同，僅就不同的重要屬性加以說明（見表9-11）。

表9-11 ?ButtonField按鈕字段重要屬性

屬? 性	說? 明
ButtonType	ButtonField字段共支持三種按鈕形式：Button､Image､Link
DataTextField	將數據源字段數據綁定到Button按鈕的文本屬性中
DataTextFormatString	將DataTextField數據源字段值加以格式化
ImageUrl	當按鈕形式為Image時,指定Image所在的Url
CauseValidation	單擊按鈕時是否會引發Validation控件驗證
CommandName	單擊ButtonField按鈕時所要運行的命令名稱
ValidationGroup	ButtonField按鈕所要引發的Validation Group名稱

ButtonField按鈕字段重要屬性與事件補充說明：

l? 當ButtonField按鈕字段被按下時，GridView控件會引發RowCommand事件，而DetailsView控件會引發ItemCommand事件。

l? 若要判斷引發命令事件之數據行的索引，請使用事件自變量的CommandArgument屬性，會將該事件自變量傳遞至數據綁定控件的命令事件，ButtonField類會自動用適當的索引值填入CommandArgument屬性。

l? 若指定要顯示的按鈕類型，請使用ButtonType屬性。當顯示連接或命令按鈕時，請使用Text屬性，以指定要在按鈕中顯示的標題。如果設置Text屬性，則ButtonField中的所有按鈕都共享相同標題。

l? 您可以將數據源字段數據綁定到Button按鈕的文本屬性，這樣ButtonField按鈕便能夠顯示不同標題，方式是設置DataTextField屬性，若需要格式化，則設置DataTextFormatString屬性。

l? ButtonField按鈕字段可設置的樣式屬性（Style）也同樣有ControlStyle、FooterStyle、HeaderStyle、ItemStyle這四大類。

?范例9-6 ?使用ButtonField按鈕字段

本范例將教您如何使用ButtonField字段來構建Button按鈕，以及與Button按鈕字段相關屬性的設置，請參考ButtonField.aspx程序，步驟說明如下：

? 創建GridView及SqlDataSource控件

請創建GridView及SqlDataSource控件，并將GridView的ID屬性命名為“gviewProduct”，SqlDataSource數據源請指定北風數據庫的Products數據表中的ProductID、ProductName、UnitPrice三個數據字段，最后再指定GridView的數據源為SqlDataSource控件（為節省頁面設置細節祭司不再一一列出，若您不熟悉，請參考上一個范例的詳細步驟說明）。

?提醒

在此祭司建議初期盡量不要用服務器資源管理器或數據庫資源管理器直接拖曳數據字段到Web Form設計界面，因為那樣很容易導致您對GridView與SqlDataSource的認識不夠深刻，而那種生澀感也會反饋到程序設計時的概念不夠清楚；但等您通過了GridView與SqlDataSource之后，任何快速完成的向導您可以隨意大量使用。

? 添加ListBox控件

請添加一個ListBox控件，并將其屬性改為“lbOrder”，這是為了顯示Button按鈕所訂購的產品信息。

? 添加ButtonField字段

請在GridView智能標簽中點擊【編輯列】進入編輯模式，先選擇左上角的ButtonField字段類型，接著再點擊【添加】按鈕添加兩個ButtonField命令按鈕字段（見圖9-20），屬性設置如下：

圖9-20 ?添加ButtonField按鈕字段

l? 請將第一個Button按鈕字段，Text屬性設置為“訂購”，ButtonType屬性設置為“Button”，最后將CommandName屬性設為“Order”。

l? 請將第一個Button按鈕字段，Text屬性設置為“取消”，ButtonType屬性設置為“Button”，最后將CommandName屬性設為“CancelOrder”。

注

CommandName屬性設置是為了讓程序設計判斷，用戶到底點擊的是訂購（Order）還是取消（CancelOrder）。

? 調整Button按鈕字段順序

圖9-21左半部系統會默認產生所建立的Button按鈕，您可能需要調整字段的順序，將Button按鈕調整為在GridView右側（見圖9-21）。

圖9-21 ?ButtonField字段順序的調整

該怎么做呢？字段順序一樣是在GridView智能標簽的【編輯列】中進行，請將ProductID、ProductName與UnitPrice三個BoundField字段一并【添加】到左下角的選取字段，而被選取的字段才能夠進行調整，調整方式是選取字段后按向上及向下的圖標，待字段調整好后單擊【確定】按鈕結束（見圖9-22）。

圖9-22 ?調整字段順序

?提醒

請將“自動生成字段”取消選擇，字段才不會重復產生兩次。

? 添加RowCommand事件程序

當點擊Button按鈕時，會引發GridView的RowCommand事件，在此事件中可以添加自定義的程序（例如點擊訂購按鈕時加入購物車的購物籃），而在此將會利用到STEP 3中所設置的CommandName屬性，RowCommand事件程序如下：

01?? '創建GridView Button按鈕的RowCommand事件

02?? Protected Sub gviewProduct_RowCommand(ByVal sender As Object, ByVal e As
?????? System.Web.UI.WebControls.GridViewCommandEventArgs) Handles ? ?
?????? gviewProduct.RowCommand

03?????? '獲取哪個Row的行索引

04?????? Dim index As Integer = CType(e.CommandArgument, Int32)

05?????? Dim selectedRow As GridViewRow = gviewProduct.Rows(index)

06?????? '獲取該行Row的字段產品名稱代號

07?????? Dim productName As TableCell = selectedRow.Cells(1)

08?????? '判斷用戶按下的是哪個種類的按鈕

09?????? Select Case e.CommandName

10?????????? Case "Order"

11?????????????? '將訂購的產品名稱加入ListBox

12?????????????? lbOrder.Items.Add(productName.Text)

13?????????? Case "CancelOrder"

14?????????????? '將取消的產品名稱自ListBox移除

15?????????????? If (lbOrder.Items.Count > 0) Then

16???????????????? ??Dim i As Integer = 0

17??

18?????????????????? Do While (i <= lbOrder.Items.Count - 1)

19?????????????????????? If (lbOrder.Items(i).Text = productName.Text) Then

20?????????????????????????? lbOrder.Items.Remove(lbOrder.Items(i))

21??????????????????? ???????Exit Do

22?????????????????????? Else

23?????????????????????????? i += 1

24?????????????????????? End If

25?????????????????? Loop

26?????????????? End If

27?????? End Select

28?? End Sub

程序說明：

（1）e.CommandArgument是取得按下ButtonField按鈕字段所在的行索引，以便判斷是哪行被按下ButtonField按鈕，再通過此索引來取得實際GridViewRow對象（數據行），而以GridViewRow.Cell(1)索引來取得ProductName字段值，進而顯示在ListBox中。

（2）?? e.CommandName是BoundField字段中的CommandName屬性（Order或CancelOrder）設置值，這兩個參數的搭配應用實際上只是為了識別ButtonField按鈕字段坐標，因為GridView中有一堆按鈕，系統根本無從知道用戶按下哪個按鈕，故通過e.CommandArgument取得Y軸坐標（Row），而e.CommandName取得X軸坐標（Column），有了X與Y坐標，便能夠精準定位識別到底是哪一個按鈕被按下，而該運行什么操作。運行結果如圖9-23所示。

圖9-23? ButtonField按鈕字段運行界面

?范例9-7? ButtonField按鈕字段的格式化

上一個范例的所有Button按鈕統一命名為“訂購”與“取消”，若想要每個按鈕都能顯示不同的文字信息，該如何做呢？本范例是對前一個范例的稍加修改，主要設置了訂購與取消兩個按鈕之DataTextField與DataTextFormatString，請參考ButtonFieldFormat.aspx程序，概要說明如下：

l? 將訂購Button按鈕的DataTextField屬性設置為“ProductName”，DataTextFormatString屬性設置為“訂購：{0}”，ControlStyle的Width屬性設置為“200px”。

l? 將取消Button按鈕的DataTextField屬性設置為“ProductName”，DataTextFormatString屬性設置為“取消：{0}”，ControlStyle的Width屬性設置為“200px”。運行結果如圖9-24所示。

圖9-24? ButtonField按鈕字段格式化運行界面

9.8.4 ?CommandField命令按鈕字段

CommandField命令按鈕字段是顯示預先定義好的按鈕來運行Select、Edit、Update、Delete與Insert（DetailsView才支持Insert）的命令，因其具有運行命令的功能，故命名為“CommandField”，CommandField由于具備了以上諸多命令功能，故其能力與重要性遠超過其他類型字段。

而外觀上CommandField跟ButtonField很像，所以別被外觀所混淆，兩者之間最大的差異在于ButtonField只是單純地顯示Button按鈕而不具備內置的命令，所以ButtonField必須自行撰寫相關程序，反倒是善用CommandField內置的命令字段可以省掉各位不少寫程序代碼的力氣。

CommandField命令字段的重要屬性說明。

l? GridView控件的CommandField命令按鈕字段支持【編輯、更新、取消】、【選取】與【刪除】三種命令按鈕；而DetailsView的CommandField命令按鈕字段則支持【編輯、更新、取消】、【刪除】與【添加、插入、取消】三種命令按鈕。

l? 顯示及隱藏命令按鈕您可以設置ShowDeleteButton、ShowEditButton、ShowInsertButton與ShowSelectButton這幾個屬性（True或False）。

l? 而設置不同命令按鈕的文字標題可用的屬性有SelectText、InsertText、UpdateText、DeleteText、CancelText、EditText、NewText。

l? 若您將ButtonType屬性設為ButtonType.Image，則可以設置按鈕的圖像Url屬性，可供使用的有CancelImageUrl、DeleteImageUrl、EditImageUrl、InsertText、NewImageUrl、SelectImageUrl、UpdateImageUrl。

l? CommandField命令按鈕字段可設置的樣式屬性（Style）也同樣有ControlStyle、FooterStyle、HeaderStyle、ItemStyle這四大類。

?范例9-8? 使用CommandField命令按鈕字段

本范例將教您如何使用CommandField來建立命令按鈕字段，以及與CommandField命令按鈕字段相關屬性的設置，請參考CommandField.aspx程序，步驟說明如下。

? 創建GridView及SqlDataSource控件

請創建GridView及SqlDataSource控件，并將GridView的ID屬性命名為“gviewProduct”，SqlDataSource數據源請指定北風數據庫的Products數據表中的ProductID、ProductName、UnitPrice、UnitsInStock四個數據字段，最后再指定GridView的數據源為SqlDataSource控件。但有一點要特別注意的是，若要讓GridView的編輯、刪除與更新起作用，必須要將SqlDataSource控件的SQL選項“生成INSERT、UPDATE和DELETE語句”打鉤才行（見圖9-25）。

圖9-25 ?創建GridView及SqlDataSource控件

? 添加CommandField命令按鈕字段

請在GridView智能標簽中點擊【編輯列】進入編輯模式，從可用的字段添加【選擇】、【編輯、更新、取消】、【刪除】三個CommandField命令字段到選取的字段，并將【編輯】與【刪除】兩個命令的ButtonType改為“Button”（見圖9-26）。

圖9-26? 創建CommandField命令按鈕字段

? 啟用GridView命令功能

當完成STEP 2后，請在GridView智能標簽中啟用【啟用編輯】、【啟用刪除】、【啟用選定內容】這三項功能，將其復選框打鉤（見圖9-27）。

圖9-27 ?啟用GridView命令功能

? 取消GridView刪除數據行功能

在此為避免數據的誤刪，將取消GridView刪除數據行功能，而這項技巧同樣可以運用權限的管理，有刪除權限的人才能刪除數據，否則任何刪除操作都將會被取消，請在GridView的RowDeleting事件中添加下列程序代碼：

01? '取消刪除數據行

02? Protected Sub gviewProduct_RowDeleting(ByVal sender As Object, ByVal e As?

?????? System.Web.UI.WebControls.GridViewDeleteEventArgs) Handles ?? ???? ???? ??

?????? gviewProduct.RowDeleting

03? ??? e.Cancel = True

04? ??? 'Literal txtMsg = new Literal();

05? ??? Dim txtMsg As New Literal()

06? ??? txtMsg.Text = "<script>alert('數據行刪除取消')</script>"

07? ??? Page.Controls.Add(txtMsg)

08? End Sub

完成后運行界面如圖9-28所示。

圖9-28 ?CommandField命令按鈕字段運行界面

?秘技放送

在這好向各位傳達一個秘技，假設GridView的數據筆數很多，會遇到一個問題，就是無論您點擊【選取】、【編輯】或【刪除】按鈕，網頁Postback后，界面會進行refresh操作，通常頁面會回到瀏覽器最頂端，往往這種現象會使得用戶必須再滾動回到下面原來的位置，這樣會造成用戶的困擾，為了克服這個弱點，ASP.NET 2.0提供了“MaintainScrollPositionOnPostback”新屬性，它的功用是網頁Postback后界面重新refresh，仍會固定維持在原先的定位，這有什么用處呢？您可以嘗試GridView不要啟用分頁，而瀏覽器顯示GridView界面就會拉得很長很長，這時按下編輯按鈕，如果將這個屬性設置為true，則界面會乖乖地定在原來位置不會跑到最頂端，其語法如下：

<%@ Page Language=“VB” MaintainScrollPositionOnPostback=true %>

?范例9-9 ?自定義CommandField命令按鈕字段

如果默認的CommandField命令按鈕字段不太符合您的需求，您也可以小幅自定義CommandField命令按鈕字段，例如將編輯與添加按鈕同放在一個字段，請參考CmmandFieldCustom.aspx程序，步驟略述如下。

? 添加原始CommandField字段

請添加兩個原始CommandField字段，也就是不要選擇任何默認好的命令按鈕類型（見圖9-29）。

圖9-29? 自定義CommandField命令按鈕字段

? 設置ShowButton屬性

在此“ShowButton”屬性是指ShowDeleteButton、ShowEditButton、ShowInsertButton與ShowSelectButton這幾個屬性，設置如下：

l? 請將第一個CommandField命令按鈕字段的ShowEditButton與ShowInsertButton屬性設為True，ButtonType設置為“Button”，HeaderText設為“自定義字段一”。

l? 請將第二個CommandField命令按鈕字段的ShowDeleteButton與ShowSelectButton屬性設為True，ButtonType設置為“Button”，HeaderText設為“自定義字段二”。完成后運行界面如圖9-30所示。

圖9-30 ?自定義CommandField命令按鈕字段運行界面

9.8.5? CheckBoxField復選框字段

CheckBoxField是在GridView字段中加入CheckBox字段，通常用于顯示布爾值，若數據源為True，則為勾選狀態，若為False則未勾選；在顯示狀態下，默認CheckBoxField是被Disabled，故呈現的是灰色的只讀狀態，只有在編輯模式時才會變成Enabled，才能進行修改。

l? CheckBoxField字段重要屬性

許多屬性是各類Field字段共享的，前面已介紹過的屬性則不再贅述，表9-12為CheckBoxField字段的重要屬性。

表9-12 ?CheckBoxField字段的重要屬性表

屬? 性	說? 明
DataField	設置綁定至數據源的字段名稱
Text	可以設置CheckBox右側的說明文字
ReadOnly	在編輯模式時，設置ReadOnly屬性可以防止被編輯

?范例9-10? 使用CheckBoxField復選框字段

本范例說明如何建立CheckBoxField復選框字段來顯示布爾值字段，請參考CheckBoxField. aspx程序，步驟說明如下。

? 創建GridView及SqlDataSource控件

請創建GridView及SqlDataSource控件，并將GridView的ID屬性命名為“gviewProduct”，SqlDataSource數據源請指定北風數據庫的Products數據表中的ProdutID、ProductName、UnitPrice、UnitsInStock及Discontinued五個數據字段，最后再指定GridView的數據源為SqlDataSource控件。

? 加入CheckBoxField復選框字段

請在GridView智能標簽中點擊【編輯列】進入編輯模式，從可用的字段加入ProductID、ProductName、UnitPrice、UnitsInStock四個BoundField命令字段，及一個CheckBoxField字段類型的Discontinued到選取的字段，并將Discontinued的Text屬性改為“停止供貨”。

? 加入CommandField命令按鈕字段

接著在編輯模式下加入一個【編輯、更新、取消】的CommandField命令按鈕字段到選取的字段，目的是為了確認CheckBoxField復選框字段在編輯模式下是可以編輯的，因為CheckBoxField字段在顯示模式下是Disabled狀態（見圖9-31）。

圖9-31? CheckBoxField復選框字段運行界面

9.8.6? HyperLinkField超鏈接字段

HyperLinkField超鏈接字段是將數據源字段顯示為超鏈接形式，并且可以另外指定URL字段，以作為導向實際的URL網址。

l? HyperLinkField超鏈接字段重要屬性

許多屬性是各類Field字段共享的，若前面已介紹過的屬性則不再贅述，表9-13為HyperLinkField超鏈接字段重要屬性說明。

表9-13? HyperLinkField超鏈接字段重要屬性表

屬? 性	說? 明
DataTextField	綁定數據源字段顯示成超鏈接文字，可當做參數傳遞到DataTextFormatString屬性之中格式化
DataTextFormatString	DataText字段字符串的格式化，請參考表9-9
DataNavigateUrlFields	將數據字段綁定到超鏈接字段Url屬性，可當做參數傳遞到DataNavigateUrlFormatString屬性中格式化
DataNavigateUrlFormatString	DataText字段字符串的格式化，請參考表9-9
Text	超鏈接字段顯示的文字，若DataTextField屬性沒有設置，會以Text文字顯示

?范例9-11 ?使用HyperLinkField超鏈接字段

以下范例是在GridView控件加上一個HyperLinkField超鏈接字段，點擊超鏈接字段后會導向另一個產品明細的網頁，通過DetailsView將產品明細數據顯示出來，請參考HyperLinkField.aspx程序，步驟說明如下。

? 創建GridView及SqlDataSource控件

請創建GridView及SqlDataSource控件，并將GridView的ID屬性命名為“gviewProduct”，SqlDataSource數據源請指定北風數據庫的Products數據表中的ProductName、SupplierID、CategoryID、UnitPrice四個數據字段，最后再指定GridView的數據源為SqlDataSource控件。

? 創建HyperLinkField超鏈接字段

請在GridView智能標簽中點擊【編輯列】進入編輯模式，添加一個HyperLinkField超鏈接字段，請依表9-14設置超鏈接字段相關屬性。

表9-14 ?設置HyperLinkField超鏈接字段屬性

屬? 性	設? 置
HeaderText	產品明細
Text	詳細數據
DataNavigateUrlFields	ProductName,CategoryID,SupplierID
DataNavigateUrlFormatString	ProductDetails.aspx?ProductName={0}&CategoryID={1}&SupplierID={2}
DataTextField	ProductName
DataTextFormatString	查看 {0} 的明細

這個范例故意不添加ProductID字段，目的是要示范傳遞多個參數到另一個網頁的技巧，若使用ProductID字段就無須使用多個參數來識別產品的唯一性。而DataNavigateUrlFields屬性接受多個數據字段的參數，并且會將參數傳到DataNavigateUrlFormatString所設置Url網址的 {0}、{1}、{2}中，當用戶點擊超鏈接字段時，程序就會導向ProductDetails.aspx? ProductName……網址（見圖9-32）。

? 創建顯示產品明細的DetailsView網頁

請創建顯示產品明細的ProductDetails.aspx網頁，添加一個DetailsView與SqlDataSource控件，并將DetailsView的ID屬性設為“dview Product”，SqlDataSource控件的ID屬性設為“sqldsNorthwind”，將DetailsView的數據源指定到SqlDataSource控件（見圖9-33）。

圖9-32 ?HyperLinkField超鏈接字段設置完成界面

圖9-33 ?創建DetailsView及SqlDataSource控件

? 設置SqlDataSource的命令和參數

這個步驟可謂是本范例的重點步驟，通過SqlDataSource的命令和參數編輯器可以完全免程序代碼就完成數據明細的顯示，較之以前還必須花費一些程序代碼而言，真的是既方便又容易，且參數也不容易出錯。請點擊SqlDataSource控件的SelectQuery屬性以調用【命令和參數編輯器】（見圖9-34），設置步驟如下。

（1）請在Select命令窗口輸入SQL命令語句：“select * from Products where ProductName= @paramProductName and CategoryID= @paramCategoryID and? SupplierID= @paramSupplierID”。

（2）接著請加入三個參數：

l? paramProductName參數，其參數來源為“QueryString”，Query StringField為“ProductName”。

圖9-34 ?SqlDataSource的命令和參數編輯器

l? paramCategoryID參數，其參數來源為“QueryString”，Query StringField為“CategoryID”。

l? paramSupplierID參數，其參數來源為“QueryString”，Query StringField為“SupplierID”。

完成后請運行HyperLinkField.aspx程序，界面如圖9-35所示。

圖9-35 ?HyperLinkField超鏈接字段運行界面

?提醒

各位可以回頭看看在處理數據部分幾乎不需要寫任何程序代碼。這在以前ASP.NET 1.0中是做不到的。向導好用歸好用，但祭司希望您進化到動態程序代碼建構。學會了動態程序代碼建構，本章您才算結業，若學會向導設置只能說學會了一半，下一章會更深入解釋。

?范例9-12? 使用HyperLinkField超鏈接字段（動態程序代碼）

本范例和前范例幾乎是一模一樣的，請參考HyperLinkFieldCode.aspx與ProductDetailsCode. aspx這兩支程序，唯一差別是在ProductDetailsCode.aspx程序中用CodeBehind動態創建的，之所以在前一個范例介紹免程序的向導化操作又再介紹使用程序動態創建，是因為最終希望各位能夠進化到具有動態程序建構的能力，由于許多復雜的場景只有用動態程序才辦得到，若只會向導操作有時會落得一籌莫展的下場，所以祭司會先教向導工具再教比較有水準的動態程序代碼，步驟說明如下。

? 創建GridView及SqlDataSource控件

請在HyperLinkFieldCode.aspx中創建GridView及SqlDataSource控件，本步驟請參考前一范例STEP 1。

? 添加HyperLinkField超鏈接字段

請在HyperLinkFieldCode.aspx中添加HyperLinkField超鏈接字段，本步驟請參考前一范例STEP 2。HyperLinkField超鏈接字段中只有DataNavigate-UrlFormatString的屬性不同：

ProductDetailsCode.aspx?ProductName={0}&CategoryID={1}&SupplierID={2}

? 創建顯示產品明細DetailsView網頁

請創建顯示產品明細ProductDetailsCode.aspx網頁，加入一個DetailsView與SqlDataSource控件，并將DetailsView的ID屬性設為“dviewProduct”，SqlDataSource控件的ID屬性設為“sqldsNorthwind”。注意不要將DetailsView的DataSourceID屬性指定到SqlDataSource控件，因為下一步驟要展現CodeBehind技巧。

? 添加CodeBehind程序

在此要開始陸續展現SqlDataSource控件的CodeBehind程序技巧，讓各位了解ASP.NET 2.0與1.0在數據訪問方面的程序差異。只有通過CodeBehind程序技巧才能完全掌握SqlDataSource撰寫的靈活度與強大功能。請在ProductDetailsCode.aspx的Page_Load中添加下列程序代碼：

01? Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) ??Handles Me.Load

02? ??? If (Not IsPostBack) Then

03? ??????? '讀取來源URL

04? ??????? Session("sourceUrl") = Context.Request.UrlReferrer

05? ??? End If

06? ??? sqldsNorthwind.ConnectionString = WebConfigurationManager.

??????????? ConnectionStrings("NorthwindConnectionString").ConnectionString

07? ??? sqldsNorthwind.SelectCommand = "select * from Products where ??? ?

??????????? ProductName=@paramProductName and CategoryID=@paramCategoryID and

??????????? SupplierID=@paramSupplierID"

08?

09? ??? '創建參數

10? ??? '較為正式一一聲明語法

11? ??? 'Dim productParameter As New QueryStringParameter()

12? ??? 'productParameter.Name = "paramProductName"

13? ??? 'productParameter.Type = TypeCode.String

14? ??? 'productParameter.DefaultValue = Request.QueryString("ProductName")

15? ??? '簡潔寫法，其同等于上面個別一一聲明語法

16? ??? Dim productParameter As New QueryStringParameter("paramProductName",

?????????? TypeCode.String, "ProductName")

17? ??? sqldsNorthwind.SelectParameters.Add(productParameter)

18? ??? Dim categoryidParameter As New QueryStringParameter("paramCategoryID", ??

?????????? TypeCode.String, "CategoryID")

19? ??? sqldsNorthwind.SelectParameters.Add(categoryidParameter)

20? ??? Dim supplieridParameter As New QueryStringParameter("paramSupplierID", ??

?????????? TypeCode.String, "SupplierID")

21? ??? sqldsNorthwind.SelectParameters.Add(supplieridParameter)

22?

23? ??? dviewProduct.DataSourceID = sqldsNorthwind.ID

24? End Sub

程序說明：

SqlParameter在Data Source控件上的應用已有些改變，和以前1.0時的聲明方式有所不同，并且ASP.NET 2.0在參數方面因應用情況的不同細分了六類參數：ControlParameter、CookieParameter、FormParameter、QueryStringParameter、SessionParameter、ProfileParameter，而像網頁之間的參數傳遞剛好就必須使用QueryStringParameter這個類來創建，在第10章會有完整而清楚的介紹。

9.8.7 ?ImageField圖像字段

顧名思義，ImageField圖像字段是用來顯示圖片的，原理是指定圖片的Url網址給ImageField的DataImageUrlField屬性。基本上ImageField這功能有點聊勝于無的感覺，為何這樣講呢？說到這，祭司也覺得ImageField很不爭氣，弄一個這么小兒科的功能搪塞大家，即使GridView不提供ImageField字段，通過自定義方式大家也都能做到一樣的功能。而且許多人期盼的是ImageField要能顯示SQL Server數據庫的Image（或Binary）二進制圖片，這樣便能夠省掉大家不少苦工與力氣，但偏偏ImageField就只能給定Url網址來顯示圖片。之所以會造成這種現象是因為原本在ASP.NET 2.0 Beta1中有個DynamicImage動態圖像控件，能夠顯示動態產生的圖片（如GDI+繪圖），但到了Beta 2時卻由于微軟產品進度落后，而且刪除了不少功能，以致DynamicImage硬生生地被拿掉了，造成ImageField字段提供如此蹩腳的功能，讓人覺得實為可惜！OK，回歸正題，以下說明該如何使用ImageField字段。

l? ImageField圖像字段重要屬性

前面已介紹過的字段屬性不再贅述，表9-15為ImageField超鏈接字段的重要屬性。

表9-15 ?ImageField圖像字段重要屬性表

屬? 性	說? 明
DataAlternateTextField	設置綁定至ImageField對象AlternateText屬性的數據源字段名稱
DataAlternateTextFormatString	將DataAlternateTextField的字符串格式化
DataImageUrlField	設置綁定至ImageField對象ImageUrl屬性的數據源字段名稱
DataImageUrlFormatString	將DataImageUrlField的Url格式化
NullImageUrl	當DataImageUrlField屬性值為null時，則以NullImageUrl屬性的默認圖片來替代

?范例9-13 ?使用ImageField圖像字段

Northwind數據庫的Employees員工數據表，里面有員工姓名、Photo（以二進制方式儲存在SQL Server的圖片）、PhotoPath（照片Url網址），故以Employees數據表來示范。但由于ImageField圖像字段只能顯示Url的圖片，故將以PhotoPath為照片來源，而非Photo。請參考ImageField.aspx程序，步驟說明如下。

? 創建GridView及SqlDataSource控件

請創建GridView及SqlDataSource控件，并將GridView的ID屬性命名為“gviewEmployees”，SqlDataSource數據源請指定北風數據庫的Employees數據表中的EmployeeID、LastName及PhotoUrl三個數據字段，最后再指定GridView的數據源為SqlDataSource控件（見圖9-36）。

圖9-36 ?創建GridView及SqlDataSource控件

? 修改PhotoPath的Url網址數據

雖然Employees數據表的PhotoPath字段中儲存了照片的Url路徑，但是筆者發現Url路徑中網站的照片已不存在，所以只好在網絡上找一些有效圖片的Url網址填入替代（Copy & Paste），如圖9-37所示。

圖9-37? 修改PhotoPathUrl網址

注

在Images目錄下有ImageUrl.txt文件，文件里有完整的Url路徑，但您的計算機必須能連接英特網。

? 創建ImageField圖像字段

在圖9-37中PhotoPath顯示出來的是Url文字，并非顯示路徑中的照片，那是因為PhotoPath被當成一般BoundField字段了，所以進入GridView的編輯數據列中將該字段刪除，再加入一個ImageField圖像字段，并指定ImageField字段的DataImageFieldUrlField屬性為“PhotoPath”，HeaderText為“員工照片”即可（見圖9-38）。

圖9-38? 添加ImageField圖像字段

其實到這里步驟已算完成了，但以下兩個步驟還可以多設置一些屬性。

注

ImageField圖像字段在編輯時會顯示Url數據以供修改，若您不想讓員工照片Url被變更，只要將ReadOnly屬性設置為True即可。

? 調整ImageField圖片大小

若您覺得原始圖片太大，會占掉整個頁面，您可以調整ImageField字段的ControlStyle下的Height及Width屬性為“100px”，圖片還真的會縮小呢！這是祭司測試時碰巧發現的。

? 設置圖片的替代文字

在此還可以設置每張圖片的替代文字，請設置ImageField字段的DataAlternateTextField屬性為“LastName”，DataAlternateTextFormatString為“這是{0}的照片”，當鼠標移至照片上方時即會顯示替代說明文字（見圖9-39和圖9-40）。

??

??????? 圖9-39? ImageField圖像字段運行界面??? ??圖9-40? ImageField字段縮小界面

9.8.8? TemplateField模板字段

TemplateField模板字段用來顯示用戶自定義的模板內容。那什么時候會用到TemplateField？當GridView所預定的幾種字段都無法滿足您的需求時就是使用TemplateField的時機了，而且TemplateField可以放入各種您所需要的控件。

l? TemplateField模板字段的模板類型

接著再來討論TemplateField模板字段相關屬性，TemplateField模板字段中又包含了五種可編輯部分，如表9-16所示。

表9-16? TemplateField模板字段類型

模板類型	說? 明
ItemTemplate	字段項目模板
AlternatingItemTemplate	字段交替項目模板，若設置這個字段后，奇數行會顯示ItemTemplate，偶數行顯示AlternatingItemTemplate
EditItemTemplate	編輯項目模板
HeaderTemplate	表頭模板
FooterTemplate	表尾模板

TemplateField模板字段語法如下：

<asp:GridView ID=”GridView1” runat=”server” DataSourceID=”SqlDataSource1”>

??? <Columns>

??????? <asp:TemplateField>

??????????? <ItemTemplate>

??????????????? <asp:控件> ... </asp>

??????????? </ItemTemplate>

??????????? <EditItemTemplate>

??????????????? <asp:控件> ... </asp>

??????????? </EditItemTemplate>

??????????? <HeaderTemplate>

??????????????? <asp:控件> ... </asp>

??????????? </HeaderTemplate>

??????????? <AlternatingItemTemplate>

??????????????? <asp:控件> ... </asp>

??????????? </AlternatingItemTemplate>

??????????? <FooterTemplate>

?????????? ?????<asp:控件> ... </asp>

??????????? </FooterTemplate>

??????? </asp:TemplateField>

??? </Columns>

</asp:GridView>

?范例9-14 ?GridView動態顯示數據庫圖片

在上一個范例中，無法真正顯示數據庫中二進制的Image圖片，那是因為DynamicImage控件被拿掉了，但各位可別這么認命，還是有方法可以動態讀取SQL Server數據庫中的二進制Image圖片的，請參考Image FieldFromDB.aspx程序，步驟大致上與上一個范例相同，只有兩個地方不一樣：一是必須準備一個圖像處理的Handler，另一個是在TemplateField字段中以HTML的 <Img> 來取代ImageField字段，說明如下。

? 設置SqlDataSource數據源

請設置SqlDataSource數據源為Employees數據表的EmployeeID、LastName與Photo三個字段。

? ImageHandler.ashx泛型處理方法

請在項目中加入一個ImageHandler.ashx泛型處理方法，完整程序代碼如下：

01? <%@ WebHandler Language="VB" Class="ImageHandler" %>

02?

03? Imports System

04? Imports System.Web

05?

06? Public Class ImageHandler : Implements IHttpHandler

07? ??? '獲取數據庫連接設置

08? ? ??Shared connString As ConnectionStringSettings =

??????? ??WebConfigurationManager.ConnectionStrings("NorthwindConnectionString")

09? ???

10? ??? Public Sub ProcessRequest(ByVal context As HttpContext) ???? ?

?????????? Implements IHttpHandler.ProcessRequest

11? ??????? 'context.Response.ContentType = "text/plain"

12? ??????? 'context.Response.Write("Hello World")

13? ??????? Dim ms As MemoryStream = Nothing

14? ??????? Try

15? ??????????? '獲取員工代號

16? ??????????? Dim EmployeeID As String = ???

??????????????????? context.Request.QueryString("EmployeeID")

17? ??????????? '通過ReadImage類的GetImage()方法獲取SQL Server中圖片數據

18? ??????????? '創建Sql命令

19? ??????????? Dim strSQL As String = "Select Photo from Employees where

??????????????????? EmployeeID=@paramEmployeeID"

20? ??????????? '創建SqlDataSource

21? ??????????? Dim sqldsPhoto As New

?????????????????? SqlDataSource(connString.ConnectionString, strSQL)

22? ??????????? sqldsPhoto.SelectParameters.Add("paramEmployeeID", ??

?????????????????? TypeCode.Int32, EmployeeID)

23? ??????????? '通過SqlDataSource進行查詢

24? ??????????? Dim dv As DataView = CType
?????????????????? (sqldsPhoto.Select(DataSourceSelectArguments.Empty), DataView)

25? ??????????? '返回DataView第一個Row的Photo字段數據

26? ??????????? Dim PhotoImage As Byte() = CType(dv(0)("Photo"), Byte())

27? ??????????? ms = New MemoryStream(PhotoImage, 0, PhotoImage.Length)

28? ??????? Catch ex As Exception

29?

30? ??????? End Try

31? ???????

32? ??????? If (ms IsNot Nothing) Then

33? ??????????? '獲取圖像MemoryStream大小

34? ??????????? Dim bufferSize As Integer = CType(ms.Length, Integer)

35? ??????????? '創建 buffer

36? ??????????? Dim buffer As Byte() = New Byte(bufferSize) {}

37? ??????????? '調用MemoryStream.Read，自MemoryStream 讀取至buffer，

38?????????? '并傳回count

39? ??????????? Dim countSize As Integer = ms.Read(buffer, 0, bufferSize)

40? ??????????? '返回圖像buffer

41? ??????????? context.Response.OutputStream.Write(buffer, 0, countSize)

42? ??????? End If

43? ??? End Sub

44?

45? ??? Public ReadOnly Property IsReusable() As Boolean?

?????????? Implements IHttpHandler.IsReusable

46? ??????? Get

47? ??????????? Return False

48? ??????? End Get

49? ??? End Property

50?

51? End Class

程序說明：

以上的程序從連接字符串的讀取，到SqlDataSource動態程序構建，以及DataView數據類型的返回皆是正宗ASP.NET 2.0百分之百純正語法。不過您也可以使用傳統的ADO.NET語法來構建，而祭司之所以使用SqlData Source語法構建，純粹是為了展示新一代SqlDataSource語法要如何使用罷了，無好壞之分。程序說明在批注中已講得很清楚了，各位看得懂看不懂都不要緊，以后在各位項目中直接Copy引用就行了。

? 創建TemplateField模板字段

請點擊GridView智能標簽的【編輯列】進入編輯模式，添加一個TemplateField模板字段以便容納HTML <Img> 控件，并將HeaderText命名為“員工照片”。所以目前共有兩個EmployeeID、LastName的BoundField字段，和一個TemplateField模板字段。

? 以HTML <Img>讀取ImageHandler.ashx泛型處理方法圖片

然而，ImageHandler.ashx雖強，但如同千里馬必須有人主動駕馭才有用，而網頁必須通過HTML <Img> 來調用ImageHandler.ashx，而ImageHandler.ashx接收到其傳來的工號后，以此工號讀取數據庫二進制圖片，在一番處理后則輸出到OutputStream數據流中由 <Img> 顯示。故我們要在TemplateField模板字段中添加一個HTML的 <Img> 控件，請點擊GridView的【編輯模板】，選擇Column[2]-員工照片的ItemTemplate項目，接著再從工具箱中拖曳一個HTML的Image控件到ItemTemplate中（見圖9-41），最后設置Image的Src屬性為下列關鍵程序：

ImageHandler.ashx?EmployeeID=<%# Eval(“EmployeeID”) %>

圖9-41 ?在Template模板中創建 <Img> Image控件

完成后請運行程序，界面如圖9-42所示。

圖9-42 ?GridView動態顯示數據庫圖片運行界面

注

（1）Employees數據表中的Photo字段原本有78 bytes的位移，但因為這部分在某些地方會造成困擾，故祭司將照片數據重新設置過，從0 byte開始而不需要位移。在此建議您使用光盤所附的Northwind.mdf北風數據庫較方便。

（2）請注意 <Img> 控件是HTML的，請勿誤用到ASP.NET的Image控件。

?范例9-15 ?創建TemplateField模板字段

由于TemplateField功能與向導相對于其他類型字段要復雜得多，故在此先實現一個范例，各位有了初步Sense后再來討論其相關屬性或議題會比較容易。請參考TemplateField.aspx程序，步驟說明如下。

? 創建GridView及SqlDataSource控件

請拖曳一個GridView及SqlDataSource控件到設計界面，設置SqlDataSource數據庫連接及選擇ProductID、ProductName、UnitPrice三個字段，最后指定GridView的Data Source數據源為SqlDataSource控件。但因為系統會自動將這三個數據字段顯示為BoundField數據綁定字段，而不是我們要的，故請點擊GridView的智能標簽中的【編輯列】將這三個BoundField字段刪除，但先別關閉字段編輯器，下一步驟仍繼續使用它（見圖9-43）。

圖9-43 ?刪除BoundField字段

? 添加TemplateField模板字段

接著請添加三個TemplateField模板字段，并依序將其HeaderText改為“ProductID、ProductName、UnitPrice”，其模板顯示名稱也會自動被修改，但是有個比較不一樣的地方是在字段編輯器中并無法設置TemplateField模板字段的數據源，完成后的GridView內容是一片空白，必須到智能標簽中【編輯模板】編輯其模板項目才能進一步設置數據源（見圖9-44和圖9-45）。

?????? 圖9-44? 添加TemplateField屬性????????????? 圖9-45? 修改HeaderText屬性

? 編輯TemplateField模板

請點擊GridView智能標簽中【編輯模板】編輯其模板內容，進去后請點擊模板編輯智能標簽中【顯示】菜單，編輯上一步驟所添加的三個模板：

（1）選擇Column[0]-ProductID模板的ItemTemplate→添加Literal控件，并點擊Literal控件智能標簽的【編輯DataBindings】，點擊Text屬性的綁定數據字段為“ProductID”（見圖9-46）。

圖9-46? 編輯ItemTemplateDataBindings數據源字段

（2）選擇Column[1]-ProductName模板的ItemTemplate→添加Button控件，并點擊Button控件智能標簽的【編輯DataBindings】，點擊Text屬性的綁定數據字段為“ProductName”。

（3）選擇Column[2]-UnitPrice模板的ItemTemplate→添加TextBox控件，并點擊TextBox控件智能標簽的【編輯DataBindings】，點擊Text屬性的綁定數據字段為“UnitPrice”，完成后請結束模板編輯，并按【F5】運行網頁（見圖9-47）。

圖9-47 ?TemplateField模板字段運行界面

編輯完成后的HTML語法如下：

<asp:GridView ID=”gviewProduct” runat=”server” AutoGenerateColumns=”False” CellPadding=”4”

??? <Columns>

??????? <asp:TemplateField HeaderText=”ProductID”>

??????????? <ItemTemplate>

??????????????? <asp:Literal ID=”Literal1” runat=”server” Text=’<%# Eval

????? ??????????(“ProductID”) %>’></asp:Literal>

??????????? </ItemTemplate>

??????? </asp:TemplateField>

??????? <asp:TemplateField HeaderText=”ProductName”>

??????????? <ItemTemplate>

??????????????? <asp:Button ID=”Button1” runat=”server” Text=’<%# Eval

???? ???????????(“ProductName”) %>’ />

??????????? </ItemTemplate>

??????? </asp:TemplateField>

??????? <asp:TemplateField HeaderText=”UnitPrice”>

??????????? <ItemTemplate>

??????????????? <asp:TextBox ID=”TextBox1” runat=”server” Text=’<%# Bind

????????????? ??(“UnitPrice”) %>’></asp:TextBox>

??????????? </ItemTemplate>

??????? </asp:TemplateField>

...

</asp:GridView>

程序說明：

在以上的HTML程序中，有兩個特殊字眼Eval與Bind，它們的作用是數據字段的綁定。Eval是單向只讀，而Bind則是雙向可更新，詳細說明請看下一節。

9.8.9? 數據綁定Eval方法vs. Bind方法

ASP.NET 2.0的Data-Binding數據綁定語法表示符為“<% #? %>”，而里面必須搭配Eval或Bind指令，也就是 <% ?# ?Eval(“ProductID”) ?%> 或 <% ?# ?Bind(“ProductID”) ?%>，”ProductID” 則為數據源字段。Eval和Bind兩種方法是有差異的，以下是說明。

l? Eval：用于單向數據綁定，數據是只讀顯示。

l? Bind：Bind則是雙向的數據綁定，不但能讀取數據，更具有Insert、Update、Delete功能，所以若您需要編輯更新、添加與刪除功能必須使用本方法。

相對于ASP.NET 1.0舊語法DataBinder.Eval(Container.DataItem, “fieldname”)而言，筆者建議您在GridView、DetailsView及FormView之間應優先使用新的聲明語法。以上范例只是示范如何使用TemplateField模板字段，真實企業網站構建的模板通常不會這么簡單，但加入更復雜的自定義模板控件過程則是差不多的。

9.8.10 ?將Field字段轉換成模板

上面共介紹七種字段類型，包括：BoundField、ButtonField、Command Field、CheckBoxField、HyperLinkField、Image Field與TemplateField，然而除了TemplateField以外，前面六種字段都可以再轉換成為TemplateField模板字段，而這有什么用呢？讓我們來看看實際范例說明。

?范例9-16 ?將Field字段轉換成模板

其實將Field字段轉換成模板只有一個重要步驟，沒什么值得大書特書，但因為祭司還想教各位如何在VS 2005 中復制窗體的注意事項，并修正其相關設置，才特別列舉這個范例。步驟說明如下。

? 復制Web Form窗體

請在CheckBoxField.aspx窗體中點擊鼠標右鍵選擇【復制】，接著點擊網站項目的最上層節點，再點擊鼠標右鍵選擇【粘貼】，這時會產生一個復制的窗體“復件CheckBoxField.aspx”，請在“復件CheckBoxField.aspx”窗體中按鼠標右鍵選擇【重命名】，將名稱改為“CheckBoxFieldTemplate.aspx”。雖然它可以正確運行，但仍有可能會和CheckBoxField.aspx原始窗體互相干擾，為什么？因為兩者的Partial Class名稱皆為“CheckBoxField”類，而在第2章就曾提到編譯器會視Partial Class CheckBoxField為一體，故在系統中會有連動干擾的可能性，若想徹底分開必須做若干修正。

? 修改相關設置

復制后的窗體要修正的地方有三點：

（1）必須將HTML中的CodeFile=”CheckBoxField.aspx.vb” 改成CodeFile=”CheckBox- FieldTemplate.aspx.vb”。

（2）必須將HTML中的Inherits=”CheckBoxField”改成Inherits=”CheckBoxFieldTemplate”。

（3）必須將CodeBehind中的類聲明由“Partial Class CheckBoxField”改成“Partial Class CheckBoxFieldTemplate”。

修改完上述三個地方后，復制的新窗體才算與原始的窗體脫離關系，也不會有互相干擾的情況。而窗體的復制在網頁開發中也算常用到的功能，所以祭司要在此提醒各位如何做正確的修改。

? 將Field字段轉換成模板

接著請在【編輯列】中點取字段后再選“將此字段轉換為TemplateField”，這樣就能將原來的如BoundField轉成TemplateField模板字段，完成后請結束字段編輯模式（見圖9-48）。

圖9-48 ?將Field字段轉換成模板

而轉換后好像也沒發現有什么不一樣？事實上轉換成模板后，您就可以進行【編輯模板】功能，可以到里面再進行修改或自定義。但我相信還是有許多人一時不理解這樣做到底有什么意義？請再看下一步驟。

? 修改Template模板

以原本GridView的UnitPrice及UnitStock都用Label控件文字顯示，在此請進入【編輯模板】里將其改為TextBox控件顯示，記得自行修改數據綁定Bind(“UnitPrice”)及Bind(“UnitStock”)。

? 加入編輯按鈕的Confirm確定事件對話框

請在【編輯模板】中將編輯Button按鈕的OnClientClick屬性設置為“return confirm
（'確定進行資料編輯？'）”即可（見圖9-49）。

圖9-49? 修改Template模板

其實轉換成模板的最大用意是，如果原先所設計的字段無法達到新需求的功能，則可直接將原來的字段類型轉為Template模板。一旦轉為Template模板后，祭司只能用四個字來形容：“為所欲為”。您可以在文字段中再加上圖片或者合并多個字段數據，這就不是原先BoundField等字段類型所能達到的了！

總結

以上是生活随笔為你收集整理的Gridview数据控件的七种字段类型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。