El control asp:ListView (Parte 1 – Creación de una página de listado de productos con una CSS limpia

Uno de los nuevos controles que viene con ASP.NET 3.5 que creo se hará muy popular es el control <asp:ListView>. Este control soporta la edición, inserción, borrado, paginación y ordenación como el GridView. Pero – al contrario que el GridView – nos da un control completo sobre el html generado.

Este control, cuando lo combinamos con el diseñador web y el soporte de CSS de VS 2008, nos permite crear interfaces HTML mucho más límpias. En las próximas semanas escribiré varios post para mostraros cómo podemos usarlo.

Creando una página de catálogo de productos.

Para el post de hoy empezaremos con un ejemplo simple, crearemos una catálogo de productos como el siguiente:

Este aspx cogerá un índice de catálogo en la URL, y usará LINQ to SQL para obtener y mostrar la información del producto. También habilitaremos la navegación entre productos (y todas las operaciones se harán en la base de datos – de forma que sólo se obtendrán 6 productos de la base de datos).

Paso 1: Definendo el aspecto del sitio con MasterPages anidadas

Ántes de empezar a trabajar, primero definiremos toda la interfaz de usuario y la estructura de nuestro sitio.

Si no se os da bien el diseño como a mí, seguramente cogeréis uno de los modelos HTML libres que podemos descargar de: http://www.opensourcetemplates.org/ ó http://www.oswd.org. Los modelos de estos sitios son HTML puros (es decir, que los podemos usar con cualquier tecnología de lado de servidor), y están hechas con CSS y XHTML. Para este post he elegido el modelo “TerraFirma“.

Después de descargar el modelo, lo primero que pensé fué crear una Master Page raíz que definises la estructura del sitio. Crée unas cuantas master pages anidadas para definir los estilos de las diferentes columnas (“SingleColumn.master” y “TwoColumn.master”). VS 2008 soporta la creacion de master pages anidadas y además lo hace reálmente fácil.

Una vez hecho esto, podemos crear una página para el catálogo de producots basado en la masterpage single-column (clic para agrandar la imágen):

Fijáos en la característica de pantalla dividida de VS 2008. EStamos usando la vista vertical, para que podamos ver tanto el código como el diseño en un monitor amplio.

Paso 2: Definir las reglas CSS usando Mock HTML UI

A la hora de definir la interfaz de nuestra página, hay un par de aproximaciones diferentes que podemos usar. Una podría ser escribir el código para generar dinámicamente la interfaz, y luego hacer que sea bonito. La otra aproximación que podemos hacer es imitar el HTML primero, y luego escribir el código para hacerlo dinámico. Para este post he optado por la segunda opción.

Para empezar añadiremos los estándar <ul><li>  para la lista de productos:

Como vemos, estos <ul> no quedan muy bien, y obviamente no es lo que queremos. Para hacerlo mejor, usaremos algunas de las características de las css que ya vimos hace unos post

Abrimos la ventana de “Manage Styles” en VS 2008 (seleccionamos Format–> CSS Styles –> Managed Styles):

Con esta barra podemos ver todas las reglas CSS de nuestra hoja de estilos. También nos permite buscar valores CSS, refactorizar reglas css entre las hojas de estilos, y crear reglas nuevas.

Podemos crear una regla CSS para nuestro listado de productos en el link “New Style…”. Aparecerá una ventana que nos permite elegir donde queremos definir la regla CSS, y configurar los valores que queremos. Para este ejemplo llamaremos al selector CSS “.productslist li” y elegimos “Define in existing style sheet” para añadirlo a la hoja de estilos existente de nuestra aplicacion:

Le damos a “OK” y volvemos a la vista de código para asignar esta regla a nuestra lista <ul> (mirad que VS 2008 nos da intellisense para el CSS):

Por ahora, nuestra regla no tiene ningún valor asignado, así que la lista <ul> seguirá viéndose igual.

Hay un par de maneras de darle valores al CSS: 1) abrir la hoja de estilos y ponerlas en código, 2) usar el diálogo de administracion de estilos que vimos antes, o 3) usar la nueva ventana de propiedades de CSS. Para mostrar la ventana de propiedades de CSS le damos a View ->CSS Properties menu:

Cuando seleccionamos un elemento tanto en la vista de código o diseño, las ventana de propiedades de CSS mostrará todas las reglas CSS que se le están aplicando. La lista de  “Applied rules” que muestra la ventana de propiedades de CSS nos indica la precedencia de orden de las reglas en cascada. Las propiedades CSS de abajo nos muestra todos los valores que tiene asignado el elemento.

El desplegable “target rule”(en rojo) nos indica qué selector CSS se le asignará. En el ejemplo de arriba, nuestra regla .productlist li es el que tenemos seleccionado – es decir, los valores que le vayamos dando en la ventana de propiedades CSS, se irán guardando en nuestra hoja de estilos CSS externa. Ningún valor del estilo se guardará en el código de la página HTML.

Vamos a cambiar alguno valor a nuestra lista “productlist li”. Primero cambiamos la visualización a modo diseño:

Queremos poner cada elemento <li> a la izquierda:

Y por último ponemos el boton de cada elemento <li> a una distancia de 15px del producto:

Si pasamos a la vista del código veremos que no hay ningún valor de estilo en la página HTML:

En lugar de eso hemos obtenido un selector CSS en la hoja de estilos externa:

Ahora lo que nos queda es cambiar el contenido estático HTML en datos dinámicos de una base de datos.

Paso 3: Definir nuestro modelo de datos LINQ to SQL

Usaremos LINQ to SQL para obtener la tabla de productos de la base de datos. LINQ to SQL es una implementación de un ORM (Object Relational Mapper) que viene en .NET 3.5. Podéis aprender más sobre él en la serie de post sobre LINQ to SQL (más post están por llegar):

Parte 1: Introducción a LINQ to SQL

Parte 2: Definiendo el modelo de datos.

Parte 3: Consultando la base de datos

Parte 4: Actualizando la base de datos.

Parte 5: Enlazar controles de interfaz de usuario con el ASP:LinqDatSource

Usaremos la base de datos de ejemplo Northwind definiendo el modelo de clases de datos en LINQ to SQL:

Una vez que tenemos esto, estamos listos para usar el control <asp:listview> para enlazar los datos.

Paso 4: Convertir la interfaz copiada HTML para que use el control <asp:listview>

El contorl <asp:listview> no devuelve ningún tipo de código HTML. En lugar de eso, podemos definir la salida que queramos, a partir de templates:

• LayoutTemplate
• ItemTemplate
• AlternatingItemTemplate
• SelectedItemTemplate
• EditItemTemplate
• InsertItemTemplate
• EmptyItemTemplate
• EmptyDataTemplate
• ItemSeparatorTemplate
• GroupTemplate
• GroupSeparatorTemplate

Los dos primeros templates de la lista – LayoutTemplate e ItemTemplate – son los que más usaremos. El primero no permite definir el contenedor/wrapper de nuestros datos. El segudno nos permite definir cómo se va a ver cada elemento.

En el <LayoutTemplate> definimos un control “ItemContainer” que indica dónde queremos que el control <asp:ListView> ponga los elementos <ItemTemplate> en el código de salida HTML.

Para ver cómo funciona, cogeremos la interfaz HTML que hemos copiado:

Y lo cambiamos con un <asp:listview> que generará el mismo código:

Fijáos cómo usamos el control <asp:placeholder> en el <LayoutTemplate> para indicar dónde queremos los elementos de la lista. Podríamos haber usado un control itemContainer – pero añadiendo un <asp:placeholder> nos ahoramos la generación de valores id y HTML extra.

También hemos definido un <EmptyDataTemplate>. Se mostrará en lugar del <LayoutTemplate> si asignamos una secuencia vacía al ListView. Esto nos previene de mostrar un <ul></ul> vacío cuando no haya productos en el catálogo elegido.

Una vez que tenemos el template anterior, escribiremos un poco de código para obtener los productos de los datos con LINQ to SQL, y enlazar el ListView a ellos:

VB:

C#:

Y cuando ejecutemos la página y seleccionemos un categoryid como argumento en la url, veremos los productos obtenidos dinámicamente de la base de datos:

Si ponemos una categoría que no tiene productos, tendremos el mensaje del template vacío:

Si vemos el código fuente desde el navegador, veremos que el HTMl generado para nuestro ListView es el mismo que el de la página estática:

No hay ningún id en el código del estilo generado. Tenemos control total sobre el código HTML generado.

Paso 5: Usar el contorl <asp:LinqDataSource> en vez de escribir código.

En el paso anterior hemos escrito un poco de código LINQ to SQL para enlazar los datos al contorl <asp:Listview>. Esto funciona y nos da un gran control sobre la lógica que se ejecuta.

Otra opción que podemos tomar es  un control datasource de ASP.NET. Todos estos tipos de controles de ASP.NET2.0 (SqlDataSource, AccessDataSource, XMLDataSource, SiteMapDataSource, etc) funcionan con el ListView. También podemos usar el nuev <asp:LinqDataSource>. Para ver cómo funciona mirad el quinto post sobre LINQ to SQL

Para usar este control, lo primero que debemos hacer es borrar el código que escribimos en el code-behind, y entonces, hacer clic en el control <asp:ListView> en el diseñador y seleccionar la opcion “Choose DataSource-> New DataSource”. Elegimos la opcion “LINQ DataSource” y lo enlazamos al modelo de la base de datos Northwind que teníamos creado.

Elegimos la entidad “Products” para que se enlaze al ListView:

Podemos darle al boton2Where” para configurar el filtro de LINQ  dependiendo del valor de la categoria (también podemos enlazar este valor desde un valor de formulario, cookie, valor en session, otro control, etc):

Cuando pulsamos el botón “OK” el campo DataSourceID del ListView se asignará a un nuevo <asp:LinqDataSource> de la página:

Y ahora, sin haber escrito nada de código, tenemos un listado de productos en nuestra interfaz HTML a partir del modelo LINQ to SQL.

Paso 6: Habilitando la paginación en el lado del servidor con el control <asp:DataPager>

El ultimo paso será añadir la paginación sobre nuestros productos. Tan sólo queremos mostrar 6 productos a la vez en la página, y tener un índice de números que permita a los usuarios navegar hacia delante o hacia atrás.

Otro nuevo control que viene en ASP.NET 3.5 es el <asp:DataPager> – que permite controlar el tema de la paginación con un ListView realmente fácil. Podemos arrastrarlo en cualquier parte de la página, y poner el ID del ListView en “PagedContorlID”, y la en la propiedad “PageSize” le indicaremos cuantos elementos del ListView queremos mostrar cada vez:

El <asp:DataPager> nos mostrará el ListView de la siguiente forma:

Y si hacemos clic en el “2” se nos mostrarán los 5 productos que faltan:

El control <asp:LinqDataSource> usa LINQ to SQL para la paginación en lado del servidor para asegurarse de que sólo se obtienen 6 productos (ya que la propiedad PageSize es 6) y los obtendrá de la base de datos. Es decir, vuestra aplicación y la base de datos serán escalables incluso aunque tengamos miles de productos en una misma categoría.

Disclaimer: El <asp:DataPager> en la Beta2, tiene algunas limitaciones y no puede configurarse con una consulta personalizada. Ya veremos como solucionar esto en otro post.

Resumen.

Tenemos una pequeña demostración de cómo usar el control <asp:ListView>. Os daréis cuenta de que este control nos da control total sobre el HTML que se envía al cliente – mientras sigue proporcionando una forma sencilla para paginar, borrar e insertar elementos. Ya veremos más ejemplos en post futuros.

Aquí tenéis una copia de todo el ejemplo anterior para que lo probéis en casa.

Espero que sirva – y buen fin de semana

Scott

Traducido por: Juan María Laó Ramos. Microsoft Student Partner.

toH tlhIngan Hol DajatlhlaH ‘e’ DaneH’a’?