Welcome 微信登录

首页 / 网页编程 / ASP.NET / ASP.NET 2.0数据教程之十二:在GridView控件中使用TemplateField

ASP.NET 2.0数据教程之十二:在GridView控件中使用TemplateField2010-08-08 翻译:cnblogs Reeezak返回“”

导言

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控件中,还将用一个状态列来表明他们来到公 司有多久了。

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

第一步 :将数据绑定到GridView

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

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

图二:添加一个新的调用GetEmployees()方法的ObjectDataSource控件

用这种方式绑定GridView将会自动的为雇员信息的每一个属性添加一个 BoundField:EmployeeID、LastName、FirstName、Title、HireDate、ReportsTo 以及Country。在这个报表中,我们不希望看到EmployeeID、ReportsTo以及 Country属性。要删除这些BoundField的话,你可以:

· 使用字段对话框 - 在GridView的智能标签的弹出菜单中点击“编辑列 ”(Edit Columns)。然后,在左下角的列表中选中你想要删除的 BoundField并点击那个带红叉的按钮,就可以删除这个BoundField了。

· 手工编辑GridView的声明语句 - 在源视图(Source view)中,找到你想要删除的BoundField,就是那些<asp:BoundField>元 素,删了就行了。

在你删了EmployeeID、ReportsTo和Country等 BoundField之后,你的GridView的标记语言代码应该像这个样子:

1<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

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

图三:每一个雇员信息都显示了LastName、FirstName、Title和HireDate