CASO DE ESTUDIO TIENDA MUSICAL

M. en I. DAVID HUMBERTO JIMNEZ Desarrollo de Aplicaciones con el Patrn de Diseos MVC

UNIDAD III. DESARROLLO WEB

Caso Tienda Musical

La aplicacin que vamos a construir es una tienda de msica simple. Hay tres partes principales de la aplicacin: ir de compras, pago y administracin. CARACTERISTICAS DEL SITIO Los visitantes pueden navegar lbumes de Gnero. Pueden ver un solo lbum y agregarlo a su carro. Ellos pueden revisar su carro, la eliminacin de cualquier elemento que ya no quieren. Procediendo a la comprobacin Dar lugar para registrarse o para obtener una cuenta de usuario.

Despus de crear una cuenta, pueden completar el pedido llenando el pago y envo de informacin. Para mantener las cosas simples, vamos a crear una promocin espectacular: todo es gratis si se introduzca el cdigo de promocin "GRATIS"! La pgina de Administracin muestra una lista de los lbunes de la cual los administradores pueden crear, editar y eliminar lbumes:

Aspectos Generales
Empezaremos creando un nuevo ASP.NET MVC del proyecto en Visual Studio 2010, y de forma incremental a aadir caractersticas para crear una aplicacin de funcionamiento completo. En el camino, vamos a cubrir: el acceso de base de datos, la lista de puntos de vista y detalles, los datos de actualizar las pginas, validacin de datos, utilizando pginas maestras para el diseo de la pgina coherente, AJAX para actualizar la pgina y la validacin, la pertenencia del usuario, y mucho ms.

Modelo Vista - Controlador

Es un patrn de diseo, estilo de arquitectura de software que separa los datos de una aplicacin. Es utilizado para crear paginas webs profesionales con una buena organizacin de nuestra informacin a visualizar trabajando junto con la arquitectura de la informacin. Es de mucha utilidad para los desarrolladores ya que no se tendran que crear pginas por pginas para terminar un proyecto. El MVC beneficia tanto el desarrollador y el usuario final.

MVC es un patrn de diseo que se divide en tres partes.

Controlador, Vista, Modelo, junto con estos tres elementos se forma el famoso MVC para administrar pginas web. Modelo: datos y reglas de negocio Vista: muestra la informacin del modelo al usuario Controlador: gestiona las entradas del usuario

Como opera el MVC

Fundamentos de MVC en Visual Studio 2010

Carpeta / Controladores / Vistas / Modelos / Contenido / Scripts / App_Data Propsito Controladores que responden a las entradas desde el navegador, decidir qu hacer con ella, y la respuesta de vuelta al usuario. Vistas mantener nuestra interfaz de usuario de plantillas Modelos de poseer y manipular los datos Esta carpeta contiene nuestras imgenes, CSS, y cualquier otro contenido esttico Esta carpeta contiene nuestros archivos JavaScript Esta carpeta contiene los archivos de datos que pueden ser ledos y actualizados por la aplicacin

DESARROLLO DE LA APLICACIN WEB

Visual C# (MVC)

Crearemos un nuevo Proyecto

Seleccionamos el Patrn MVC en blanco

Un vistazo a la aplicacin

CONTROLADOR

Diseado los controladores

Comenzamos con una prueba bsica de algunos controladores que usaremos. Nuestro sitio se inici con una pgina principal, as que vamos a aadir un controlador para manejar la pgina principal del sitio. Vamos a seguir la convencin y lo llaman HomeController.

Creando El HomeController.

Cambie el Nombre del Nuevo controlador

Para empezar lo ms sencillo posible, vamos a sustituirlo con un mtodo simple que slo devuelve una cadena. Vamos a hacer dos cambios simples: Cambiar el mtodo para devolver una cadena en lugar de un ActionResult Cambie la instruccin de retorno para regresar " PAGINA PRINCIPAL DE NUESTRA APLICACIN WEB "

Cambie el cdigo por lo siguiente:

public string Index() { return PAGINA PRINCIPAL DE NUESTRA APLICACIN WEB, EN MVC"; }

Ejecutar Aplicacin. (F5)

Ahora vamos a configurar un controlador para nuestra tienda. La tienda tiene tres niveles: El ndice de listas de los gneros de la tienda. La pgina Examinar, muestra las listas de todos los lbumes en un gnero La pgina Detalles muestra la informacin de un lbum especfico

Creando otro Controlador

Vamos a empezar por agregar una nueva StoreController, al igual que hemos creado la HomeController.

Configurando el Controlador StoreController

Cuando se ponga el nuevo controlador habr un mtodo ndice. Tambin deber aadir mtodos para manejar las dos otras pginas en la tienda: Examinar, y Detalles. Estos mtodos llaman a las acciones del controlador, y como ya hemos visto con el ndice de HomeController () del controlador de accin, su trabajo consiste en responder a las peticiones de URL y (en general) poner el contenido en una pgina.

Vamos a empezar por cambiar el mtodo para volver StoreController.Index la cadena "Hola desde Store.Index ()" y aadiremos los mismos mtodos para Examinar y Detalles:

Ejecutar
Checarlo con las siguientes direcciones. ESCRIBE EN LA URL /tienda/Browser /tienda/Details /tienda

Aunque estos son slo simples cadenas. Vamos a hacerlos dinmicos, por lo que tomaremos la informacin de la URL y mostraremos los resultados de la pgina. En primer lugar vamos a cambiar la accin en Detalles para leer y mostrar un parmetro de entrada, que es el nombre de identificacin. Quedando asi:

ejemplo

Ejecutarlo con: store/details/5 Observar que le pasamos un valor por la URL, en este caso el 5, pero pueden probar con cualquier Numero.

Eso fue especialmente fcil porque la identificacin es un caso especial. ASP.NET MVC utiliza un sistema llamado de enrutamiento a los valores de URL con los parmetros de accin del controlador, y que incluye por defecto una "ruta" con un parmetro de identificacin ya establecidos en todos los nuevos proyectos. Eso es configurable, y veremos que ms tarde.

Tambin se puede leer los valores de la cadena de consulta desde una direccin URL sin cambios de enrutamiento. Vamos a modificar la accin de la vista y pasar como parmetro la bsqueda del Gnero:

Ejecutarlo con: Tienda/Browser?genero=Banda Es parecido al ejemplo anterior pero aqu le mandamos una cadena a la URL y esta la puede consultar

Resumen
Vamos a recapitular lo que hemos hecho hasta ahora: Hemos creado un nuevo proyecto en Visual Studio Hemos completado el panorama de la estructura bsica de carpetas de una aplicacin ASP.NET MVC Hemos aprendido cmo manejar nuestro sitio web utilizando el servidor de desarrollo ASP.NET Hemos creado dos controladores. El Controlador con cuatro acciones que respondan a las peticiones de URL y el texto vuelve al navegador

VISTA Y VISTAMODELO
MVC

Actividades que se van a desarrollar

Uso de MasterPage para elementos comunes del sitio. Colocando la plantilla de vistas.
Probar hasta este momento.

Usando el ModeloVista pasando informacin a nuestra Vista.

Agregar una pagina Maestra

Seleccionamos una pagina Maestra y le cambiamos de nombre

Agregamos el siguiente cdigo

Agregando una plantilla de la Vista

Regresamos al Home Controller y modificamos el cdigo para dejarlo como sigue.

Despus creamos una vista como se muestra

En el mismo cdigo de la anterior lamina, en Index le doy clic derecho para agregar la vista

Agregar el siguiente cdigo

Checar la creacin de la vista

Ejecutarlo con F5

Continuamos con la VistaModelo para Generar esta Pagina.