Menu

ASP.NET y Bootstrap: GridView

22 Noviembre, 2015 - Diseño & ASP.NET, Sociedad Digital, Tecnología
ASP.NET y Bootstrap: GridView

Hoy volvemos con el desarrollo de un control de servidor ASP.NET GridView, utilizando para su maquetación el framework Bootstrap.

Para llevar a cabo el ejemplo, hemos utilizado una Base de Datos muy conocida y utilizada en cientos de tutoriales. Nos estamos refiriendo a Northwind de Microsoft y más concretamente a una de sus tablas: Clientes.

Vamos a materializar una codificación completa para posibilitar listar por pantalla de forma paginada los registros de la tabla, así como posibilitar la edición de alguno de sus campos: “Nombre de contacto” y “Teléfono”. También se podrán eliminar registros, tanto de forma individual como en conjunto.

ASP.NET-GridView-Bootstrap

Como se puede apreciar en la imagen, el GridView se complementa con un contador total de registros en la parte superior derecha.

En la parte inferior, un paginador basado en un control DropDownList (parte izquierda) y un Label como contador de páginas (parte derecha).

Por último, dispone de un botón para eliminar los registros seleccionados del GridView mediante los controles ChekBox situados en el extremo izquierda de cada fila.

 

ASP.NET-GridView-Bootstrap

 

A su vez, se podrán modificar los campos Nombre de Contacto y Teléfono.

Se pretende que todas las acciones, estén acompañadas de mensajes informativos, bien en forma de pop-up con rutinas JavaScript (generalmente los mensajes de confirmación), bien con controles label-bootstrap para notificar las acciones realizadas.

Bueno, pues vamos allá…

A continuación se muestra la parte de diseño. Ten en cuanta, que al igual que el anterior ejemplo y lo que vengan después, utilizan una MasterPage llamada MasterPage.master.

Fíjate en los siguientes detalles:

1.- Empleamos clases de Bootstrap para maquetar la parrilla del GridView: “table table-bordered”. En este caso ponemos borde a la tabla.

2.- Utilizamos del GridView  los siguientes eventos y manejadores:

para materializar los mensajes informativos de cada una de las acciones

2.- Damos estilo a la cabecera: Color azul oscuro de fondo, texto blanco y negrita

3.- Damos estilo a una fila en edición: color de fondo amarillo suave

4.- Damos estilo al caso posible de no haber datos, donde volvemos a utilizar de nuevo clases Bootstrap: Color del texto en rojo

5.- Para el paginador, utilizamos controles DropDownList y label y clases de Bootstrap para darles estilo

6.- Para darle más funcionalidad, hemos incluido un control chekBox en cada fila del GridView para poder seleccionar múltiples registros que posteriormente puedan ser borrados. Ponemos un botón maquetado con Bootstrap para materializar el borrado de los elementos seleccionados.

Y ahora veremos el codeBehind.

Declaración de variables públicas

GridView_Clientes_DataBound

GridView_Clientes_PreRender

GridView_Clientes_RowDeleted

GridView_Clientes_RowUpdated

GridView_Clientes_RowEditing

btnQuitarSeleccionados_Click

chk_OnCheckedChanged

PageDropDownList_SelectedIndexChanged

SqlDataSource1_Selected

Puedes ver el ejemplo completo funcionando en Ejemplo 2

Esperemos que te haya resultado práctico. En próximos artículos seguiremos tratando desarrollo de controles utilizando para su maquetación Bootstrap. De forma paralela te iremos enseñando el manejo de Bootstrap en otros post.

Saludos.

32 pensamientos sobre “ASP.NET y Bootstrap: GridView

carlos

Me ha servido tu instructivo de como usar el gridview de asp con bootstrap. espero continues realizando mas ejemplos

Respuesta
    UsrBlogSiiNet

    Muchas gracias Carlos. Nos alegra que te haya servido. En breve intentaremos seguir subiendo ejemplos. Saludos.

    Respuesta
Saúl

Excelente ejemplo, favor !!! puedes por favor subir de diferentes controlos?

Saludos cordiales!!!

Respuesta
Isaias

No declaras totalItemSeleccionados

Respuesta
    UsrBlogSiiNet

    Tienes razón Isaias, no están reflejadas las declaraciones públicas. Si te fijas ahora hemos modificado el artículo y las hemos añadido. Gracias por tu observación.
    ¡Saludos!

    Respuesta
Brayan Guerrero

Disculpe, lo que pasa es que copie tal cual la plantilla, pero a la hora de editar no me guarda ningun cambio. ¿Que Puedo hacer?

Respuesta
    UsrBlogSiiNet

    Hola Brayan Guerrero. Con los pocos datos que me das, es imposible determinar cual es el problema para que no te guarde los cambios en un proceso de edición. Te aconsejo que revises el código fuente (el cual has copiado tal-cual de este tutorial) y lo asocies a tu página ASPX, pues seguro que se trata de alguna discrepancia en los nombres de los controles de servidor.
    ¡Ya me dirás!
    Saludos.

    Respuesta
Emmanuel Manzanilla

Disculpa, pude pasar el código a C#, y funciona excelente, pero el link button de quitar clientes no se desactiva al activar la casilla de checkbox, ¿habría una manera de desactivarlo por c#? Gracias

Respuesta
    UsrBlogSiiNet

    Hola Emmanuel, lo mirarán los programadores que trabajan en C# y te contestaremos lo antes posible

    Respuesta
    Lortega

    hhola, en esta pagina podras convertirlo a c#
    http://converter.telerik.com/

    Respuesta
      UsrBlogSiiNet

      Hola Lortega, como hemos respondido en otras ocasiones, lamentamos no poder duplicar todos los ejemplo de los artículos en los dos lenguajes VB.NET y C#, pues el tiempo que tenemos para dedicar a estos artículos de difusión es limitado y no podemos asignar más recursos.
      Te aconsejo que te pongas en contacto con otros usuarios que has escrito comentarios en el post y que trabajan en C#, pues alguno nos ha comentado que han pasado el ejemplo a ese lenguaje y les ha funcionado bien.

      Respuesta
Jhon

Hola disculpa donde puedo descargar tu codigo.. muchas gracias

Respuesta
    UsrBlogSiiNet

    Hola Jhon, no tenemos un repositorio con los fuentes, pero con el código que te mostramos en este post, debes tener suficiente información para poder correr el ejemplo en tu propio proyecto. No obstante, si tienes algún problema, cuéntanoslo y te ayudaremos a resolverlo.

    Respuesta
Javis

Podrias hacer lo mismo pero con C#???

Respuesta
    UsrBlogSiiNet

    Hola Javis, lamentamos no poder duplicar todos los ejemplo de los artículos en los dos lenguajes VB.NET y C#, pues el tiempo que tenemos para dedicar a estos artículos de difusión es limitado y no podemos asignar más recursos.
    Te aconsejo que te pongas en contacto con otros usuarios que has escrito comentarios en el post y que trabajan en C#, pues alguno nos ha comentado que han pasado el ejemplo a ese lenguaje y les ha funcionado bien.

    Respuesta
Emmanuel Manzanilla

Buenas tardes, disculpa, estoy realizando este sitio, pero no se como comparar un boundfield de usuario (lo estoy realizando como uno de usuarios) y una sesión de usuario. Lo que deseo, es sacar un campo del gridview, comparar con la variable de session y si el usuario está activo, no lo podría eliminar, mostrando un mensaje de error. Pero no he logrado sacar el dato del gridview. ¿podrías darme alguna idea? Gracias.

Respuesta
    UsrBlogSiiNet

    Hola de nuevo Emmanuel, le echaremos un vistazo a tu solicitud y te contestamos en breve

    Respuesta
Elvin Antonio Acevedo Torres

Me gustarian los Codigos para C#

Respuesta
    UsrBlogSiiNet

    Hola Evin Antonio, lamentamos no poder duplicar todos los ejemplo de los artículos en los dos lenguajes VB.NET y C#, pues el tiempo que tenemos para dedicar a estos artículos de difusión es limitado y no podemos asignar más recursos.
    Te aconsejo que te pongas en contacto con otros usuarios que has escrito comentarios en el post y que trabajan en C#, pues alguno nos ha comentado que han pasado el ejemplo a ese lenguaje y les ha funcionado bien.

    Respuesta
Jaime Cardone

Excelente Articulo. Mejor imposible. Me costó un poco traducirlo a C#, sin embargo, funcionó perfecto. Algo mejor que esto no creo conseguir en todo el internet. Saludos.

Respuesta
    UsrBlogSiiNet

    Muchas gracias Jaime. Esperamos seguir publicando artículos de calidad y que sean de tu agrado.

    Respuesta
    pedrojuan perez

    amigo me podrias apoyar con el codigo fuente en c#

    Respuesta
      UsrBlogSiiNet

      Hola Pedro Juan, como hemos respondido en otras ocasiones, lamentamos no poder duplicar todos los ejemplo de los artículos en los dos lenguajes VB.NET y C#, pues el tiempo que tenemos para dedicar a estos artículos de difusión es limitado y no podemos asignar más recursos.
      Te aconsejo que te pongas en contacto con otros usuarios que has escrito comentarios en el post y que trabajan en C#, pues alguno nos ha comentado que han pasado el ejemplo a ese lenguaje y les ha funcionado bien.

      Respuesta
    pedrojuan perez

    amigo me podrias apoyar con el codigo fuente en c#cseria de mucha ayuda

    Respuesta
      UsrBlogSiiNet

      Hola de nuevo Pedro Juan, en vista de las demandas de nuestros amigos lectores, estamos evaluando la posibilidad de duplicar los artículos en ambos lenguajes, en cuanto esté decidido te lo notificaremos.

      Respuesta
Edison Cataño

Buenas tardes, de antemano felicitarlos por el excelente contenido que manejan, me ha servido montones,
mi duda es la siguiente,
He repasado el codigo ya varias veces y no logro dar con el inconveniente:

resulta que cuando ejecuto el programa e intento realizar acciones de edicion, me toca dar click
2 veces para poder que x registro entre en modo de edicion, adicional a esto, cuando intento
Cancelar la operacion tampoco lo hace, simplemente se queda en modo edicion y eso…

Muchas gracias por la información que me puedan brindar.

Respuesta
    UsrBlogSiiNet

    Hola Edison, le echaremos un vistazo e intentaremos ver cual es el problema que estás teniendo

    Respuesta
Ivan

Donde Puedo Descargar el Ejemplo

Respuesta
    UsrBlogSiiNet

    Hola Ivan, no tenemos un repositorio con los fuentes, pero con el código que te mostramos en este post, debes tener suficiente información para poder correr el ejemplo en tu propio proyecto. No obstante, si tienes algún problema, cuéntanoslo y te ayudaremos a resolverlo.

    Respuesta
hector

la variable Eval no esta declarada q podria ser

Respuesta
    UsrBlogSiiNet

    Hector, “eval” no es una variable, se trata de una función que forma parte de la sintaxis de enlace de datos del GridView y que, como su nombre indica, permite enlazar los valores de las propiedades de los controles a los datos para su evaluación.

    Respuesta
Isaac Mondragón

Muchas Gracias!!

Respuesta

Deja un comentario

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