ASP.NET - Table、TableRow 和 TableCell Web 服务器控件概述

Table Web 服务器控件使您能够在 ASP.NET 页上创建可使用服务器代码进行编程的表。TableRow 和 TableCell Web 服务器控件提供显示 Table 控件的内容的方法。

一、背景

通常，表不仅用来显示表格信息，它还是在网页上格式化信息的一种方法。可以通过多种方法在 ASP.NET 页上创建表：

·HTML 表。如果所创建的是静态表（运行时将不在其中添加或更改内容的表），则应使用 HTML 表，且不要使用 Table 控件。

·HtmlTable 控件。这是一个 table HTML 元素，已通过添加 runat=server 属性将其转换为 HTML 服务器控件。您可以在服务器代码中对该控件进行编程。

·Table. 这是一种 Web 控件，它使您能够使用与其他 Web 控件一致的对象模型来创建和操作表（例如，添加表的行和单元格）。

通常，当您希望在运行时通过代码向表中添加行和单元格（列）时，可使用 Table Web 服务器控件。虽然您可以将其用作带有预定义的行和列的静态表，但在这种情况下，使用 HTML table 元素会更加简单。

Table Web 服务器控件比 HtmlTable 控件更易于编程，因为它提供了与其他 Web 服务器控件一致的、具有类型化属性的对象模型。（此模型在 Table、TableRow 和 TableCell 控件之间也是一致的。）

1、Table Web 服务器控件与其他列表 Web 服务器控件的比较

有些可以使用 Table Web 服务器控件实现的功能也可以使用列表 Web 服务器控件来实现，具体而言就是 Repeater、DataList 和 GridView 控件。所有这些控件都呈现为（或具有相应的选项来呈现为）HTML 表。

列表控件和 Table 控件之间的差异包括：

·列表控件是数据绑定控件。列表控件只对数据源起作用，而 Table 控件可以显示 HTML 文本和控件的任意组合，与它们是否绑定数据无关。

·列表控件使用模板来指定元素的布局。Table 控件支持 TableCell 子控件，您可以像处理任意 HTML td 元素一样填充 TableCell 子控件。

2、Table Web 服务器控件对象模型

Table 控件可作为 TableRow 控件的父控件。表支持一个名为 Rows 的属性，该属性是 TableRow 对象的集合。通过添加或删除此集合中的项，指定表中的行。TableRow 控件又支持名为 Cells 的集合，该集合包含 TableCell 对象。

表中要显示的内容将添加到 TableCell 控件中。单元格有一个 Text 属性，您可以将其设置为任何 HTML 文本。也可以通过将控件添加到单元格的 Controls 集合，在单元格中显示控件。

父 Table 控件支持一些用于控制整个表的外观的属性，例如 Font、BackColor 和 ForeColor。TableRow 控件和 TableCell 控件也支持这些属性，因此您可以为个别的行或单元格指定外观，而重写父表的外观。

3、将数据绑定到控件

虽然 Table 控件本质上不是数据绑定的，但您可以用它来显示数据库中的数据。与所有 Web 服务器控件一样，您可以将 Table 控件的任意属性绑定到数据源。但 Table 控件不支持直接用来显示数据的属性。而通常的做法是向表添加 TableCell 控件。接着可以将单个 TableCell 控件的 Text 属性绑定到数据，也可以将数据绑定控件（如 Label 或 Literal 控件）添加到单元格。

二、如何：向 Web 窗体页添加 Table Web 服务器控件

添加 Table Web 服务器控件包括两个步骤：添加表本身，然后分别添加行和单元格。您可以在设计时添加行和列来创建静态表，也可以在运行时从代码中添加行和列。

说明： 通常，如果创建的是静态表（运行时不添加或更改内容），则最好使用 HTML 表元素，而不使用 Table Web 服务器控件。

1、向 Web 窗体页添加 Table Web 服务器控件

·从工具箱的“标准”选项卡中，将 Table 控件拖到页面上。

表最初显示为一个不包含行或列的简单文本控件。

2、在设计时添加表行和单元格

若要创建静态表，可以在设计时添加行和单元格。

2.1、选择表，然后打开“属性”窗口，再单击 Rows 属性的省略号按钮 ()。此时显示“TableRow 集合编辑器”窗口。

2.2、单击“添加”创建新行。添加新行，其属性显示在对话框右边的网格中。

2.3、您还可以选择通过更改新行的字体、颜色等来设置它的显示特性。 说明： 在“TableRow 集合编辑器”对话框中输入的设置只适用于一行。若要应用适用于所有行的设置，可将表作为一个整体来设置属性。

2.4、若要向新行中添加单元格，请确保已在“成员”列表中选定了该行，然后单击 Cells 属性的省略号按钮 ()。此时显示“TableCell 集合编辑器”对话框。

2.5、单击“添加”创建新单元格，然后使用对话框右侧的网格设置其属性。若要在单元格中显示文本，请设置其 Text 属性。

2.6、对要添加到行中的每个单元格重复步骤 5。向一行添加完单元格之后，在“TableCell 集合编辑器”对话框中单击“确定”。

2.7对于每个新行及其单元格重复步骤 2 至 6。向表中添加完行之后，在“TableRow 集合编辑器”对话框中单击“确定”。 Table 控件将显示在“设计”视图中，您创建的每一行和每个单元格都将显示为占位符。

三、如何：向 Table Web 服务器控件动态添加行和单元格

在运行时向 Table Web 服务器控件添加行和单元格的做法很常见。Table Web 服务器控件是专门为此任务设计的。

说明： 若要在“设计”视图中以可视化方式来设计表，请使用 HtmlTable 控件。如果您还需要以编程方式操作 HtmlTable 控件的内容，可将其行和单元格转换为 HtmlTableRow 和 HtmlTableCell 控件，方法是将其 runat 属性设置为 server。

Table Web 服务器控件中的行是 TableRow 类型的对象。Table 控件的 Rows 属性支持 TableRow 对象的集合。若要向表添加行，请向该集合添加 TableRow 对象。

类似地，TableRow 对象的 Cells 属性也支持 TableCell 类型的对象的集合。可以通过操作该集合来向行添加单元格。

向表动态添加行和单元格：

1、若要添加行，请创建新的 TableRow 类型的对象：

TableRow tRow = new TableRow();

Table1.Rows.Add(tRow);

2、若要向行添加单元格，请创建一个或多个 TableCell 类型的对象：

TableCell tCell = new TableCell();

tRow.Cells.Add(tCell);

3、向新的单元格添加内容。向单元格添加内容有多种方法，如下表所示。

若要添加	执行此操作
静态文本	设置单元格的 Text 属性。
Controls	声明一个控件实例，然后将其添加到单元格的 Controls 集合。
同一单元格中既有文本又有控件	通过创建 Literal 类的实例来声明文本。像处理其他控件一样将该实例添加到单元格的 Controls 集合中。

说明： 默认情况下，动态添加到 Web 窗体页的控件会被添加到页的视图状态。如果您每次往返时都重新创建控件，则将导致在处理页时出现无法预计的行为，其原因在于视图状态在控件重新创建之前已经恢复。通过将容器控件（例如 Table 控件）的 EnableViewState 属性设置为 false 可避免相应问题。

下面的代码示例演示您可以向 Table 控件添加行和单元格。行与列的数目是由用户输入到两个文本框的数字决定的。每个单元格以静态文本形式显示其行号和单元格号。

protected void Button1_Click (object sender, System.EventArgs e)

{

// Total number of rows.

int rowCnt;

// Current row count.

int rowCtr;

// Total number of cells per row (columns).

int cellCtr;

// Current cell counter

int cellCnt;

rowCnt = int.Parse(TextBox1.Text);

cellCnt = int.Parse(TextBox2.Text);

for(rowCtr=1; rowCtr <= rowCnt; rowCtr++) {

// Create new row and add it to the table.

TableRow tRow = new TableRow();

Table1.Rows.Add(tRow);

for (cellCtr = 1; cellCtr <= cellCnt; cellCtr++) {

// Create a new cell and add it to the row.

TableCell tCell = new TableCell();

tCell.Text = "Row " + rowCtr + ", Cell " + cellCtr;

tRow.Cells.Add(tCell);

}

}

}

下面的代码示例与前面的示例类似，但将在每个单元格中显示静态文本和 HyperLink 控件。HyperLink 控件定位到一个模拟的 URL，传递一个模拟产品 ID。由于该示例混合了静态文本和控件，因此静态文本以 Literal 对象的形式实现，像 HyperLink 控件一样添加到单元格的 Controls 集合中。

Protected void Button1_Click (object sender, System.EventArgs e)

{

// Total number of rows.

int rowCnt;

// Current row count.

int rowCtr;

// Total number of cells per row (columns).

int cellCtr;

// Current cell counter.

int cellCnt;

rowCnt = int.Parse(TextBox1.Text);

cellCnt = int.Parse(TextBox2.Text);

for(rowCtr=1; rowCtr <= rowCnt; rowCtr++) {

// Create a new row and add it to the table.

TableRow tRow = new TableRow();

Table1.Rows.Add(tRow);

for (cellCtr = 1; cellCtr <= cellCnt; cellCtr++) {

// Create a new cell and add it to the row.

TableCell tCell = new TableCell();

tRow.Cells.Add(tCell);

// Mock up a product ID.

string prodID = rowCtr + "_" + cellCtr;

// Add a literal text as control.

tCell.Controls.Add(new LiteralControl("Buy: "));

// Create a Hyperlink Web server control and add it to the cell.

System.Web.UI.WebControls.HyperLink h = new HyperLink();

h.Text = rowCtr + ":" + cellCtr;

h.NavigateUrl = "http://www.microsoft.com/net";

tCell.Controls.Add(h);

}

}

}