《十二：在gridview控件中使用templatefield》由会员分享，可在线阅读，更多相关《十二：在gridview控件中使用templatefield（18页珍藏版）》请在金锄头文库上搜索。
1、在 ASP.NET 2.0 中操作数据之十二：在 GridView 控件中使用 TemplateField作者：heker2007 字体： 增加 减小 类型：转载 时间：2016-05-06 我要评论本文主要讲解在 GridView 控件中如何使用 TemplateField，从而更加高级的自定义GridView，实现自定义列表的功能。导言GridView 是由一组字段（ Field）组成的，它们都指定的了来自 DataSource 中的什么属性需要用到自己的输出呈现中。最简单的字段类型是 BoundField，它仅将数据简单的显示为文本。其他的字段类型使用交互 HTML 元素（alterna
2、te HTML elements）来显示数据。比如说，CheckBoxField 将被呈现为一个 CheckBox，其选中状态由某特定数据字段的值来决定；ImageField 则将某特定数据字段呈现为一个图片，当然，这个数据字段中应该放的是图片类型的数据。超级链接和按钮的状态取决于使用 HyperLinkField 或 ButtonField 字段类型的数据字段的值。虽然 CheckBoxField、ImageField、HyperLinkField 和 ButtonField 考虑到了数据的交互视图，但它们仍然有一些相关的格式化的限制。CheckBoxField 只可以显示为一个单个的 Ch
3、eckBox，而一个 ImageField 则只可以显示为一张图片。如果某个字段要显示一些文本、复选框、图片还有一些其他基于不同数据的东西的时候，我们要做什么？或者说，如果我们需要使用除了 CheckBox、Image、HyperLink 以及 Button 之外的 Web 控件来显示数据时，我们该怎么办？此外，BoundField 只能显示一个单独的数据字段。如果我们想要在一个 GridView 列中显示两个或者更多的数据字段的值的时候该怎么办呢？为了适应这样的一个复杂的情况，GridView 提供了使用模板来进行呈现的 TemplateField。模板可以包括静态的 HTML、Web 控件
4、以及数据绑定的代码。此外， TemplateField还拥有各种可以用于不同情况的页面呈现的模板。比如说，ItemTemplate 是默认的用于呈现每行中的单元格的，而 EditItemTemplate 则用于编辑数据时的自定义界面。在本节教程中，我们将解释如何使用 TemplateField 来更加高级的自定义 GridView 控件。在上一节教程中，我们看到了如何使用 DataBound 和 RowDataBound 事件处理方法来自定义基于数据的格式化。另一个办法就是在模板中调用一个格式化方法。在本节中，我们就会看到这种技术。在本节中，我们将使用一些 TemplateField 来自定义
5、雇员信息的呈现。特别的，我们将列出所有的雇员，但我们将会把雇员的姓和名字放在一列中，把他们的雇佣日期放在一个 Calendar 控件中，还将用一个状态列来表明他们来到公司有多久了。图一：使用三个 TemplateField 来自定义信息的显示方式第一步：将数据绑定到 GridView当你需要使用一些 TemplateField 来自定义显示时，我发现最简单的就是先创建一个仅包含 BoundField 的 GridView 控件，然后添加一些 TemplateField，如果需要的话，也可以将某些 BoundField 直接转换成 TemplateField。好了，让我们开始本节教程吧。首先，通
6、过设计器往页面上添加一个 GridView 控件，并将一个返回雇员信息的 ObjectDataSource 绑定到它上面。这些步骤将创建一个带有一些 BoundField 的 GridView，这些 BoundField对应雇员信息中不同的字段。打开 GridViewTemplateField.aspx，并从工具箱中拖一个 GridView 到设计器上。从 GridView 的智能标签（smart tag）上选择并添加一个新的调用 EmployeesBLL 类的 GetEmployees()方法的 ObjectDataSource 控件。图二：添加一个新的调用 GetEmployees()方法
7、的 ObjectDataSource 控件用这种方式绑定 GridView 将会自动的为雇员信息的每一个属性添加一个 BoundField：EmployeeID、LastName 、FirstName、Title 、HireDate、ReportsTo 以及 Country。在这个报表中，我们不希望看到 EmployeeID、ReportsTo 以及 Country 属性。要删除这些 BoundField 的话，你可以：使用字段对话框 在 GridView 的智能标签的弹出菜单中点击 “编辑列”（Edit Columns）。然后，在左下角的列表中选中你想要删除的 BoundField 并点击那
8、个带红叉的按钮，就可以删除这个 BoundField 了。手工编辑 GridView 的声明语句 在源视图（Source view）中，找到你想要删除的 BoundField，就是那些元素，删了就行了。在你删了 EmployeeID、ReportsTo 和 Country 等 BoundField 之后，你的 GridView 的标记语言代码应该像这个样子：?12345678让我们花点时间在浏览器中来看看我们的成果。这时，你将看到一个表格，表格中每一个记录都是一个雇员的信息，一共有四列：一个是雇员的姓，一个是名字，一个是头衔，还有一个是他们的受雇日期。图三：每一个雇员信息都显示了 LastNa
9、me、FirstName、Title 和 HireDate第二步：将姓和名显示在一列中现在，每一个雇员的姓和名都是分开在两列中显示的。把它们放到一个列中显示出来也许是一个不错的主意。要做到这一点，我们需要用到 TemplateField。我们可以添加一个新的 TemplateField，给它加上一些必须的标记语言和数据绑定代码，然后删除原来的 FirstName 和 LastName 这两个 BoundField；当然，我们也可以将 FirstName 这个 BoundField直接转换成一个 TemplateField，编辑它以加上 LastName 的值，然后再删除 LastName 这个
10、 BoundField。两种办法都行，不过我个人还是比较喜欢直接转换的那种，因为这种方式可以自动的添加一个含有 Web 控件和相应的数据绑定代码的 ItemTemplate 和 EditItemTemplate，它们可以用来模仿一个 BoundField 的呈现和功能。这样做的好处自然是不言而喻的，因为转换的过程已经帮我们做了很多事情，那我们当然就可以节约不少的时间了。要将一个 BoundField 转换成 TemplateField，我们可以在 GridView 的智能标签的弹出菜单中点击“编辑列 ”（Edit Columns）。在弹出对话框的左下角的列表中选择需要转换的BoundField
11、，然后点击右下角的“将此列转换成模板列”（Convert this field into a TemplateField）即可。图四：在字段对话框中，将一个绑定列转换成一个模板列让我们继续将 FirstName 这个 BoundField 转换成 TemplateField。在这个更改之后，设计器中并没有什么明显的不同。这是因为将 BoundField 转换成 TemplateField 时，其实是创建了一个维持之前的 BoundField 的外观和感觉的 TemplateField。尽管在设计器中没有视觉上的变化，但是这个转换的过程已经将 BoundField 的声明代码 改成了如下所示的
12、TemplateField 的声明代码：?12345678910就像你看到的那样，TemplateField 由两个模板组成 一个 ItemTemplate，它有一个 Label 控件，其 Text 属性被设置为 FirstName 数据字段的值；还有一个 EditItemTemplate，它有一个 TextBix 控件，其 Text 属性也被设置为 FirstName 数据字段的值。数据绑定语法说明数据字段 fieldName 被绑定到了这个特定的 Web 控件的属性上。要将 LastName 添加到 TemplateField 中，我们需要为 ItemTemplate 添加一个 Label
13、控件并将其 Text 属性绑定到 LastName 上。通过设计器或是手工编写代码都可以做到这一点。要手工写代码的话，只需简单的将相应的声明代码添加到 ItemTemplate 中即可，如下所示：?123456789101112要通过设计器来添加的话，还是在 GridView 的智能标签的弹出菜单中点击 “编辑列”（ Edit Templates）。这样会显示 GridView 的模板编辑界面。在这个界面中，智能标签是 GridView 中模板的列表。因为这个时候我们只有一个 TemplateField，所以下拉列表中只有 FirstName 的各种模板和 EmptyDataTemplate
14、以及 PagerTemplate。如果指定了 EmptyDataTemplate 模板的话，它将用于绑定到 GridView 的数据源中没有任何记录时的输出呈现；如果指定了 PagerTemplate，它将用于呈现 GridView 的分页界面。图五：GridView 的模板列可以通过设计器来编辑要在 FirstName 模板列中同时显示 LastName，从工具箱中拖一个 Label 到 FirstName模板列的 ItemTemplate 中即可，当然，这要在 GridView 的模板编辑界面中才行的，如下图所示：图六：向 FirstName 模板列的 ItemTemplate 中添加一个
15、 Label现在，添加到 TemplateField 的 Label 控件的 Text 属性还是 “Label”。我们需要修改这个以使这个属性绑定到数据源中的 LastName 字段上。我们可以通过在 Label 控件的智能标记上点击一下，然后在弹出菜单中选择“编辑数据绑定” （ Edit DataBindings）选项，如下图所示：图七：从 Label 的智能标签上选择 Edit DataBindings 选项在弹出的数据绑定对话框中，你可以在左边的列表中选择需要绑定的属性，然后在右边的下来框中选择一个数据字段。好了，我们现在在左边选择 Text 属性，然后在右边选择LastName 字段，
16、点击 OK。图八：将 Text 属性绑定到 LastName 字段上注意：数据绑定对话框允许你声明一个双向的数据绑定。如果你保持“双向数据绑定” （Two-way databinding）这个复选框为未选中的话，数据绑定的代码将会是而不是。不过，对于本节教程来说，两个种做法的效果都是 OK 的。双向数据绑定在插入和编辑数据的时候将会比较重要。但是如果仅仅是简单的显示数据的话，两种做法都是一样的。我们将在今后的章节中详细的讨论一下双向数据绑定。让我们再花一些时间到浏览器中看看这个页面。就像你看到的那样，GridView 仍然包含 4 列，不过，FirstName 列里面显示了姓和名两个数据。图九：姓和名显示在同一列里面了要完成这一步，我们先删除 LastName 这个绑定列，并将 FirstName 这个模板列的列头文本（HeaderText）改成“Name”。在这之后，GridView 的声明代码将会像下面这样：?1234567891011121
