Gridview数据控件的七种字段类型

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等字段类型所能达到的了！