Implementando la capa de presentacin

Mostrando la lista de categoras

1. Crear un nuevo control de usuario Web en la carpeta ControlUsuario. En el Explorador de soluciones, haga
clic derecho en la carpeta ControlUsuario y, a continuacin, seleccione Agregar nuevo elemento.
Seleccione la plantilla de control de usuario Web, y asgnale el nombre ListaCategoria.ascx (o simplemente
ListaCategoria) Comprueba que el check Ubicar cdigo en archivo separado, y haga clic en Agregar.

2. En la vista Diseo, abra la caja de herramientas y haga doble clic sobre el control DataList en la ficha datos
para agregar un control DataList a su control de usuario Web.
3. Asigne las siguientes propiedades.
Nombre de la propiedad Valor
(ID) lista
Width 200px
CssClass ListaCategoria
HeaderStyle-CssClass EncabezadoListCategoria

4. Haga clic derecho en el DataList y seleccione Editar plantilla Plantilla Encabezado y pie de pgina. Escriba
Elige una categora en la cabecera de la plantilla.
5. Haga clic derecho en el DataList y seleccione Editar Plantilla Plantillas de elementos. Agregue un control
HyperLink desde la ficha Estndar de la caja de herramientas a la seccin Plantilla de elementos
(ItemTemplate). Establezca la propiedad Text del hipervnculo en vaco.

6. Cambiar a la vista de cdigo. El cdigo generado automticamente por Visual Studio para el hipervnculo
debe tener este aspecto:
7. Modifique el cdigo del <ItemTemplate> as:

8. Cambia a la vista Diseo debe mostrarse una ventana como la de la figura.

9. Agregue los siguientes estilos a ClothingStore.css:

10. Ahora abre el archivo de Code-Behind del control de usuario ListaCategoria.ascx.cs) y modificar el
controlador de eventos Page_Load como esto:
Se necesita para enlazar los datos controles enlazados a la fuente de datos

11. Abrir ClothingStore.master en la vista Diseo. Arrastre ListaCategoria.ascx desde el Explorador de soluciones
y colquelo cerca de la lista de departamentos.
12. Ejecutar el proyecto, seleccione un departamento, a continuacin, seleccione una categora. Debera ver
algo como la Figura .
Mostrando Departamentos y detalle de la categoras
Ahora el visitante puede visitar la pgina web principal y seleccione un departamento o una categora. En cada
uno de estos casos, las celdas de la pgina de contenidos deben actualizarse con datos del departamento o
categora seleccionada.

La pgina de contenidos muestra el nombre de la categora seleccionada o departamento en la parte superior,

a continuacin, la descripcin, y, finalmente, una lista de productos. Vamos a usar un solo formulario Web
denominado Catalog.aspx, que se ocupa de la generacin de ambas pginas de categoras y departamentos.
La lista de productos en esas pginas es generada por un control de usuario Web independiente que se
implementar ms tarde.

1. Abra Catalogo.aspx en vista cdigo. Es necesario agregar dos etiquetas, llamados LabelDescripCatalogo, en
la parte de contenido de la pgina. Puedes utilizar la vista Diseo para aadirlos a tu gusto. Como alternativa,
utilice Vista de cdigo para agregar el siguiente cdigo HTML, que tambin contiene las etiquetas
mencionadas:

2. Abrir Default.aspx en vista cdigo y editar el placeholder como esto:

3. Agregue los siguientes estilos a ClothingStore.css:

4. Es el momento de escribir el cdigo que rellena las dos etiquetas con los datos de la base de datos. Agregue
el cdigo siguiente a la clase Catalogo.aspx.cs:

5. Ejecute el proyecto y haga clic en uno de los departamentos, y luego haga clic en una de las categoras.
Usted debe obtener algo como la Figura.
Mostrando la lista de productos
Este ejercicio se compone de dos partes. En primer lugar, vamos a crear el Control de usuario Web Paginador.
Luego crearemos Control de Usuario Web ListaProductos.
Creando el Control de usuario Web Paginador.
1. Copia la carpeta con los archivos de imgenes de los productos a su carpeta ClothingStore.
2. Aadir un nuevo control de usuario Web llamada Paginador a la carpeta ControlUsuario, con su archivo
code behind.

3. En la vista de cdigo, escriba el cdigo de la plantilla Paginador:

4. Cambie a la vista Diseo. El control debe ser similar a la figura

5. Cambie al archivo de code-behind, y actualizarla como se muestra en el siguiente fragmento de cdigo:
6. Antes de proceder a la aplicacin del control de usuario Web ListaProductos, pulse Ctrl + Shift + B (compilar
solucion)para asegurarse de que el cdigo se compile. Esto har ms fcil la depuracin en caso de que se
produzca un error.
Crear un control de usuario web para listar los productos
1. Aadir un nuevo control de usuario Web llamado ListaProductos a la carpeta ControlUsuario. Vamos a
usar el archivo code-behind tambin.
2. Abra el control en la vista Diseo y arrastre el paginador desde el Explorador de soluciones a su control
de ListaProductos.
3. Contine arrastrando un control DataList de la caja de herramientas a ListaProductos.
4. Por ltimo, arrastre otro control Paginador desde el Explorador de soluciones a ListaProductos. Ahora debe
verse como se muestra en la Figura.

5. Cambiar el ID del paginador superior a topPager, y el ID del paginador inferior a bottomPager.

6. Establecer la propiedad Visible tanto topPager y bottomPager en Falso. (Lo que se quiere es que el
paginador aparezca slo cuando hay ms de una pgina de productos, por lo que no lo hace visible
de forma predeterminada.)
7. Cambie el nombre del ID del dataList a lista, y establezca su propiedad RepeatColumns al 2 (especifica
el nmero de productos que se mostrar por fila), finalmente en CssClass establezca a ListaProductos.
8. Editar el DataList directamente en vista fuente:
9. Agregue estos estilos a la hoja de estilos ClothingStore.css.

10. La forma ASP.NET emite precios de los productos al visitante depende de la configuracin de la cultura
del equipo que ejecuta el sitio. Vamos a configurar para muestre soles peruanos.

11. Modificar la clase ListaProductos en ListaProductos.aspx.cs como se muestra a continuacin:

12. Abra Catalogo.aspx en la vista Diseo. Arrastre ListProductos.ascx desde el Explorador de soluciones,
colquelo cerca del texto [Lista de productos aqu], a continuacin, elimine el texto, como se muestra
en la Figura.
Ejecutar aplicacin:
Correcciones
En ConfiguracionClothingStore
public static int ProductosPorPagina
{
get
{
return productosPorPagina;
}
}

En accesoCatalogo/mtodo ObtenerProductoEnPromoDep modificar el nombre del

parametro CantProducto por CantProductos