十二：在GridView控件中使用TemplateField

在在 ASP NET 2 0 中操作数据之十二 在中操作数据之十二 在 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 只可以显示为一个单个 的 CheckBox 而一个 ImageField 则只可以显示为一张图片 如果某个字段要显示一些文 本 复选框 图片还有一些其他基于不同数据的东西的时候 我们要做什么 或者说 如 果我们需要使用除了 CheckBox Image HyperLink 以及 Button 之外的 Web 控件来显示 数据时 我们该怎么办 此外 BoundField 只能显示一个单独的数据字段 如果我们想要 在一个 GridView 列中显示两个或者更多的数据字段的值的时候该怎么办呢 为了适应这样的一个复杂的情况 GridView 提供了使用模板来进行呈现的 TemplateFi eld 模板可以包括静态的 HTML Web 控件以及数据绑定的代码 此外 TemplateField 还拥有各种可以用于不同情况的页面呈现的模板 比如说 ItemTemplate 是默认的用于呈 现每行中的单元格的 而 EditItemTemplate 则用于编辑数据时的自定义界面 在本节教程中 我们将解释如何使用 TemplateField 来更加高级的自定义 GridView 控 件 在上一节教程中 我们看到了如何使用 DataBound 和 RowDataBound 事件处理方法 来自定义基于数据的格式化 另一个办法就是在模板中调用一个格式化方法 在本节中 我们就会看到这种技术 在本节中 我们将使用一些 TemplateField 来自定义雇员信息的呈现 特别的 我们 将列出所有的雇员 但我们将会把雇员的姓和名字放在一列中 把他们的雇佣日期放在一 个 Calendar 控件中 还将用一个状态列来表明他们来到公司有多久了 图一 使用三个图一 使用三个 TemplateField 来自定义信息的显示方式来自定义信息的显示方式 第一步 将数据绑定到第一步 将数据绑定到 GridView 当你需要使用一些 TemplateField 来自定义显示时 我发现最简单的就是先创建一个 仅包含 BoundField 的 GridView 控件 然后添加一些 TemplateField 如果需要的话 也可 以将某些 BoundField 直接转换成 TemplateField 好了 让我们开始本节教程吧 首先 通过设计器往页面上添加一个 GridView 控件 并将一个返回雇员信息的 ObjectDataSourc e 绑定到它上面 这些步骤将创建一个带有一些 BoundField 的 GridView 这些 BoundField 对应雇员信息中不同的字段 打开 GridViewTemplateField aspx 并从工具箱中拖一个 GridView 到设计器上 从 Gr idView 的智能标签 smart tag 上选择并添加一个新的调用 EmployeesBLL 类的 GetEmp loyees 方法的 ObjectDataSource 控件 图二 添加一个新的调用图二 添加一个新的调用 GetEmployees 方法的方法的 ObjectDataSource 控件控件 用这种方式绑定 GridView 将会自动的为雇员信息的每一个属性添加一个 BoundField EmployeeID LastName FirstName Title HireDate ReportsTo 以及 Country 在这个 报表中 我们不希望看到 EmployeeID ReportsTo 以及 Country 属性 要删除这些 Bound Field 的话 你可以 使用字段对话框 在 GridView 的智能标签的弹出菜单中点击 编辑列 Edit Columns 然后 在左下角的列表中选中你想要删除的 BoundField 并点击那个带红叉的按钮 就可 以删除这个 BoundField 了 手工编辑 GridView 的声明语句 在源视图 Source view 中 找到你想要删除的 Bou ndField 就是那些元素 删了就行了 在你删了 EmployeeID ReportsTo 和 Country 等 BoundField 之后 你的 GridView 的标记 语言代码应该像这个样子 1 2 3 4 5 6 7 8 让我们花点时间在浏览器中来看看我们的成果 这时 你将看到一个表格 表格中每 一个记录都是一个雇员的信息 一共有四列 一个是雇员的姓 一个是名字 一个是头衔 还有一个是他们的受雇日期 图三 每一个雇员信息都显示了图三 每一个雇员信息都显示了 LastName FirstName Title 和和 HireDate 第二步 将姓和名显示在一列中第二步 将姓和名显示在一列中 现在 每一个雇员的姓和名都是分开在两列中显示的 把它们放到一个列中显示出来 也许是一个不错的主意 要做到这一点 我们需要用到 TemplateField 我们可以添加一个 新的 TemplateField 给它加上一些必须的标记语言和数据绑定代码 然后删除原来的 Firs tName 和 LastName 这两个 BoundField 当然 我们也可以将 FirstName 这个 BoundField 直接转换成一个 TemplateField 编辑它以加上 LastName 的值 然后再删除 LastName 这 个 BoundField 两种办法都行 不过我个人还是比较喜欢直接转换的那种 因为这种方式可以自动的 添加一个含有 Web 控件和相应的数据绑定代码的 ItemTemplate 和 EditItemTemplate 它 们可以用来模仿一个 BoundField 的呈现和功能 这样做的好处自然是不言而喻的 因为转 换的过程已经帮我们做了很多事情 那我们当然就可以节约不少的时间了 要将一个 BoundField 转换成 TemplateField 我们可以在 GridView 的智能标签的弹出 菜单中点击 编辑列 Edit Columns 在弹出对话框的左下角的列表中选择需要转换的 BoundField 然后点击右下角的 将此列转换成模板列 Convert this field into a Templa teField 即可 图四 在字段对话框中 将一个绑定列转换成一个模板列图四 在字段对话框中 将一个绑定列转换成一个模板列 让我们继续将 FirstName 这个 BoundField 转换成 TemplateField 在这个更改之后 设计器中并没有什么明显的不同 这是因为将 BoundField 转换成 TemplateField 时 其实 是创建了一个维持之前的 BoundField 的外观和感觉的 TemplateField 尽管在设计器中没 有视觉上的变化 但是这个转换的过程已经将 BoundField 的声明代码 改成了如下所示的 TemplateField 的声明代码 1 2 3 4 5 6 7 8 asp TextBox ID TextBox1 runat server Text asp Label ID Label1 runat server Text 9 10 就像你看到的那样 TemplateField 由两个模板组成 一个 ItemTemplate 它有一 个 Label 控件 其 Text 属性被设置为 FirstName 数据字段的值 还有一个 EditItemTempla te 它有一个 TextBix 控件 其 Text 属性也被设置为 FirstName 数据字段的值 数据绑定 语法 说明数据字段 fieldName 被绑定到了这个特定 的 Web 控件的属性上 要将 LastName 添加到 TemplateField 中 我们需要为 ItemTemplate 添加一个 Label 控件并将其 Text 属性绑定到 LastName 上 通过设计器或是手工编写代码都可以做到这一 点 要手工写代码的话 只需简单的将相应的声明代码添加到 ItemTemplate 中即可 如 下所示 1 2 3 4 5 6 7 8 9 10 11 12 asp TextBox ID TextBox1 runat server Text asp Label ID Label1 runat server Text asp Label ID Label2 runat server Text 要通过设计器来添加的话 还是在 GridView 的智能标签的弹出菜单中点击 编辑列 Edit Templates 这样会显示 GridView 的模板编辑界面 在这个界面中 智能标签是 Gr idView 中模板的列表 因为这个时候我们只有一个 TemplateField 所以下拉列表中只有 Fi rstName 的各种模板和 EmptyDataTemplate 以及 PagerTemplate 如果指定了 EmptyDataTemplate 模板的话 它将用于绑定到 GridView 的数据源中没 有任何记录时的输出呈现 如果指定了 PagerTemplate 它将用于呈现 GridView 的分页界 面 图五 图五 GridView 的模板列可以通过设计器来编辑的模板列可以通过设计器来编辑 要在 FirstName 模板列中同时显示 LastName 从工具箱中拖一个 Label 到 FirstName 模板列的 ItemTemplate 中即可 当然 这要在 GridView 的模板编辑界面中才行的 如下 图所示 图六 向图六 向 FirstName 模板列的模板列的 ItemTemplate 中添加一个中添加一个 Label 现在 添加到 TemplateField 的 Label 控件的 Text 属性还是 Label 我们需要修改这 个以使这个属性绑定到数据源中的 LastName 字段上 我们可以通过在 Label 控件的智能 标记上点击一下 然后在弹出菜单中选择 编辑数据绑定 Edit DataBindings 选项 如 下图所示 图七 从图七 从 Label 的智能标签上选择的智能标签上选择 Edit DataBindings 选项选项 在弹出的数据绑定对话框中 你可以在左边的列表中选择需要绑定的属性 然后在右 边的下来框中选择一个数据字段 好了 我们现在在左边选择 Text 属性 然后在右边选择 LastName 字段 点击 OK 图八 将图八 将 Text 属性绑定到属性绑定到 LastName 字段上字段上 注意 数据绑定对话框允许你声明一个双向的数据绑定 如果你保持 双向数据绑定 Two w ay databinding 这个复选框为未选中的话 数据绑定的代码将会是而不是 不过 对于本节教程来说 两个种做法的效果 都是 OK 的 双向数据绑定在插入和编辑数据的时候将会比较重要 但是如果仅仅是简单 的显示数据的话 两种做法都是一样的 我们将在今后的章节中详细的讨论一下双向数据 绑定 让我们再花一些时间到浏览器中看看这个页面 就像你看到的那样 GridView 仍然包 含 4 列 不过 FirstName 列里面显示了姓和名两个数据 图九 姓和名显示在同一列里面了图九 姓和名显示在同一列里面了 要完成这一步 我们先删除 LastName 这个绑定列 并将 FirstName 这个模板列的列 头文本 HeaderText 改成 Name 在这之后 GridView 的声明代码将会像下面这样 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 asp TextBox ID TextBox1 runat server Text asp Label ID Label1 runat server Text asp Label ID Label2 runat server Text 18 19 20 21 22 图十 每一个雇员的姓和名都显示在同一列里面了图十 每一个雇员的姓和名都显示在同一列里面了 第三步 使用第三步 使用 Calendar 控件显示控件显示 HiredDate 字段字段 在 GridView 中将数据显示为文本的话 只需要简单的使用 BoundField 就可以了 然 而 在某些特定的场合 数据最好是展示为一个特殊的 Web 控件而不是一个简单的文本 这样的自定义的数据显示就可以用 TemplateField 来做 比如说 比起将雇员的雇佣日期 显示成文本来说 我们觉得将其高亮的显示在一个 Calendar 使用 Calendar 控件 中会更 爽一些 要做到这一点 先将 HiredDate 这个绑定列转换成一个模板列 像之前做的那样转换 就是了 大家应该还没有忘记吧 在 GridView 的智能标签那里下手就可以了 图十一 将图十一 将 HiredDate 绑定列转换成一个模板列绑定列转换成一个模板列 就像我们在第二步中看到的那样 这个操作会将绑定列替换成一个含有 ItemTemplate 和 EditItemTemplate 的模板列 其中的 ItemTemplate 和 EditItemTemplate 分别带有一个 Label 和一个 TextBox 而这个 Label 和 TextBox 的 Text 属性都使用了数据绑定语句来将 HireDate 绑定到自己身上 要用 Calendar 控件来替换这个文本的话 我们可以编辑模板 删除 Label 控件 并添 加上一个 Calendar 控件 在设计器中 从 GridView 的智能标签的弹出菜单中选择 编辑模 板 Edit Templates 并在下拉列表中选择 HireDate 模板列的 ItemTemplate 然后 删除 Label 控件并从工具箱中拖一个 Calendar 控件到模板编辑界面中 图十二 给图十二 给 HireDate 模板列的模板列的 ItemTemplate 添加一个添加一个 Calendar 控件控件 这个时候 GridView 中每一行的 HireDate 模板列都会包含一个 Calendar 控件 不过 雇员的实际雇佣日期还没有设置到 Calendar 控件上 这就让 Calendar 控件默认的显示 为当前的日期 我们可以通过将雇员的 HireDate 赋值给 Calendar 控件的 SelectedDate 和 VisibleDate 属性来修正这个问题 从 Calendar 控件的智能标签中选择 编辑数据绑定 然后 把 SelectedDate 和 VisibleDat e 这两个属性都绑定到 HireDate 字段上 图十三 将图十三 将 SelectedDate 和和 VisibleDate 都绑定到都绑定到 HireDate 字段上字段上 注意 Calendar 控件的选定日期不一定要可见 举个例子来说 某个 Calendar 控件的选定日 期为 1999 年 4 月 1 日 但却显示的是现在的年月 选定日期和可见日期是由 Calendar 控 件的 SelectedDate 和 VisibleDate 属性来指定的 因为我们不仅希望选中雇员的 HireDate 还希望它是可见的 那么我们就需要将这两个属性都绑定到 HireDate 字段上 现在 我们再到浏览器中看看这个页面 Calendar 现在显示的是雇员的雇员受雇日期 的月份并选中了一个指定的日期 图十四 雇员的受雇日期显示到了图十四 雇员的受雇日期显示到了 Calendar 控件上控件上 注意 和我们一直所见到的那些例子相反 在本节教程中我们并没有将 GridView 的 EnableViewStat e 属性设置为 false 这样做的原因是 在 Calendar 控件上的点击将会产生一个回发 PostBa ck 并将 Calendar 的选定日期设置为刚才所点击的那个日期 如果禁用了 GridView 的 ViewState 那么每一次回发都将导致 GridView 使用原来的数据重新绑定 这样 Calendar 的选定日期就会变成原来的雇员受雇日期 在本教程中 这是一个没有意义的议题 因为用户本来就不应该可以修改雇员的受雇 日期 可能直接配置 Calendar 控件为不可选是最好的办法 不过不管怎么说 在本教程中 可以看到 某些情况下还是将控件的 ViewState 启用才能提供某些特定的功能的 第四步 显示雇员在公司工作了多少天第四步 显示雇员在公司工作了多少天 到现在 我们已经看到了 TemplateField 的两个应用 将两个数据合并到一个列中 用一个 Web 控件来展示数据 而不是用一个简单的文本 第三种 TemplateField 的用法是 显示 GridView 中数据的元数据 比如说 除了显示 雇员的受雇日期 我们可能还希望用一列来显示这个雇员在公司干了多久 另外还有一种用法 它将在某些情况下需要用到 比如说在页面上某个数据的显示格 式需要用一种不同于其在数据库中的存储格式的时候 想象一下 雇员表中有一个性别字 段 其中存储了 M 或是 F 这样的字符用于表示此雇员是男的还是女的 当我们需要将这个 信息显示在页面上的时候 我们可能希望能够将其显示为 男 或 女 而不是 M 或 F 这两种用法都可以采用在 ASP NET 页面的后置代码类 或者是在一个独立的类库中 将其实现为一个静态方法 创建一个供模板调用的格式化方法 formatting method 来做 到 这样的格式化方法将在模板中调用 语法跟前面的数据绑定语法是一样的 格式化方 法可以接受若干个参数 但是必须返回一个字符串 这个返回的字符串是一个用于插入到 模板中的 HTML 让我们增加一点内容来说明这个概念 主要是增加一列以显示雇员在公司干活的天数 这个格式化方法接受一个 Northwind EmployeesRow 对象 然后返回以字符串的形式返 回这个雇员在公司干活的天数 这个方法可以添加到 ASP NET 页面的后置代码类中 不过 一定要记得将其标记为 protected 或 public 不然模板就访问不到它了 1 2 3 4 5 6 7 8 9 10 11 12 13 protected string DisplayDaysOnJob Northwind EmployeesRow employee Make sure HiredDate is not null if so return Unknown if employee IsHireDateNull return Unknown else Returns the number of days between the current date time and HireDate TimeSpan ts DateTime Now Subtract employee HireDate return ts Days ToString 0 由于 HiredDate 可能会含有空值 所以我们必须在进行计算之前首先保证其值不为空 如果 HiredDate 值为空的话 直接返回一个 Unknown 就是了 如果不为空的话呢 就 计算当前时间跟 HiredDate 的值之间所隔的天数 并把它作为一个字符串返回即可 要使用这个方法 我们需要在 GridView 的 TemplateField 中使用数据绑定语法来调用 它 同样 我们还是先给 GridView 添加一个新的模板列 图十五 给图十五 给 GridView 添加一个新的模板列添加一个新的模板列 将这个新的模板列的页眉文本 HeaderText 设置成 Days on the Job 并将其 Ite mStyle 的水平对齐 HorizontalAlign 设置为居中 Center 要调用 DisplayDaysOnJob 方法 我们需要给这个模板列添加一个 ItemTemplate 并加上如下的数据绑定代码 1 2 Container DataItem 返回数据源对象中的一个相应的 DataRowView 对象给 GridView 它的 Row 属性返回一个强类型化的 Nothwind EmployeesRow 然后再将其传递给 Displ ayDaysOnJob 方法 这个数据绑定语法可以直接出现再 ItemTemplate 就像下面的代码 中那样 中或是赋值给 Label 控件的 Text 属性 注意 除了传递一个 EmployeesRow 的实例 其实我们也可以仅仅传递 HireDate 的值 使用就可以了 不过呢 Eval 方法将返回一个 object 类型 所以我们就必须要修改 DisplayDaysOnJob 方法的签名以使其可以接受一个 object 类型的 参数 我们不能将 Eval HireDate 调用的结果隐式的转换成一个 DateTime 类型 因为 E mployees