none
Pasar de GridView a Elemento de Boostrap 4 RRS feed

  • Pregunta

  • Estoy actualizando una pagina web en aspx con Visual Basic y toda la información la muestran usando varios GridView.

    El problema es que no me d la libertad para mostrar la información acomodada en Cards, Panels o Tables pero con formato de Boostrap 4. 

    Estuve viedo el ListView pero tampoco creo que me sirve... ¿existe algun elemento *View donde pueda yo mostrar "cadenas html" con Clases junto con variables VB? ... un panel o algo que no eh descubierto aun. Pense usar labels pero como son datos variables no creo que sea una buena solución 

    Espero haberme explicado bien, gracias 

    jueves, 25 de julio de 2019 23:38

Respuestas

  • Sí, lo puedes hacer dinámicamente. Para ello, agrega primero en el html un contenedor para el contenido dinámico, tal como un Div, y ponle el runat=server y un ID para que sea accesible desde el code-behind. Después, en el código usas un bucle y vas creando elementos html y agregándolos a la colección Controls del Contenedor, exactamente igual que si estuvieses añadiendo controles aspx. Si nunca has hecho esto con controles aspx, menciónalo y buscaremos un ejemplo. Pero si lo has hecho antes, entonces con los Html es exactamente igual, simplemente cambias donde habrías agregado por ejemplo un new TextBox o un new Label por New HtmlTableRow o new HtmlTableCell, o el componente que quieras (están en el espacio de nombres System.Web.UI.HtmlControls). No todos los elementos html tienen una clase específica para crearlos, pero siempre puedes usar HtmlControl para crear cualquiera (tal como un <p>) pasándole el nombre del tag (new HtmlControl("p")).

    https://docs.microsoft.com/es-es/dotnet/api/system.web.ui.htmlcontrols?view=netframework-4.8

    Todos tienen una propiedad Attributes a través de la cual puedes agregar dinámicamente el atributo "class" y de esa manera conectarle las clases de Bootstrap.

    • Marcado como respuesta EderMx martes, 30 de julio de 2019 15:43
    sábado, 27 de julio de 2019 17:18
  • En un .aspx puedes usar directamente tags de HTML y asignarles valores desde el lado servidor. Para ello, basta con que les pongas runat="server" y les asignes un "id". Por ejemplo, si necesitas un botón, en lugar de poner un <asp:Button> puedes poner <input type="submit" runat="server" id="miboton" class="loquesea" />

    Desde el lado servidor puedes hacer, por ejemplo, miboton.Value="Texto". Observa que se usa .Value y no .Text, es decir, hay que usar las propiedades de HTML y no las porpiedades de .Net.

    Y, por supuesto, donde yo te he puesto class="loquesea" puedes usar clases de Bootstrap como por ejemplo class="btn btn-primary".

    Aunque en este ejemplo te he puesto un botón, el mismo principio es aplicable a cualquier elemento de html. Lo único que hay que recordar es que hay que agregar runat="server" y asignarle un id si lo quieres manipular desde el lado servidor.

    También puedes hacer cosas como esta:

    <span class="loquesea"><%=MiVariable%></span>

    Esto tomará el valor de MiVariable (que tiene que ser una variable o propiedad pública en tu code-behind) y lo incrustará dentro del span. Una vez más, lo del span es solo un ejemplo; esto es aplicable a cualquier elemento html.

    • Marcado como respuesta EderMx martes, 30 de julio de 2019 15:43
    sábado, 27 de julio de 2019 11:41

Todas las respuestas

  • Hola EderMx,

    ¿Te refieres a elementos visuales en la vista?

    Quiero decir, vas a mostrar elementos de tu código en el CSS,

    Es decir que quizá necesites lo siguiente

    https://docs.microsoft.com/es-es/dotnet/api/system.windows.controls.listview?view=netframework-4.8

    Me temo que del lado de Bootstrap no le puedo ayudar a los elementos visuales pero puede usar .aspx o otros elementos de diseño, o netamente CSS3.

    Gracias por usar los foros de MSDN.
    Erick Rivera
     ____
    Por favor recuerde "Marcar como respuesta" las respuestas que hayan resuelto su problema, es una forma común de reconocer a aquellos que han ayudado, y hace que sea más fácil para los otros visitantes encontrar la solución más tarde.
    Microsoft ofrece este servicio de forma gratuita, con la finalidad de ayudar a los usuarios y la ampliación de la base de datos de conocimientos relacionados con los productos y tecnologías de Microsoft. 
    Este contenido es proporcionado "tal cual" y no implica ninguna responsabilidad de parte de Microsoft.
    viernes, 26 de julio de 2019 20:41
  • En un .aspx puedes usar directamente tags de HTML y asignarles valores desde el lado servidor. Para ello, basta con que les pongas runat="server" y les asignes un "id". Por ejemplo, si necesitas un botón, en lugar de poner un <asp:Button> puedes poner <input type="submit" runat="server" id="miboton" class="loquesea" />

    Desde el lado servidor puedes hacer, por ejemplo, miboton.Value="Texto". Observa que se usa .Value y no .Text, es decir, hay que usar las propiedades de HTML y no las porpiedades de .Net.

    Y, por supuesto, donde yo te he puesto class="loquesea" puedes usar clases de Bootstrap como por ejemplo class="btn btn-primary".

    Aunque en este ejemplo te he puesto un botón, el mismo principio es aplicable a cualquier elemento de html. Lo único que hay que recordar es que hay que agregar runat="server" y asignarle un id si lo quieres manipular desde el lado servidor.

    También puedes hacer cosas como esta:

    <span class="loquesea"><%=MiVariable%></span>

    Esto tomará el valor de MiVariable (que tiene que ser una variable o propiedad pública en tu code-behind) y lo incrustará dentro del span. Una vez más, lo del span es solo un ejemplo; esto es aplicable a cualquier elemento html.

    • Marcado como respuesta EderMx martes, 30 de julio de 2019 15:43
    sábado, 27 de julio de 2019 11:41
  • Buenas tardes.... voy a poner un ejemplo visual

    VB.net existe actualmente GridView donde se llenan los datos que se obtienen de una BD y se muestran al usuario. Colocando un GRIDView directamente en el ASPX y agregando por código los datos a la tabla según columnas y renglones (Column.Add e Item) y se ve asi

    Clave

    Apellido

    Nombre

    Edad

    Telefono

    1

    Juarez

    Carlos

    32

    123-456-7890

    2

    Casas

    Maria

    28

    123-456-1234

    3

    Montez

    Javier

    30

    123-456-4560

    Pero que tal si no quiero un GridView, si no crear mi propio código o elemento que en Boostrap 4 se llaman Cards. Digamos poner los datos directamente en código HTML para que se vea algo asi (ya con CSS modificar todo)

    Carlos Juarez

    Clave 1

    Edad:

    32

    Telefono:

    123-456-7890

    Maria Casas

    Clave 2

    Edad:

    28

    Telefono:

    123-456-1234

    Javier Montez

    Clave 3

    Edad:

    30

    Telefono:

    123-456-4560

    Esto poniendo por ejemplo dentro de un CICLO que recorra la BD las etiquetas html directamenete (por ejemplo)

    INICIA CICLO

    <div>

        <h1>VARIABLE_NOMBRE + VARIABLE_APELLIDO</h1>

        <h1>Clave: + VARIABLE_CABLE</h1>

    </div>

    <div>

       <p>Edad:</p>

        <p>VARIABLE_EDAD</h1>

        <p>Telefono:</p>

        <p>VARIABLE_TELEFONO</h1>

    </div>

    sábado, 27 de julio de 2019 15:20
  • Si lo pense... incluso así uso variables "fijas" como el nombre de usuario o para mostrar la fecha y también tengo botones así, pero no se si pueda hacerlo dinamicamente , ya que a veces son 5 PERSONAS las que tengo que mostrar y en otras ocasiones son 20

    sábado, 27 de julio de 2019 15:23
  • Sí, lo puedes hacer dinámicamente. Para ello, agrega primero en el html un contenedor para el contenido dinámico, tal como un Div, y ponle el runat=server y un ID para que sea accesible desde el code-behind. Después, en el código usas un bucle y vas creando elementos html y agregándolos a la colección Controls del Contenedor, exactamente igual que si estuvieses añadiendo controles aspx. Si nunca has hecho esto con controles aspx, menciónalo y buscaremos un ejemplo. Pero si lo has hecho antes, entonces con los Html es exactamente igual, simplemente cambias donde habrías agregado por ejemplo un new TextBox o un new Label por New HtmlTableRow o new HtmlTableCell, o el componente que quieras (están en el espacio de nombres System.Web.UI.HtmlControls). No todos los elementos html tienen una clase específica para crearlos, pero siempre puedes usar HtmlControl para crear cualquiera (tal como un <p>) pasándole el nombre del tag (new HtmlControl("p")).

    https://docs.microsoft.com/es-es/dotnet/api/system.web.ui.htmlcontrols?view=netframework-4.8

    Todos tienen una propiedad Attributes a través de la cual puedes agregar dinámicamente el atributo "class" y de esa manera conectarle las clases de Bootstrap.

    • Marcado como respuesta EderMx martes, 30 de julio de 2019 15:43
    sábado, 27 de julio de 2019 17:18
  • Hola EderMx,

    Gracias por levantar tu consulta en los foros de MSDN. Con respecto a la misma, te hago la recomendación de ingresar al siguiente enlace en donde puedes encontrar una posible solución para tu problema.

    https://www.mytecbits.com/microsoft/dot-net/bootstrap-in-asp-net-girdview

    Gracias por usar los foros de MSDN.
    Erick Rivera
     ____
    Por favor recuerde "Marcar como respuesta" las respuestas que hayan resuelto su problema, es una forma común de reconocer a aquellos que han ayudado, y hace que sea más fácil para los otros visitantes encontrar la solución más tarde.
    Microsoft ofrece este servicio de forma gratuita, con la finalidad de ayudar a los usuarios y la ampliación de la base de datos de conocimientos relacionados con los productos y tecnologías de Microsoft. 
    Este contenido es proporcionado "tal cual" y no implica ninguna responsabilidad de parte de Microsoft.

    domingo, 28 de julio de 2019 8:58