CIBERTEC 2015

CARRITO DE COMPRAS - I
Antes de empezar el laboratorio deber crear la Base de Datos MvcMusicStore en su Servidor de
SQL SERVER, el docente proveer el Script para la creacin de la BD.

1. Iniciar Visual Studio 2013

2. Vamos a usar el lenguaje C# con la plantilla Web y el tipo de proyecto Aplicacin web de
ASP.NET MVC 4, como nombre de proyecto MvcMusicStore y una ubicacin donde se
guardar el proyecto, finalmente damos Aceptar.

1
CIBERTEC 2015

3. En la opcin de seleccionar plantilla de MVC, elegimos la opcin Aplicacin Bsico, como

motor de vista Razor y damos clic en Aceptar

2
CIBERTEC 2015

PD.- El nombre deber ser: MvcMusicStoreDB

3
CIBERTEC 2015

4
CIBERTEC 2015

5
CIBERTEC 2015

6
CIBERTEC 2015

Crear un controlador Home (Vaciar Controlador) y crearle su respectiva Vista.

7
CIBERTEC 2015

Actualizar el contenido de la carpeta Content y reemplazar los archivos por los proporcionados por
el Docente.

8
CIBERTEC 2015

Dirigirse al Archivo: _Layout.cshtml

Modificaremos el layout agregar el segmento de cdigo resaltado:

Agregar un controlador llamado Store.

9
CIBERTEC 2015

Agregar las referencias a la carpeta Models y escribir las siguientes acciones:

10
CIBERTEC 2015

Ahora procederemos a crear las Vistas para cada accin segn el siguiente modelo.

11
CIBERTEC 2015

Index:

RAZOR:

12
CIBERTEC 2015

Browse:

RAZOR:

13
CIBERTEC 2015

Details:

RAZOR:

14
CIBERTEC 2015

Ejecucin del Proyecto:

Al seleccionar un Gnero se mostrarn los datos relacionados:

Al seleccionar un Disco o Albm se mostrar el detalle y se consultar al usuario si se desea

agregarlo al carrito.

MANTENIMIENTO DE DATOS
Ahora crearemos un controlador llamado StoreManager que nos permitir darle mantenimiento a
los Albumes.

15
CIBERTEC 2015

Modificar la Vista
Index: (Eliminar lo
resaltado)

16
CIBERTEC 2015

Ahora agregar en la carpeta Models una clase llamada: ShoppingCart

Escribir los siguiente mtodos :

17
CIBERTEC 2015

18
CIBERTEC 2015

19
CIBERTEC 2015

ViewModels

Crearemos dos View Models para uso en nuestro controlador ShoppingCart: la

ShoppingCartViewModel tendr el contenido del carrito de la compra del usuario, y el
ShoppingCartRemoveViewModel sern utilizados para mostrar la informacin de confirmacin
cuando un usuario quita algo de su compra.

20
CIBERTEC 2015

Vamos a crear una nueva carpeta ViewModels en la raz de nuestro proyecto para mantener las
cosas organizadas.

Agregar un nuevo folder llamado ViewModels

Ahora agregar la clase : ShoppingCartViewModel.

21
CIBERTEC 2015

Ahora agregar la clase: ShoppingCartRemoveViewModel

El controlador ShoppingCart

El controlador ShoppingCart tiene tres objetivos principales: la adicin de elementos a un carrito

de compras, la eliminacin de los artculos en el carro, y la visualizacin de los elementos en el
carrito. Se har uso de las tres clases que acabamos de crear: ShoppingCartViewModel,
ShoppingCartRemoveViewModel y ShoppingCart. Como en el StoreController y
StoreManagerController, vamos a aadir un campo para contener una instancia de
MusicStoreEntities.

22
CIBERTEC 2015

23
CIBERTEC 2015

Actualizaciones con Ajax y JQuery

Ahora crearemos una Vista Index que est

fuertemente tipada a
ShoppingCartViewModel y utiliza la
plantilla de Vista List utilizando el mismo
mtodo que antes.

24