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:

  • OnRowDeleted->GridView_Clientes_RowDeleted,
  • OnRowUpdated->GridView_Clientes_RowUpdated, y
  • OnRowEditing->GridView_Clientes_RowEditing,

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.