Generar HTMLTable on-the-fly. Asignar texto a la celda (HTML, Controles, Texto)

Como resultado de preguntas en los grupos de noticias, sobre generar Tablas HTML y porque acabo de leer el articulo de Sergio (el cual recomiendo)

Quisiera agregar un TIP mas… (que le hace una mancha mas al tigre?)

  • Como crear una Tabla on-the-fly
  • Insertar contenido dentro de la celdas (HTML, Controles, texto puro formateado)
  • Insertar en la pagina web en una ubicación determinada

 

Creando Tabla on-the-fly

Veamos una función básica… que nos devuelva una HTMLTable

Private Function GenerarTabla(ByVal filas As Integer, ByVal columnas As Integer) As HtmlTable
        Dim t As New HtmlTable

        For i As Integer = 1 To filas
            Dim fila As New HtmlTableRow
            For j As Integer = 1 To columnas

                Dim celda As New HtmlTableCell

                'Insertar contenido html dentro de la celda
                '   <td><strong>ejemplo<strong><td>
                celda.InnerHtml = "<strong>ejemplo<strong>"

                fila.Cells.Add(celda)
            Next
            t.Rows.Add(fila)
        Next

        Return t
    End Function

Demasiado básico, aquí podrías agregar propiedades de estilos CSS a la fila y/o celdas… pero no vienen al tema central 😉
PERO SI ES LA RECOMENDACION… todo lo referente a estética (nada de estructura) que sea manejado con estilos CSS (colores, dimensiones, posiciones, etc)

Insertar contenido dentro de la celdas (HTML, Controles, texto puro formateado)

  • Contenido HTML

    Mediante la propiedad InnerHtml de las celda podremos insertar contenido html.
    Hay que mirarlo con mucha atención ya que lo que escribes va directamente «así como esta», y puede ser causante de algunos «fallas» ya que es posible insertar html (es decir cualquier cosa)

  • 'Insertar contenido html dentro de la celda
    '   <td><strong>ejemplo<strong><td>
    celda.InnerHtml = "<strong>ejemplo<strong>"

El resultado:

image

  • Insertar Controles

    Mediante la colecciones de controles de la celda podemos:

  • 'Insert un control
    Dim txt As New TextBox
    txt.Text = "Yoda"
    celda.Controls.Add(txt)
     

El resultado:
image

 

  • Contenido Texto

    Siempre necesitamos insertar texto puro, pero que en ocasiones puede traer amigos «no compatibles» con HTML, es decir caracteres < o > que si colocamos en la pagina tal cual el navegador interpretara como si fuera HTML y nuestra pagina quedaría mal formada… Aquí siempre nos ayudamos con HttpUtility.HtmlEncode, pero en este caso no necesitamos ya que la celda tiene una propiedad llamada InnerText

  • ''Insertar contenido texto (formateado) dentro de la celda
    ''Contenido: <strong>ejemplo<strong> 
    celda.InnerText = "<strong>ejemplo<strong>"

También aquí puedes leer otro articulo: Simple pero poderozo: Literal webcontrol

Resultado:
image
Esto quiere decir que nos ayuda a escribir contenido formateado para HTML
image

 

NOTA:

Estas propiedades no son solo para las Celdas de una tabla, sino que para todos los objetos que heredan de HtmlContainerControl, que no son mas que los que se necesita abrir y cerrar un TAG.
Por ejemplo: <form>, <table>, <tr>, <td>, <a> y <span>

 

 

Insertar en la pagina web en una ubicación determinada

La pregunta siguiente es: y Que hacemos con la tabla en el código? YO QUIERO EN LA PAGINA
Pero siempre necesitamos en ese lugar que no sabemos como «insertarla directamente», aquí la estrategia es ayudarnos por un control contenedor… como el Panel

Es decir tenemos en una pagina, en la posición que deseamos un simple Panel:

<asp:Panel ID="Panel1" runat="server">
        </asp:Panel>

Que si asignamos un estilo CSS podremos ubicarlo donde queramos, así no estamos sujeto  a ninguna restricción.

Dim tabla As HtmlTable = GenerarTabla(txtFilas.Text, txtColumnas.Text)
Panel1.Controls.Add(tabla)

 

 

 

 

Enlaces:

10 comentarios sobre “Generar HTMLTable on-the-fly. Asignar texto a la celda (HTML, Controles, Texto)”

  1. Hola Tere, no entendi bien que sera una matriz de seleccion. Pero intuyo que puede ser una tabla con muchos texbox??
    Tambien podrias generar con un gridview asociado con unas coleccion o datatable con filas en blanco… se me esta ocurriendo ahora. 🙂
    Saludos

  2. Hola Loli
    Para recuperar «cualquier control» deberias recorrer la tabla que generaste

    POr ejemplo este codigo para recorrer un Gridview
    Private Function ObtenerDatos() As String
    Dim Valores As New System.Text.StringBuilder

    For Each fila As GridViewRow In GridView1.Rows
    Select Case fila.RowType
    Case DataControlRowType.DataRow
    If TypeOf fila.FindControl(«textbox1») Is TextBox Then
    End If
    Dim textbox1 As TextBox = CType(fila.FindControl(«textbox1»), TextBox)
    Valores.Append(textbox1.Text)
    Valores.Append(«-«)
    End Select
    Next

    Return Valores.ToString
    End Function

    Para una tabla es identico, pero cambiando los objetos y colecciones a recorrer
    Dim f As HtmlTableRow
    Dim c As HtmlTableCell

    For Each f In t.Rows
    For Each c In f.Cells
    Dim textbox1 As TextBox = CType(c.FindControl(«textbox1»), TextBox)
    ‘…acciones sobre el control.
    Next
    Next

    Espero que te sirva de ayuda o guia.
    NOTA: Si quieres puedes postear en el newsgroup de ASP.NET visto con
    http://groups.google.com.ar/group/microsoft.public.es.dotnet.aspnet/topics?hl=es

    o en los foros de MSDN
    http://forums.microsoft.com/MSDN-ES/ShowForum.aspx?ForumID=309&SiteID=11

  3. hola, Esta muy interesante esto especialmente para un trabajo que estoy desarrollando, boy a trabajar con lo que he visto y enseguida les cometare como van los resultados,,
    Gracias y hasta luego …

  4. Hola Buen dia Me ha servido de mucho esta ayuda que nos das, pero tengo un problema en lo que respecta a obtener lo datos que el usuario definió, El proble esta aqui:

    No es posible hacer esto debido a que, cuando trato de obtener los datos ene l evento de un boton primero hace el PsotBack, y cuando la pagina regresa ya no tiene la tabla, y si la vuelvo a crear ya no tendria los datos deusuario, nos e que ? hacer para obtener los datos del ususario cuando pulse un boton, si me pudieras ayudar o darme una orientada seria exelente.

    Debido a que la tabla que se creo al buelo ya no existe ahora esto no me sirve….

    Dim f As HtmlTableRow
    Dim c As HtmlTableCell
    For Each f In t.Rows
    For Each c In f.Cells
    Dim textbox1 As TextBox = CType(c.FindControl(«textbox1»), TextBox)
    ‘…acciones sobre el control.
    Next
    Next

    Hoo tal vez si pero no, como lo tengo (En el Boton de enviar)

    De antemano Mil Gracias y espero que alguien me pueda echar una mano con esto

  5. Hola jerezkyo
    Me alegro que te sirva el articulo, a veces uno escribe pero no sabe si no es por tu feedback si realmente es «productivo».
    Con respecto a tu pregunta, para que el control siga existiendo tienes que crearlo en el evento PreInit de la pagina

  6. Hola Jose A.Fernandez
    Aun poniendo la creacion dinamica de la tabla en el Evento PreInt se Evapora, al Hacer el postBack, Es decir antes del PostBAck Esta todo bien, la tabla tiene 11 Filas, y contiene lo que el usuario alla contestado, pero al presionar el boton de enviar cuando la pagina regresa del servidor, ya nada la tabla tiene 0 filas y los cntroles creo que aun existen, por que si intento crearlos de nuevo me dice que el ID ya existe, PEROOOOoooo No se ve nada de Tabla la Tabla se esfuma… aca puse un post y tengo algo de codigo, si tienes tiempo y me echas la mano cun pokito Seria exelente, y te lo agradeceri enormemente ….

    http://forums.microsoft.com/MSDN-ES/ShowPost.aspx?PostID=4182342&SiteID=11&mode=1

  7. jeje yo de nuevo !! ya le hee estado buscando por un lado y por otro y nomas no me queda, ya le busque como no perder los datos al hacer el postback y hay varias soluciones pero al parecer solo gauardan Texto no Controles y mucho menos Tablas… se me ac muy muy raro jajajaj Creo que Prefiero VB9 jejejeje

    si me dices maso menos por donde buscar … mil gracias

    Sale saludos ..

Responder a anonymous Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *