Cómo: Agregar filas y celdas dinámicamente a un control Table de servidor Web

Actualización: noviembre 2007

Es habitual agregar filas y celdas a un control Table de servidor Web en tiempo de ejecución. El control Table de servidor Web está diseñado específicamente para esta tarea.

Nota:

Para diseñar una tabla visualmente en la vista Diseño, utilice un control HtmlTable. Si también necesita manipular el contenido del control HtmlTable mediante programación, convierta sus filas y celdas en controles HtmlTableRow y HtmlTableCell; para ello, establezca su atributo runat en server. Para obtener más detalles, vea Convertir controles de servidor HTML en elementos HTML.

Las filas de un control Table de servidor Web son objetos de tipo TableRow. La propiedad Rows del control Table admite una colección de objetos TableRow. Para agregar una fila a la tabla, agregue un objeto TableRow a esta colección.

Asimismo, el objeto TableRow tiene una propiedad Cells que admite una colección de objetos de tipo TableCell. Agregue celdas a una fila manipulando esta colección.

Para agregar filas y celdas a una tabla dinámicamente

  1. Para agregar una fila, cree un nuevo objeto de tipo TableRow:

    Dim tRow As New TableRow()
Table1.Rows.Add(tRow)

    TableRow tRow = new TableRow();
Table1.Rows.Add(tRow);

  2. Para agregar celdas a la fila, cree uno o varios objetos de tipo TableCell:

    Dim tCell As New TableCell()
tRow.Cells.Add(tCell)

    TableCell tCell = new TableCell();
tRow.Cells.Add(tCell);

  3. Agregue contenido a la nueva celda. Puede hacer esto de varias maneras, como se muestra en la tabla siguiente.

    Para agregar

    Haga lo siguiente

    Texto estático

    Establezca la propiedad Text de la celda.

    Controles

    Declare una instancia del control y agréguela a la colección Controls de la celda.

    Texto y controles en la misma celda

    Cree una instancia de la clase Literal para declarar el texto. Agréguela a la colección Controls de la celda, tal y como lo haría con cualquier otro control.
    Nota:

    De forma predeterminada, los controles que se agregan de manera dinámica a una página de formularios Web Forms se agregan al estado de vista de la página. Si los controles se vuelven a crear con cada acción de ida y vuelta, esto podría causar un comportamiento imprevisto al procesar la página, porque el estado de vista se restaura antes de volver a crear los controles. Una forma de evitar problemas es estableciendo la propiedad EnableViewState del control contenedor (por ejemplo, del control Table) en false. Para obtener más información, vea Agregar controles ASP.NET mediante programación.

    En el ejemplo siguiente se muestra cómo se puede agregar filas y celdas a un control Table. El número de filas y columnas está determinado por lo que escribe el usuario en dos cuadros de texto. Cada celda muestra el número de fila y el número de celda como texto estático.

    Protected Sub Button1_Click(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles Button1.Click
   ' Total number of rows.
   Dim rowCnt As Integer
   ' Current row count
   Dim rowCtr As Integer
   ' Total number of cells (columns).
   Dim cellCtr As Integer
   ' Current cell counter.
   Dim cellCnt As Integer

   rowCnt = CInt(Textbox1.Text)
   cellCnt = CInt(Textbox2.Text)

   For rowCtr = 1 To rowCnt
      Dim tRow As New TableRow()
      For cellCtr = 1 To cellCnt
         Dim tCell As New TableCell()
         tCell.Text = "Row " & rowCtr & ", Cell " & cellCtr
         ' Add new TableCell object to row.
         tRow.Cells.Add(tCell)
      Next
      ' Add new row to table.
      Table1.Rows.Add(tRow)
   Next

End Sub

    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);
      }
   }
}

    El ejemplo de código siguiente es similar al anterior, pero muestra texto estático y un control HyperLink en cada celda. El control HyperLink permite navegar hasta una dirección URL simulada y transferir un id. de producto simulado. Dado que el ejemplo combina texto estático y controles, el texto estático se implementa como un objeto Literal, que se agrega a la colección Controls de la celda, al igual que el control HyperLink.

    Protected Sub Button1_Click(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles Button1.Click
   ' Total number of rows.
   Dim rowCnt As Integer
   ' Current row count
   Dim rowCtr As Integer
   ' Total number of cells (columns).
   Dim cellCtr As Integer
   ' Current cell counter.
   Dim cellCnt As Integer

   rowCnt = CInt(TextBox1.Text)
   cellCnt = CInt(TextBox2.Text)

   For rowCtr = 1 To rowCnt
      Dim tRow As New TableRow()
      For cellCtr = 1 To cellCnt
         Dim tCell As New TableCell()
         ' Mock up a product ID
         Dim prodID As String
         prodID = rowCtr & "_" & cellCtr

         ' Create literal text as control.
         Dim s As New LiteralControl()
         s.Text = "Buy: "
         ' Add to cell.
         tCell.Controls.Add(s)
         ' Create Hyperlink Web Server control and add to cell.
         Dim h As New HyperLink()
         h.Text = rowCtr & ":" & cellCtr
         h.href = "https://www.microsoft.com/net"
         ' Add cell to row.
         tCell.Controls.Add(h)
         ' Add new TableCell object to row.
         tRow.Cells.Add(tCell) 
      Next cellCtr
      ' Add new row to table.
      Table1.Rows.Add(tRow) 
   Next rowCtr
End Sub

    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.href = "https://www.microsoft.com/net";
         tCell.Controls.Add(h);
      }
   }
}

Vea también

Referencia

Información general sobre los controles de servidor web Table, TableRow y TableCell

  • Last updated on