Implementando el esquema del sitio web

Todas las pginas en ClothingStore, incluyendo la primera pgina, tendrn la estructura que se muestra en la
Figura
En captulos posteriores, se aadir ms componentes al esquema (como el carro cuadro resumen casilla de
ingreso o de compras), pero por ahora, estas son las partes que implementaremos en las siguientes
secciones.

Caja de bsqueda

ENCABEZADO DEL SITIO

Lista de
departamentos
CONTENIDO DEL SITIO
Lista de categoras

(Esta zona ser dinmica presentado

Para seleccionar

diferentes contenidos de acuerdo a los

departamentos

requerimientos del usuario)

Ahora vamos a crear un Master.page, donde aplicaremos los estilos para que a partir de este podamos crear
los dems formularios web, los cuales tendrn la misma presentacin del master page.
Construyendo la primera pgina.
1. Agregar un Master.Page.

2. Configuramos nuestro Master.Page con los div cuidando de que el ContentPlaceHolder se encuentre dentro
del div contenidos

3. Como el web form Default.aspx que tenemos actualmente en el proyecto no est enlazado a nuestro
Master.Page, lo eliminamos.

4. Ahora agregamos un web form basado en el Master.Page, ste heredar todo lo realizado en el
Master.Page. Haga clic derecho en la raz del proyecto en el Explorador de soluciones y seleccione Agregar
nuevo elemento. Elija la plantilla Web Form, deje su nombre con Default.aspx, desmarque Place code in
separate file, (que no es necesario un archivo de cdigo subyacente para este formulario), compruebe que
select master page se encuentre seleccionado, luego seleccione el Master.Page y haga clic en Aceptar. Su
nueva pgina ser creada con slo unas pocas lneas de cdigo, todo el resto se hered de la pgina
maestra:

5. Modificar el ttulo de la pgina a ClothingStore : Tienda de Compras OnLine

6. Presione F5 para probar nuestro avance.

Creando el catlogo de productos

Para poner en prctica la lista de departamentos, comenzaremos con la base de datos y crear el camino hasta
la capa de presentacin:
1.

Vamos a crear la tabla de Departamento en la base de datos. Esta tabla almacenar los datos relativos a
los departamentos de la tienda. Antes de aadir esta tabla,

2.

Vamos a aadir el procedimiento almacenado ObtenDepartamento a la base de datos, que est

lgicamente situado en la capa de datos de la aplicacin.
En este paso, usted aprender cmo comunicarse con las bases de datos relacionales utilizando SQL.

3.

Vamos a crear los componentes de nivel de negocio de la lista de departamentos. Vas a aprender cmo
comunicarse con la base de datos mediante una llamada al procedimiento almacenado y el envo de los
resultados a la capa de presentacin.

4.

Por ltimo, deber editar un control de usuario listaDepartamentos, para visualizar una lista dinmica de los
departamentos al visitante, que es el objetivo de este captulo.

Creando la tabla de departamentos

1.

Presionar CRTL + ALT + S para ver el explorador de base de datos

2.

Agregamos una nueva conexin.

3.

Asigne la siguiente configuracin.

4.

Agregar una nueva tabla.

Nombre campo
IDDepartamento
Nombre
Descripcion

Tipo de dato
Int
nvarchar(50)
nvarchar(1000)

Otras propiedades
Primary Key y columna Entity
No acepta nulos
Acepta nulos

5.

Grabar la tabla y asignar como nombre de la tabla: departamento.

6.

Ahora agregamos algunos datos.

Si desea regenerar los valores de la llave primaria ejecutar

USE clothingstore
TRUNCATE TABLE departamento
Creando procedimientos almacenados
1.

En el explorador de servidor, agregar un procedimiento almacenado denominado obtenDepartamento

2.

Ejecutar el procedimiento almacenado para comprobar los resultados.

Si no aparece la ventana de salida, presione CTRL +ALT +O

3.

Guardar el procedimiento almacenado.

Escribiendo el cdigo de la capa de reglas de negocio

Lleg el momento de actualizar su solucin ClothingStore con algunos nuevos fragmentos de cdigo adems de
aplicar el cdigo de acceso a datos. Vamos a aadir las siguientes clases de C # a su aplicacin:

AccesoGenericoADatos contiene el cdigo de acceso a base de datos genrica, la implementacin de

control de errores bsica y funcionalidad de registro.

AccesoCatalogo contiene la lgica de negocio catlogo de productos.

ConfiguracionClothingStore ofrece fcil acceso a diversas opciones de configuracin (que se leen

generalmente de web.config), tales como la cadena de conexin de base de datos, y as sucesivamente.

Siga los pasos del ejercicio para agregar estas clases para su proyecto.
1. Abra el web.config y actualice con el siguiente cdigo

2. Agregar una clase al proyecto denominada: ConfiguracionClothingStore.cs dentro de la carpeta

app_code.

3. Agregar una nueva clase dentro de la misma carpeta con el nombre AccesoGenericoADatos.cs

4. Agregar una nueva clase dentro de la misma carpeta con el nombre AccesoCatalogo.cs

Mostrando las lista de departamentos

Preparando los campos: temas skin y estilos
Preparar estilos
1.

Agregar una carpeta Theme de ASP.NET denominada ClothingStoreDefault

2.

En esta carpeta agregar una hoja de estilo

3.

Codificar los estilos

4.

Por ltimo, modifique el web.config para permitir que sea el tema por defecto:

Construyendo un generador de enlaces

1.

Agregamos una clase denominada Link.cs en la carpeta App_Code

Mostrando los departamentos

Ahora todo est en su lugar, la nica parte que falta es el propio control de
usuario ListaDepartamentos. Vamos a crear una carpeta con el nombre
ControlUsuario que contendr este control de usuario.
Este control de usuario contendr un control DataList que genera la lista de
departamentos.
1.

Crear una carpeta ControlUsuario

2.

Agregar un control de usuario ListaDepartamentos.ascx, asegurarse de

seleccionar el check Ubicar el cdigo en un archivo separado al
momento de agregar dicho control.

3.

Cambie ListaDepartamentos.ascx a la vista Diseo. Asegrese de que

la caja de herramientas es visible (Ctrl + Alt + X), abra la ficha Datos y
haga doble clic en la entrada DataList. Esto agregar un control
DataList a ListaDepartamentos.ascx.

4.

Asigne las siguientes propiedades.

Nombre de propiedad
(ID)
cssClass
HeaderStyle-CssClass
5.

Valor
lista
ListaDepartamentos
EncabezadoListDepartam

Abrir ListaDepartamentos.ascx en la vista Diseo, haga clic en el control

DataList, y seleccione Editar plantilla Plantilla: Encabezado y pie de
pgina.

6.

Escriba: Seleccione un
Departamento

en

la

plantilla de cabecera.
7.

Haga clic derecho en el

DataList

Editar

seleccione
Plantilla:

Plantillas de elementos.
8.

Arrastre un control
HyperLink desde la ficha
estndar de la caja de
herramientas para la
plantilla de elementos.

9.

Establezca la propiedad Text del HyperLink en una cadena vaca.

10.

Cambiar a la vista de cdigo, donde ser necesario hacer algunos cambios en el control de HyperLink,
como se muestra en el siguiente fragmento de cdigo del control DataList. Tenga en cuenta que en su
caso, el orden de los elementos del control DataList puede ser diferente.

11.
Ahora abre el archivo de cdigo subyacente del control de usuario (ListaDepartamentos.ascx.cs) y
modificar la funcin de controlador de eventos Page_Load como esto:

12.

Abrir ClothingStore.Master en la vista Diseo. Arrastre ListaDepartamentos.ascx desde el Explorador de

soluciones y colquelo cerca de la "Lista de departamentos" texto. Eliminar el texto de la celda, de modo
que slo el control de usuario se ubique all, como se muestra en la figura.

13.

Termina el ejercicio creando Catalogo.aspx, la pgina de la que hace referencia en los enlaces de la lista
departamentos, asegrese de que ambas casillas de verificacin de Ubicar cdigo en archivo separado
y Seleccione Master Page estn marcadas, y haga clic en Agregar. Cuando se le pregunt por un
archivo de pgina maestra, elija ClothingStore.master.

14.

Abra Catalogo.aspx en vista de cdigo cambie su ttulo a Catlogo: ClothingStore as:

15.

Ejecute el proyecto y seleccione cada uno de los departamentos