Parte 1: Información general y Proyecto nuevo de archivos>

por Jon Galloway

MVC Music Store es una aplicación de tutorial que presenta y explica paso a paso cómo usar ASP.NET MVC y Visual Studio para el desarrollo web.

MVC Music Store es una implementación ligera de la tienda de muestras que vende álbumes de música en línea e implementa la administración básica del sitio, el inicio de sesión de usuario y la funcionalidad del carro de la compra.

En esta serie de tutoriales se detallan todos los pasos realizados para compilar la aplicación de ejemplo ASP.NET MVC Music Store. La parte 1 trata información general y proyecto nuevo de archivos>.

Información general

MVC Music Store es una aplicación de tutorial que presenta y explica paso a paso cómo usar ASP.NET MVC y Visual Web Developer para el desarrollo web. Comenzaremos lentamente, por lo que la experiencia de desarrollo web de nivel principiante está bien.

La aplicación que vamos a compilar es una tienda de música simple. Hay tres partes principales de la aplicación: compras, desprotección y administración.

Captura de pantalla del menú de información general de A S P dot Net Music Store, con opciones para seleccionar un género o en las selecciones principales.

Los visitantes pueden examinar álbumes por género:

Captura de pantalla del menú de selecciones de álbumes de género de la tienda de música A S P dot Net que muestra la colección de álbumes en un género determinado.

Pueden ver un solo álbum y agregarlo a su carro:

Captura de pantalla de la ventana de selección del álbum, en la que se muestra el nombre, el género, el artista y el precio del álbum, con una opción para agregar al carro.

Pueden revisar su carro, quitando los elementos que ya no quieren:

Captura de pantalla del menú

Al continuar con la compra, se les pedirá que inicien sesión o se registren en una cuenta de usuario.

Captura de pantalla de la barra de menús Iniciar sesión, que solicita al usuario que escriba un nombre de usuario y una contraseña, además de la opción para hacer clic en un botón

Captura de pantalla de la barra de menús Crear nueva cuenta, que solicita un nombre de usuario, una dirección de correo electrónico y una contraseña que contiene seis o más caracteres. El botón Registrar se encuentra en la parte inferior de la pantalla.

Después de crear una cuenta, pueden completar el pedido rellenando la información de envío y pago. Para simplificar las cosas, estamos ejecutando una promoción increíble: todo es gratis si entran en el código de promoción "GRATIS"!

Captura de pantalla que muestra las opciones de entrada para la información de envío y pago del comprador, con un marcador de posición para introducir códigos de promoción.

Después de ordenar, ven una pantalla de confirmación simple:

Captura de pantalla de la pantalla de confirmación que agradece al cliente su pedido y proporciona el número de pedido.

Además de las páginas orientadas al cliente, también crearemos una sección de administrador que muestra una lista de álbumes a partir de los cuales los administradores pueden crear, editar y eliminar álbumes:

Captura de pantalla del menú de la sección administrador que muestra una lista de títulos, artistas y géneros de los álbumes de propiedad; con las opciones para editar o eliminar cada una.

1. Archivo -> Nuevo proyecto

Instalación del software

Este tutorial comenzará creando un nuevo proyecto de ASP.NET MVC 3 con visual Web Developer 2010 Express gratuito (que es gratuito) y, a continuación, agregaremos características incrementalmente para crear una aplicación funcional completa. A lo largo del proceso, trataremos el acceso a la base de datos, los escenarios de publicación de formularios, la validación de datos, el uso de páginas maestras para el diseño de página coherente, el uso de AJAX para las actualizaciones de páginas y la validación, el inicio de sesión de usuario, etc.

Puedes seguir paso a paso o descargar la aplicación completada desde MVC-Music-Store.

Puede usar Visual Studio 2010 SP1 o Visual Web Developer 2010 Express SP1 (una versión gratuita de Visual Studio 2010) para compilar la aplicación. Usaremos el SQL Server Compact (también gratuito) para hospedar la base de datos. Antes de empezar, asegúrese de que ha instalado los requisitos previos que se enumeran a continuación.

  • [Requisitos previos de Visual Studio Web Developer Express SP1]
  • [actualización de herramientas de MVC 3 de ASP.NET]
  • [SQL Server Compact 4.0] : incluye compatibilidad con el entorno de ejecución y las herramientas.

Creación de un nuevo proyecto de ASP.NET MVC 3

Comenzaremos seleccionando "Nuevo proyecto" en el menú Archivo en Visual Web Developer. Se abrirá el cuadro de diálogo Nuevo proyecto.

Captura de pantalla del menú del archivo Visual Web Developer que muestra los comandos de teclado de selección y recorte corto para crear un nuevo proyecto.

Seleccionaremos el grupo Visual C# -> Plantillas web a la izquierda y, a continuación, elegiremos la plantilla "Aplicación web de MVC 3 ASP.NET" en la columna central. Asigne al proyecto el nombre MvcMusicStore y presione el botón Aceptar.

Captura de pantalla del menú de la ventana Cuadro de diálogo Nuevo proyecto, que proporciona diferentes plantillas de opción de aplicación.

Se mostrará un cuadro de diálogo secundario que nos permite realizar algunas configuraciones específicas de MVC para nuestro proyecto. Seleccione lo siguiente:

Plantilla de proyecto: seleccione Vacía.

Ver motor: seleccione Razor.

Uso del marcado semántico HTML5: activado

Compruebe que la configuración es como se muestra a continuación y, a continuación, presione el botón Aceptar.

Captura de pantalla de un cuadro de diálogo secundario, lo que permite al usuario seleccionar diferentes configuraciones para su proyecto.

Esto creará nuestro proyecto. Echemos un vistazo a las carpetas que se han agregado a nuestra aplicación en el Explorador de soluciones del lado derecho.

Captura de pantalla de la ventana Explorador de soluciones, después de la creación del proyecto, que muestra una lista de las carpetas que se han agregado a la aplicación.

La plantilla Empty MVC 3 no está completamente vacía: agrega una estructura de carpetas básica:

Vista de captura de pantalla ampliada de la lista de carpetas mencionadas anteriormente, resaltando el nombre del proyecto que se creó.

ASP.NET MVC usa algunas convenciones de nomenclatura básicas para los nombres de carpeta:

Carpeta Propósito
/Controladores Los controladores responden a la entrada desde el explorador, deciden qué hacer con él y devuelven respuesta al usuario.
/Vistas Las vistas contienen nuestras plantillas de interfaz de usuario
/Modelos Los modelos contienen y manipulan datos
/Contenido Esta carpeta contiene nuestras imágenes, CSS y cualquier otro contenido estático.
/Scripts Esta carpeta contiene nuestros archivos de JavaScript.

Estas carpetas se incluyen incluso en una aplicación vacía de ASP.NET MVC porque el marco de ASP.NET MVC usa de forma predeterminada un enfoque de "convención sobre la configuración" y realiza algunas suposiciones predeterminadas basadas en convenciones de nomenclatura de carpetas. Por ejemplo, los controladores buscan vistas en la carpeta Vistas de forma predeterminada sin tener que especificarlo explícitamente en el código. El cumplimiento de las convenciones predeterminadas reduce la cantidad de código que necesita escribir y también puede facilitar a otros desarrolladores comprender el proyecto. Explicaremos estas convenciones más a medida que compilamos nuestra aplicación.