通过声明性语法格式化 GridView 或 DataList 中的 TABLE 项目
4.34/5 (11投票s)
本文探讨了一种解决方案，用于在 GridView 或 DataList 的 ItemTemplate 标记内使用 HTML TABLE 行时，保持格式不变。
引言
在 GridView 或 DataList 中显示多条记录时，控件会为整个控件渲染一个 HTML Table 元素，并为每一行渲染单独的 <TR> 元素。在 Visual Studio 属性窗口中为项目、交替项目等选择的格式选项，会作为 TABLE、TR 和 TD 元素的属性和样式进行渲染。当尝试在 GridView 或 DataList 控件的 ItemTemplate 中放入一个表时，这会产生一个典型的问题。为了说明这个问题，让我们看一个业务案例。
问题
假设我们正在构建一个目录应用程序（如黄页），并且有不同公司的记录需要以以下格式显示，交替项目的背景颜色会改变。
用于说明问题的示例数据如下所示，通过将 GridView 放置在页面上并简单地将其数据绑定到可用的 DataSource 来实现。
解决方案
由于 GridView 内部的每一行都需要多行，因此显然我们需要设置 AutoGenerateColumns="False" 并添加带有 TABLE 布局的 ItemTemplate 以获得所需的效果。
由于将表引入到 DataView 的每一行中，每个表的列都有自己的对齐方式。可以通过地址行拉伸第二行中的表来看到这个问题。请参阅下面的代码和结果。
诀窍是删除 ItemTemplate 内的 <TABLE> 标记。这将使所有 GridView 行的列对齐方式得以保留。但是，一旦我们这样做，GridView 标题和交替项目就会出现问题。交替项目的样式不会传播到我们创建的内部 <TR> 元素。下图显示了该问题。
为了克服这个问题，请删除标题。无论如何，我们这里处理的不是单个列；如果是这样，我们甚至不会在这里！接下来，确定代码中如何处理交替项目。在我们的例子中，为了使交替项目具有不同的颜色，请使用 Container.ItemIndex 并确定偶数行。将所需的样式应用于偶数行。对于 DataList 使用 Container.ItemIndex，对于 GridView 使用 Contrainer.DisplayIndex。下面的代码显示了 GridView 的最终代码。对于 DataList，此代码甚至更简单，因为您不需要 <Columns> 标记和 <asp:TemplateField> 标记。
从上面的代码中，可以实现所需的效果，如下所示
