Carrito de Compras I

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 Ac eptar.

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 par a 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

ShoppingCartViewModel

y

a utiliza

la

plantilla de Vista List  utilizando el mismo método que antes.

24