OBJETIVOS

! " "#$ %& '

REQUERIMIENTOS

SOFTWARE
Microsoft Visual Studio 2005
.NET FrameWork 2.0

DESCRIPCIÓN

El siguiente tutorial está destinado a trabajar con Web Forms para

mostrar datos provenientes de un archivo XML

ACTIVIDAD 1 – CREANDO EL PROYECTO

Crear un nuevo proyecto Web y agregue un archivo XML que contenga los
datos de libros. Los libros cuentan con un ISBN, un título y un precio y,
eventualmente se tienen comentarios y cada comentario tiene un rating y
un texto que describe el comentario.

Para agregar el archivo XML a su proyecto hacemos clic derecho sobre el

proyecto (en el Explorador de soluciones) y selecciona Agregar Nuevo
Elemento debería aparecer una ventana como lo que se indica a
continuación:

La estructura del archivo XML debería quedar como lo muestra la siguiente

figura:
NOTA. El archivo se encuentra disponible junto a este tutorial.

La estructura del archivo XML dice relación con los datos asociados a
cada libro. Cada libro tiene un ISBN, un título, un precio y,
eventualmente, una lista de comentarios y cada comentario tiene un rating
y el texto que describe el comentario en sí.

ACTIVIDAD 2 – AGREGAR EL CONTROL GridView PARA VER LOS DATOS

Al formulario Web (en el caso de que usted no le haya cambiado el nombre

debería llamarse Default.aspx) que se tiene se va a agregar, a través del
Cuadro de Herramientas, un control del tipo XmlDataSource tal y como se
indica en la siguiente figura:

(
En el menú de Tareas del XmlDataSource haga clic en Configurar origen de
datos, tal y como se muestra en la siguiente figura:

Usando el botón Examinar seleccione el archivo XML que ha creado en la

sección anterior. Luego clic en Aceptar.

Ahora vamos a agregar un control del tipo GridView que representa una
tabla (grilla) para mostrar los datos presentes en el XML. Para ello
usamos el Cuadro de Herramientas tal y como se muestra en la siguiente
figura:

)
Luego se selecciona del menú Tareas de GridView la opción Elegir origen
de datos y de la lista disponible seleccionar el objeto XmlDataSource (en
mi caso se llama XmlDatos) tal y como se muestra en la siguiente figura:

Lo anterior va a permitir que la grilla se complete con los datos que se

encuentran en el archivo XML. Nuestro diseño del archivo .aspx debería
quedar como se muestra a continuación:

*
Si ahora intentamos ejecutar el proyecto obtenemos la siguiente salida:

Es posible apreciar que no están todos los datos que se han incluido en
el archivo XML. Las siguientes actividades nos van a indicar la forma en
la cual vamos a mostrar los datos faltantes que dicen relación con los
comentarios asociados a los libros.

ACTIVIDAD 4 – VISUALIZAR EL RESTO DE LOS DATOS DEL XML

Para poder visualizar el resto de los datos se procede a filtrar datos

XML mediante una expresión XPath. En las actividades anteriores, se
trabajó en el comportamiento predeterminado de los controles
XmlDataSource y GridView para extraer información del archivo xml. Sin
embargo, el control sólo muestra parte de estos datos XML.

En esta parte del tutorial, agregará un segundo control GridView y lo

usará para mostrar información principal-detalle. Los usuarios podrán
seleccionar un libro individual en el primer control GridView y el
segundo control GridView mostrará los comentarios del usuario
relacionados, si existieran, para ese libro. Para mostrar comentarios,
utilizará una expresión XPath, que le permite especificar el nivel del

+
archivo de datos XML que desea extraer. Puesto que desea mostrar
comentarios para un libro específico únicamente, creará la expresión
XPath de forma dinámica, dependiendo del libro que haya seleccionado el
usuario.

Agregamos un nuevo control GridView y seleccionamos desde el menú Tareas

de GridView la opción Elegir origen de datos y luego <Nuevo origen de
datos> tal y como lo indica la siguiente figura:

Con lo anterior se va a desplegar una ventana con el asistente para

escoger el origen de datos, seleccionamos Archivo XML como se indica en
la siguiente figura:

,
Le damos el ID XmlDetalle y hacemos clic en el botón Aceptar. Aparece el
cuadro de diálogo Configurar origen de datos. En la sección de Archivo de
datos seleccionamos el XML que tenemos disponible. En la sección
Expresión XPath colocamos la expresión que se muestra en la siguiente
figura:

Luego clic en el botón Aceptar. El diseño del archivo .aspx queda, ahora,
como lo muestra la siguiente figura:

-
Lo que vamos a hacer ahora es permitir que los comentarios que se han
hecho de los libros sólo se vean cuando el usuario seleccione un libro de
la grilla principal. Para lograr lo anterior se tiene que configurar el
primer GridView agregado. También agregará código para crear una
expresión XPath basada en la selección del usuario y asignarla al control
XmlDetalle. El resultado final es que el segundo control GridView
mostrará los comentarios del usuario para el libro seleccionado.

ACTIVIDAD 5 – CONFIGURANDO EL CONTROL GridView PARA LA SELECCIÓN

Lo primero que vamos a hacer es dejar el GridView de los comentarios

invisible, a través de la ventana de Propiedades, modificamos la
propiedad Visible en False.

Ahora, en la vista de diseño seleccione el primer GridView y en el menú

de Tareas se debe marcar la opción Habilitar Selección, tal y como se
muestra a continuación:

Al habilitar esta opción cambia el diseño de la grilla, y debería quedar

como lo muestra la siguiente figura:

.
Luego usando la ventana de propiedades vamos a cambiar el DataKeyNames
por ISBN tal y como se muestra en las siguientes figuras:

/
Desde el cuadro de diálogo que se muestra en la figura anterior se
selecciona el ISBN y se traspasa a la lista de campos de datos
seleccionados y luego clic en el botón Aceptar. Lo anterior permite
configurar el GridView para que trate al ISBN como clave principal de
cada elemento presente en el archivo XML.

Ahora desde la misma ventana de Propiedades del primer GridView hacer

clic en Eventos, tal y como lo indica la siguiente figura:

Hacer doble clic sobre el evento SelectedIndexChanged. Esto nos lleva a:

0
Acá estamos programando el evento asociado al cambio del ítem
seleccionado en la grilla. El código asociado a este evento es el que se
indica en la siguiente figura:

Se obtiene el ISBN del libro seleccionado y luego se modifica, en tiempos

de ejecución, la expresión XPath de acuerdo al ISBN que se ha
seleccionado.

Ahora ejecute su proyecto y comience a seleccionar libros de la tabla que

se va a presentar, lo que debería pasar es que a medida que seleccione
los libros de la grilla principal debería aparecer (en caso de que
existan comentarios) en grilla inferior los comentarios del libro
seleccionado.