Scott Mitchell 的ASP.NET 2.0数据教程之十二：在GridView控件中使用TemplateField

导言


GridView是由一组字段（Field）组成的，它们都指定的了来自DataSource中的什么属性需要用到自己的输出呈现中。最简单的字段类型是BoundField，它仅将数据简单的显示为文本。其他的字段类型使用交互HTML元素（alternate HTML elements）来显示数据。比如说，CheckBoxField将被呈现为一个CheckBox，其选中状态由某特定数据字段的值来决定；ImageField则将某特定数据字段呈现为一个图片，当然，这个数据字段中应该放的是图片类型的数据。超级链接和按钮的状态取决于使用HyperLinkField或ButtonField字段类型的数据字段的值。

虽然CheckBoxField、ImageField、HyperLinkField和ButtonField考虑到了数据的交互视图，但它们仍然有一些相关的格式化的限制。CheckBoxField只可以显示为一个单个的CheckBox，而一个ImageField则只可以显示为一张图片。如果某个字段要显示一些文本、复选框、图片还有一些其他基于不同数据的东西的时候，我们要做什么？或者说，如果我们需要使用除了CheckBox、Image、HyperLink以及Button之外的Web控件来显示数据时，我们该怎么办？此外，BoundField只能显示一个单独的数据字段。如果我们想要在一个GridView列中显示两个或者更多的数据字段的值的时候该怎么办呢？

为了适应这样的一个复杂的情况，GridView提供了使用模板来进行呈现的TemplateField。模板可以包括静态的HTML、Web控件以及数据绑定的代码。此外，TemplateField还拥有各种可以用于不同情况的页面呈现的模板。比如说，ItemTemplate是默认的用于呈现每行中的单元格的，而EditItemTemplate则用于编辑数据时的自定义界面。

在本节教程中，我们将解释如何使用TemplateField来更加高级的自定义GridView控件。在上一节教程中，我们看到了如何使用DataBound和RowDataBound事件处理方法来自定义基于数据的格式化。另一个办法就是在模板中调用一个格式化方法。在本节中，我们就会看到这种技术。

在本节中，我们将使用一些TemplateField来自定义雇员信息的呈现。特别的，我们将列出所有的雇员，但我们将会把雇员的姓和名字放在一列中，把他们的雇佣日期放在一个Calendar控件中，还将用一个状态列来表明他们来到公司有多久了。

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID"
2 DataSourceID="ObjectDataSource1">
3 <Columns>
4 <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
5 <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
6 <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
7 <asp:BoundField DataField="HireDate" HeaderText="HireDate" SortExpression="HireDate" />
8 </Columns>
9</asp:GridView>
10

让我们花点时间在浏览器中来看看我们的成果。这时，你将看到一个表格，表格中每一个记录都是一个雇员的信息，一共有四列：一个是雇员的姓，一个是名字，一个是头衔，还有一个是他们的受雇日期。

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
2 <EditItemTemplate>
3 <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("FirstName") %>'></asp:TextBox>
4 </EditItemTemplate>
5 <ItemTemplate>
6 <asp:Label ID="Label1" runat="server" Text='<%# Bind("FirstName") %>'></asp:Label>
7 </ItemTemplate>
8</asp:TemplateField>
9

就像你看到的那样，TemplateField由两个模板组成——一个ItemTemplate，它有一个Label控件，其Text属性被设置为FirstName数据字段的值；还有一个EditItemTemplate，它有一个TextBix控件，其Text属性也被设置为FirstName数据字段的值。数据绑定语法——

<%# Bind("fieldName") %>——说明数据字段fieldName 被绑定到了这个特定的Web控件的属性上。

要将LastName添加到TemplateField中，我们需要为ItemTemplate添加一个Label控件并将其Text属性绑定到LastName上。通过设计器或是手工编写代码都可以做到这一点。要手工写代码的话，只需简单的将相应的声明代码添加到ItemTemplate中即可，如下所示：

1<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
2 <EditItemTemplate>
3 <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("FirstName") %>'></asp:TextBox>
4 </EditItemTemplate>
5 <ItemTemplate>
6 <asp:Label ID="Label1" runat="server" Text='<%# Bind("FirstName") %>'></asp:Label>
7 <asp:Label ID="Label2" runat="server" Text='<%# Bind("LastName") %>'></asp:Label>
8 </ItemTemplate>
9</asp:TemplateField>
10

要通过设计器来添加的话，还是在GridView的智能标签的弹出菜单中点击“编辑列”（ Edit Templates）。这样会显示GridView的模板编辑界面。在这个界面中，智能标签是GridView中模板的列表。因为这个时候我们只有一个TemplateField，所以下拉列表中只有FirstName的各种模板和EmptyDataTemplate以及PagerTemplate。如果指定了EmptyDataTemplate模板的话，它将用于绑定到GridView的数据源中没有任何记录时的输出呈现；如果指定了PagerTemplate，它将用于呈现GridView的分页界面。

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID"
2 DataSourceID="ObjectDataSource1">
3 <Columns>
4 <asp:TemplateField HeaderText="Name" SortExpression="FirstName">
5 <EditItemTemplate>
6 <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("FirstName") %>'></asp:TextBox>
7 </EditItemTemplate>
8 <ItemTemplate>
9 <asp:Label ID="Label1" runat="server" Text='<%# Bind("FirstName") %>'></asp:Label>
10 <asp:Label ID="Label2" runat="server" Text='<%# Eval("LastName") %>'></asp:Label>
11 </ItemTemplate>
12 </asp:TemplateField>
13 <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
14 <asp:BoundField DataField="HireDate" HeaderText="HireDate" SortExpression="HireDate" />
15 </Columns>
16</asp:GridView>
17

protected string DisplayDaysOnJob(Northwind.EmployeesRow employee)
2

由于HiredDate可能会含有空值，所以我们必须在进行计算之前首先保证其值不为空。如果HiredDate值为空的话，直接返回一个“Unknown”就是了；如果不为空的话呢，就计算当前时间跟HiredDate的值之间所隔的天数，并把它作为一个字符串返回即可。

要使用这个方法，我们需要在GridView的TemplateField中使用数据绑定语法来调用它。同样，我们还是先给GridView添加一个新的模板列。

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID"
2 DataSourceID="ObjectDataSource1">
3 <Columns>
4 <asp:TemplateField HeaderText="Name" SortExpression="FirstName">
5 <EditItemTemplate>
6 <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("FirstName") %>'></asp:TextBox>
7 </EditItemTemplate>
8 <ItemTemplate>
9 <asp:Label ID="Label1" runat="server" Text='<%# Bind("FirstName") %>'></asp:Label>
10 <asp:Label ID="Label2" runat="server" Text='<%# Eval("LastName") %>'></asp:Label>
11 </ItemTemplate>
12 </asp:TemplateField>
13 <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
14 <asp:TemplateField HeaderText="HireDate" SortExpression="HireDate">
15 <EditItemTemplate>
16 <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("HireDate") %>'></asp:TextBox>
17 </EditItemTemplate>
18 <ItemTemplate>
19 <asp:Calendar ID="Calendar1" runat="server" SelectedDate='<%# Bind("HireDate") %>'
20 </ItemTemplate>
22 </asp:TemplateField>
23 <asp:TemplateField HeaderText="Days On The Job">
24 <ItemTemplate>
25 </ItemTemplate>
27 <ItemStyle HorizontalAlign="Center" />
28 </asp:TemplateField>
29 </Columns>
30</asp:GridView>
31

完成了整节教程之后，页面在浏览器中的样子应该是图十六的这个样子。



图十六：“雇员在公司干了多久“也显示出来了

总结

在GridView控件中，相对于其他的列控件来说，模板列可以处理更加复杂的数据呈现。模板列主要用于这样一些情况：

· 一个GridView列中需要显示多个数据列

· 使用一个Web控件来展示数据比一段简单的文本更好

· 页面的输出取决于绑定到GridView的数据，比如说元数据或者说是数据的重新格式化

除了自定义数据的显示，模板列也用于编辑和插入数据时的用户界面的自定义，这个我们在后面的章节中将会讲到。

接下来的两节中，我们会继续讨论模板，我们会先看看在DetailsView中使用模板列的情况。跟着我们再去看看FormView，这玩意儿就是用模板来实现一个更加复杂的呈现，当然，用的是一大堆的字段。

编程愉快！

关于作者
Scott Mitchell，著有六本ASP/ASP.NET方面的书，是4GuysFromRolla.com的创始人，自1998年以来一直应用微软Web技术。Scott是个独立的技术咨询顾问，培训师，作家，最近完成了将由Sams出版社出版的新作，24小时内精通ASP.NET 2.0。他的联系电邮为mitchell@4guysfromrolla.com，也可以通过他的博客http://ScottOnWriting.NET与他联系。