Menu

ListView moderno y funcional maquetado con Bootstrap

11 enero, 2016 - Arte y creatividad, Diseño & ASP.NET
ListView moderno y funcional maquetado con Bootstrap

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:

 

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!

7 pensamientos sobre “ListView moderno y funcional maquetado con Bootstrap

carlos

Gracias por continuar con los tutoriales. no se puede verla pagina de ejemplo se muestra esto
http://blog.siinet.com/?aspxerrorpath=/ejemplo3.aspx

Respuesta
    UsrBlogSiiNet

    Gracias por tu comentario. Nos alegramos que los ejemplos te sean de utilidad.
    Es cierto que hay un problema con el puerto de acceso a nuestro servidor, donde se encuentran los ejemplos de los tutoriales. Hemos tenido que cambiar el router de fibra óptica por problemas técnicos y se nos ha quedado algún puerto “en el tintero” sin configurar.
    Sin tu comentario, no nos habríamos dado cuenta hasta el siguiente post. Así que te lo agradezco.
    En las próximas 24 horas, nos pondremos con ello y se verá de nuevo.
    ¡Saludos!

    Respuesta
carlos

Hola espero sigas compartiendo el conocimiento, tengo una petición. Podrías hacer un ejemplo de cómo usar un popup como mensaje de alerta o de confirmación. Sin usar los del navegador porque estos cambiar de acuerdo al navegador que uses.
Saludos.

Respuesta
    UsrBlogSiiNet

    Hola Carlos. En breve se publicará un post con nueva funcionalidad sobre ASP.NET y Bootstrap en el que estamos trabajando. Me apunto tu sugerencia y te prometo analizar y publicar alguna funcionalidad interesesante para los popups, de forma que sea independiente del navegador.

    Respuesta
    UsrBlogSiiNet

    Hola Carlos, tal y como nos solicitabas, hemos publicado un nuevo post donde programamos, entre otroas cosas, unas funciones que suplen a las clásicas alert() y confirm() de javascript. Espero que te sea de utilidad.
    Saludos.
    Ir al post

    Respuesta
hector

una pregunta este ejemplo es funcional ya que lo almacene en mi maquina y marca errores a penas estoy aprendiendo este lenguaje y quisiera saber mas acerca d el.

Respuesta
    UsrBlogSiiNet

    Hola Hector, el código del artículo es totalmente funcional y se ha obtenido del programa que corre en el ejemplo. ¿Cuales son los errores que te da? Si me das más detalles, quizá pueda ayudarte a encontrar la solución a los errores. ¡Saludos!

    Respuesta

Deja un comentario

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