Contrario a lo que dicen muchos el control ListView de ASP.NET no es tan complicado de implementar y se puede utilizar en SharePoint 2007. Lo único que tienes que hacer es instalar el Framework 3.5 (Tome sus precauciones con el SP1 del Framework 3.5 en un ambiente productivo que puede afectar la master page y los flujos de trabajo).
En este artículo mostraré un ejemplo que despliega un listado de sitios asociados a departamentos dentro de la organización utilizando el control ListView. Abajo la imagen del control:
La ventaja de utilizar el control ListView en comparación de un GridView es la libertad de la forma y estilo que se puede aplicar en el control. Esto nos lleva a que debemos de tener un conocimiento básico por lo menos de código HTML y Hojas de Estilo (CSS).
Abajo muestro la declaración del control parcialmente que he enumerado para explicar elementos importantes.
Podrán notar que no hago la referencia de ninguna fuente de datos o DataSource porque esto lo haré en el código que se ejecuta de la do del servidor como lo muestro abajo:
Regresando a la imagen de código declarativo en el punto 1, declaro el evento que llenará otro ListView que veremos mas adelante.
En el punto 2, la declaración del ItemPlaceholerId nos servirá para amarrar el lugar donde se repetirá cada elemento.
En el punto 3, la definición de LayoutTemplate se define la forma y el estilo del encabezado del contenedor, en el cual en este caso he definido una tabla de html y colocado el encabezado del contendedor. Aunque no es requisito del control si de la visualización, si queremos alinear el encabezado con el detalle debemos de respetar el número de columnas y que tengan las mismas dimensiones que eso lo podemos hacer a través de aplicar estilos (css) asociados a la tabla y a cada columna de la tabla (<td>).
En el punto 4, esta la declaración de los elementos que se repetirán de la colección. Para amarrar cada columna o propiedad de un elemento utilizamos la declaración <%# Eval(“NombrePropiedad”) %> dentro o no de un control de usuario que nos dará otra funcionalidad que podemos aprovechar como un enlace o link.
Ahora vemos la declaración del ListView que mostrará los sitios asociados al departamento.
En el punto 1 la etiqueta declara el área que desplegará cada elemento de la colección asociada al control ListView.
En el punto 2 podemos ver la estructura que podemos ir armado de la forma que deseamos desplegar la información en cada columna <td> definimos un control al cual asociamos una propiedad de la lista que enlazaremos a través de la propiedad DataSource del ListView.
En el punto 3 la cuarta columna insertamos otro ListView que tendrá el detalle de los sitios asociados al departamento.
En el punto 4 y 5 en la declaración de ListView es muy similar a la anterior, así que no me detendré a explicarlo de nuevo.
En la imagen de abajo mostramos la parte final de declaración similar a la anterior.
Ahora vamos a ver el código de lado del servidor donde hacemos las conexiones.
Cuando hacemos clic sobre el control que tiene el símbolo de expansión o sobre el hombre del departamento disparamos un evento del lado del servidor que cargará el ListView Interno miremos el código:
En el punto 1 y 2 casteamos respectivamente para obtener el control ListView y los argumentos ya que lo vamos a necesitar y que fue necesario hacer eso porque estoy utilizando el patrón Passive View y e utilizado un evento para representar el evento original del control. Ud. podrá obviar este paso si tiene el evento original del control como lo muestro en la imagen de abajo:
En el punto 3 obtengo el elemento seleccionado del control ListView.
En el punto 4 es necesario identificar que el elemento seleccionado sea de tipo DataItem.
En el punto 5 leo la propiedad de ImageUrl y si tiene la imagen de expansión la cambio por la contracción (un signo menos) y viceversa.
En el punto 6 busco el ListView que esta dentro del ListView de Departamentos que mostrará el detalle de los sitios.
En el punto 7 evaluó si el control no tiene elementos y los cargo si no hago lo contrario para hacer el efecto de mostrarlos u ocultarlos.
En el punto 8 hago el binding del control ListView con la fuente de datos que en este caso es una colección genérica de tipo Reunión que es una clase que representa una entidad del sitio. Nada importante para tomar en cuenta en el ejemplo de uso del control de ListView.
Hasta la próxima!,
Code4Fun!,
Manolo Herrera
No hay comentarios.:
Publicar un comentario