十二：在GridView控件中使用TemplateField

作者：heker2007 字体：[增加减小] 类型：转载时间：2016-05-06我要评论

本文主要讲解在GridView控件中如何使用TemplateField，从而更加高级的自定义GridView，实现自定义列表的功能。

导言

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

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

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

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

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

图一：使用三个TemplateField来自定义信息的显示方式

第一步：将数据绑定到GridView

当你需要使用一些TemplateField来自定义显示时，我发现最简单的就是先创建一个仅包含BoundField的GridView控件，然后添加一些TemplateField，如果需要的话，也可以将某些BoundField直接转换成TemplateField。好了，让我们开始本节教程吧。首先，通过设计器往页面上添加一个GridView控件，并将一个返回雇员信息的ObjectDataSource绑定到它上面。这些步骤将创建一个带有一些BoundField的GridView，这些BoundField对应雇员信息中不同的字段。

打开GridViewTemplateField.aspx，并从工具箱中拖一个GridView到设计器上。从Gri dView的智能标签（smart tag）上选择并添加一个新的调用EmployeesBLL 类的GetEmpl oyees()方法的ObjectDataSource控件。

有一个是他们的受雇日期。

Field）即可。

图五：GridView的模板列可以通过设计器来编辑

要在FirstName模板列中同时显示LastName，从工具箱中拖一个Label到FirstName 模板列的ItemTemplate中即可，当然，这要在GridView的模板编辑界面中才行的，如下图所示：

图六：向FirstName模板列的ItemTemplate中添加一个Label

现在，添加到TemplateField的Label控件的Text属性还是“Label”。我们需要修改这个以使这个属性绑定到数据源中的LastName字段上。我们可以通过在Label控件的智能标记上点击一下，然后在弹出菜单中选择“编辑数据绑定”（Edit DataBindings）选项，如下图所示：

图七：从Label的智能标签上选择Edit DataBindings选项

在弹出的数据绑定对话框中，你可以在左边的列表中选择需要绑定的属性，然后在右边的下来框中选择一个数据字段。好了，我们现在在左边选择Text属性，然后在右边选择La stName字段，点击OK。

图八：将Text属性绑定到LastName字段上

注意：数据绑定对话框允许你声明一个双向的数据绑定。如果你保持“双向数据绑定” （Two-w ay databinding）这个复选框为未选中的话，数据绑定的代码将会是<%# Eval("LastName ")%>而不是<%# Bind("LastName")%>。不过，对于本节教程来说，两个种做法的效果都是OK的。双向数据绑定在插入和编辑数据的时候将会比较重要。但是如果仅仅是简单的显示数据的话，两种做法都是一样的。我们将在今后的章节中详细的讨论一下双向数据绑定。

让我们再花一些时间到浏览器中看看这个页面。就像你看到的那样，GridView仍然包含4列，不过，FirstName列里面显示了姓和名两个数据。

图十一：将HiredDate绑定列转换成一个模板列

就像我们在第二步中看到的那样，这个操作会将绑定列替换成一个含有ItemTemplate 和EditItemTemplate的模板列，其中的ItemTemplate和EditItemTemplate分别带有一个Label和一个TextBox，而这个Label和TextBox的Text属性都使用了数据绑定语句<%# Bind("HiredDate")%>来将HireDate绑定到自己身上。

要用Calendar控件来替换这个文本的话，我们可以编辑模板：删除Label控件，并添加上一个Calendar控件。在设计器中，从GridView的智能标签的弹出菜单中选择“编辑模板”（Edit Templates），并在下拉列表中选择HireDate模板列的ItemTemplate。然后，删除Label控件并从工具箱中拖一个Calendar控件到模板编辑界面中。