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 creación de la BD.

1. Iniciar Visual Studio 2013

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

1
CIBERTEC 2015

3. En la opción de seleccionar plantilla de MVC, elegimos la opción Aplicación Básico, 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 código 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 acción según el siguiente modelo.

11
CIBERTEC 2015

Index:

RAZOR:

12
CIBERTEC 2015

Browse:

RAZOR:

13
CIBERTEC 2015

Details:

RAZOR:

14
CIBERTEC 2015

Ejecución del Proyecto:

Al seleccionar un Género se mostrarán los datos relacionados:

Al seleccionar un Disco o Albúm 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 métodos :

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 serán utilizados para mostrar la información de confirmación
cuando un usuario quita algo de su compra.

20
CIBERTEC 2015

Vamos a crear una nueva carpeta ViewModels en la raíz 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 adición de elementos a un carrito

de compras, la eliminación de los artículos en el carro, y la visualización 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 añadir 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
método que antes.

24