Diseño & ASP.NET: ListView con Bootstrap

Hoy volvemos a la sección de Diseño & ASP.NET con un nuevo ejemplo de maquetación de controles de servidor de ASP.NET, utilizando el framework Bootstrap. Y en este caso vamos a utilizar el control  ListView, uno de los controles de servidor más potentes y funcionales que contiene la caja de herramientas de Visual Studio.

Si en el post anterior gestionábamos la tabla de clientes de la BD Northwind mediante el control de servidor GridView, hoy lo haremos con ListView, pues este último es mucho más moderno que el primero y por lo tanto más funcional. No me entiendas mal, GridView, fue y sigue siendo un gran control, pero sinceramente, el control ListView, mucho más moderno, lo ha superado con creces.

El ejemplo de hoy, consiste en gestionar los datos de la tabla clientes, mediante un formato tabular.

Esta tabla contiene todos los registros de clientes, paginados de 10 en 10. Cada fila, dispone de dos botones, uno para la modificación de los datos y otro para la eliminación del registro. Al final de la tabla, aparece un registro de inserción, y debajo de este, una gestión muy completa del paginado, mediante un control de servidor DataPager asociado al control ListView. Para completar la gestión, incluiremos un buscador de registros que compara la entrada con los campos Contacto (ContactName), Empresa (CompanyName) y Referencia (CustomerID).

En definitiva, este ejemplo intenta crear una completa gestión de una tabla de datos de la forma más sencilla posible de cara al usuario, pero con toda su funcionalidad, y con un aspecto moderno y atractivo. Un maridaje perfecto entre ASP.NET y Bootstrap.

¡Vamos a ello!

Este sería el Interfaz de usuario:

ListView&Bootstrap-1

 

El conjunto lo dividiremos en 6 partes.

1: Líneas de detalle en la estructura tabular del ListView,

2: Un buscador,

3: Agregar nuevo registro,

4: Navegación entre páginas,

5: Visor del paginado, y

6: Totalizador de registros

Para completar el interfaz de usuario, implementaremos mensajes de confirmación, con preguntas al usuario, para llevar a cabo las acciones de gestión: borrado, actualización, inserción, etc.

 

ListView moderno y funcional maquetado con Bootstrap

 

También queremos que los resultados de las acciones descritas anteriormente, vayan acompañadas de un mensaje informativo, de forma que si la acción se lleva cabo con éxito, el mensaje estará enmarcado en color verde (OK), mientras que si la acción no se puede efectuar, por la razón que sea, aparecerá el mensaje enmarcado en color rojo (Error).

 

ListView moderno y funcional maquetado con Bootstrap

 

Fíjate que estamos utilizando las clases bootstrap en, prácticamente, todo el diseño de la IU: formularios; textbox; botones; botones con iconos; tablas y etiquetas.

Para empezar verás el fichero de diseño ASP.NET y HTML: Ejemplo3.aspx. Como en el ejemplo anterior (ejemplo2.aspx), utilizamos una página maestra denominada MasterPage.master y el fichero Ejemplo3.aspx.vb con el codeBehind.

Ejemplo3.aspx

Encabezado

 

ListView

 

Paginado

 

SQLDataSource

 

Al control de servidor ListView se le indica que el DataKeyNames será el campo ClienteID, también le decimos que la inserción de registros se incorporará al final de la tabla: InsertItemPosition=”LastItem”

Así mismo, se le asigna los procedimientos correspondientes al borrado, inserción y actualización de registros y a la cancelación de edición:

  • OnItemInserted=”ListView_Clientes_ItemInserted”
  • OnItemUpdated=”ListView_Clientes_ItemUpdated”
  • OnItemDeleted=”ListView_Clientes_ItemDeleted”
  • OnItemEditing=”ListView_Clientes_ItemEditing”
  • OnItemCanceling=”ListView_Clientes_ItemCanceling”

 

Fíjate también como utilizamos las clases bootstrap para modelar la tabla contenedora del ListView en la plantilla LayoutTemplate:
class=”table table-hover table-bordered table-condensed”

Utilizamos la clase “table-hover” para que el registro por el que pasa el cursor, se muestre de color gris. La clase “table-bordered” pone un borde a todas las celdas de la tabla, y por último, “table-condensed”, reduce un poco el alto de las celdas.

También utilizamos la clase bootstrap “label-warning” para resaltar en color naranja los totales y las páginas activas en la navegación entre páginas del control DatePager.

Ahora vamos con el CodeBehind

CodeBehind

Load de la página

Renderizado del control DatePager

Subrutina de cancelar acción

Subrutina de editar registro

Subrutina de insertar registro

Subrutina de borrar registro

Subrutina de actualizar registro

Buscar cliente

 

Y hasta aquí hemos llegado. Puedes acceder directamente al ejemplo 3 y probar toda la funcionalidad explicada en este post. Esperamos te haya gustado.

En siguientes artículos, continuaremos trabajando con los conceptos de diseño de ASP.NET y el framework Bootstrap.

¡Hasta pronto!