There are two steps to add a Table Web server control: adding the table itself, and separately adding the rows and cells. To create a static table we can add rows and columns at design time, or we can add them at run time in code.
To add a Table control to a Web Forms page, type an <asp:Table> element into the page.
It is common to add rows and cells to a Table Web server control at run time. Rows are objects of type TableRow. The Rows property of the Table control supports a collection of TableRow objects. We add a TableRow object to this collection to add a row to the table.
Similarly, the TableRow object has a Cells property that supports a collection of objects of type TableCell. By manipulating this collection we can add cells to a row.
To add rows and cells to a table dynamically
To add a row, create a new object of type TableRow:
TableRow tRow = new TableRow();
To add cells to the row, create one or more objects of type TableCell: TableCell tCell = new TableCell();
Add content to the new cell. We can do this in several ways, as shown in the following table.
| To add | Do this |
|---|---|
| Static text | Set the cell's Text property. |
| Controls | Declare an instance of the control and add it to the cell's Controls collection. |
| Both text and controls in the same cell | Declare the text by creating an instance of the LiteralControl class. Add it to the cell's Controls collection as we would other controls. |
The following example shows how we can add rows and cells to a Table control. The number of rows and columns is determined by what the user enters into two text boxes. Each cell displays the row and cell number as static text.
public 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 cellCount;
rowCnt = TextBox1.Text.ToInt16();
cellCount = TextBox2.Text.ToInt16();
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 <= cellCount; 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);
}
}
}
The subsequent example is similar to the previous one, but displays static text and a HyperLink control in each cell. The HyperLink control navigates to a mocked-up URL, passing a mock product ID. The static text is implemented as a LiteralControl object, which is added to the cell's Controls collection just like the HyperLink control is, because the sample combines static text and controls. public 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 cellCount;
rowCnt = TextBox1.Text.ToInt16();
cellCount = TextBox2.Text.ToInt16();
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 <= cellCount; 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 Hyperlink Web Server control and add to cell
System.Web.UI.WebControls.HyperLink h = new HyperLink();
h.Text = rowCtr + ":" + cellCtr;
h.NavigateUrl = "http://www.microsoft.com/net";
tCell.Controls.Add(h);
}
}
}
Displaying Database Information Using a Table Web Server Control
Using the Table Web server control it is possible to display database information. By using the Repeater, DataList, or DataGrid Web server controls, for many applications, it is easier to display data-bound information in a table. In the most common scenario to display data in a Table Web server control, each row of the table represents a data row from the data source, and each cell of the table displays a single field from a row. The Table control does not have a mechanism for automatically iterating through the rows in a data source unlike the list controls (Repeater, DataList, etc.). Therefore, we must do these ourselves.
To display database information in a Table Web server control:
- Set the contents of a
TableCellcontrol to the data to be displayed. Most often we set the cell's Text property to an expression that extracts data from a data source. It is also possible to include controls in aTableCellcontrol and bind the controls to a source of data.
The following example demonstrates one way to display data in a Table Web server control. The sample illustrates an event handler for a button. A DataSet (ADataSet1), DataCommand, and DataConnection have previously been created. The method loops through the DefaultView object of a dataset, creating a TableRow control for each row in the dataset. The code then creates a TableCell control in each table row and sets its Text property to the "author_id" field of the current data row.
public void Button1_Click (object sender, System.EventArgs e){
// Set up a dataview on the dataset.
FillDataSet(aDataSet1);
DataBind();
DataView dv = aDataSet1.Tables[0].DefaultView;
// Create a row with one column for each row in the DataView
foreach (DataRowView dataRow in dv){
TableRow tRow = new TableRow();
TableCell tCell = new TableCell();
tCell.Text = dataRow.Row.ItemArray[0].ToString();
tRow.Cells.Add(tCell);
Table1.Rows.Add(tRow);
}
}
Controls that we insert dynamically to a Web Forms page do not automatically become part of the page's view state. Neither the controls nor their values are saved when a page performs a round trip to the server. We are therefore responsible for saving the state of any dynamically-generated controls whose values we want to preserve.
Comments