Conceptos básicos de ASP.NET MVC 4
por el equipo de Web Camps
Descarga del kit de entrenamiento de Web Camps
Este laboratorio práctico se basa en MVC (Controlador de vista de modelos) Music Store, una aplicación de tutorial que presenta y explica paso a paso cómo usar ASP.NET MVC y Visual Studio. A lo largo del laboratorio, aprenderá la simplicidad, pero el poder de usar estas tecnologías conjuntamente. Comenzará con una aplicación sencilla y la compilará hasta que tenga una aplicación web ASP.NET MVC 4 totalmente funcional.
Este laboratorio funciona con ASP.NET MVC 4.
Si quiere explorar la versión para ASP.NET MVC 3 de la aplicación del tutorial, puede encontrarla en MVC-Music-Store.
En este laboratorio práctico se supone que el desarrollador tiene experiencia en tecnologías de desarrollo web, como HTML y JavaScript.
Nota:
Todos los fragmentos de código y el código de ejemplo se incluyen en el Kit de entrenamiento de Web Camps, disponible en Versiones de Microsoft-Web/WebCampTrainingKit. El proyecto específico de este laboratorio está disponible en Aspectos básicos de ASP.NET MVC 4.
La aplicación Music Store
La aplicación web Music Store que se compilará a lo largo de este laboratorio consta de tres partes principales: compras, finalización de la compra y administración. Los visitantes podrán examinar álbumes por género, añadir álbumes a su carro, revisar su selección y, finalmente, continuar con la finalización de la compra para iniciar sesión y completar el pedido. Además, los administradores de la tienda podrán administrar los álbumes disponibles, así como sus propiedades principales.
Pantallas de Music Store
Aspectos básicos de ASP.NET MVC 4
La aplicación Music Store se compilará mediante Modelo-Vista-Controlador (MVC), un patrón arquitectónico que separa una aplicación en tres componentes principales:
- Modelos: los objetos de modelo son las partes de la aplicación que implementan la lógica del dominio. A menudo, los objetos de modelo recuperan y almacenan el estado del modelo en una base de datos.
- Vistas: las vistas son los componentes que muestra la interfaz de usuario (IU) de la aplicación. Normalmente, esta interfaz de usuario se crea a partir de los datos del modelo. Un ejemplo sería la vista de edición de Albums que muestra cuadros de texto y una lista desplegable basada en el estado actual de un objeto Album.
- Controladores: los controladores son los componentes que controlan la interacción del usuario, manipulan el modelo y, en última instancia, seleccionan una vista para representar la interfaz de usuario. En una aplicación de MVC, la vista solo muestra información; el controlador controla y responde a la interacción y los datos que introducen los usuarios.
El patrón MVC le ayuda a crear aplicaciones que separan los diferentes aspectos de la aplicación (lógica de entrada, lógica de negocios y lógica de la interfaz de usuario), a la vez que proporciona un acoplamiento flexible entre estos elementos. Esta separación le ayuda a administrar la complejidad cuando se compila una aplicación, ya que le permite centrarse en un único aspecto de la implementación en cada momento. Además, el patrón MVC facilita la prueba de aplicaciones, lo que también fomenta el uso del desarrollo controlado por pruebas (TDD) para crear aplicaciones.
El marco ASP.NET MVC proporciona una alternativa al patrón ASP.NET Web Forms para crear aplicaciones web basadas en ASP.NET MVC. El marco ASP.NET MVC es un marco de presentación ligero y muy fácil de probar que (como las aplicaciones basadas en Web Forms) se integra con las características de ASP.NET existentes,como páginas maestras y la autenticación basada en pertenencia, para que obtenga toda la potencia del marco .NET principal. Esto es útil si ya está familiarizado con ASP.NET Web Forms porque todas las bibliotecas que ya usa también están disponibles en ASP.NET MVC 4.
Además, el acoplamiento flexible entre los tres componentes principales de una aplicación MVC también favorece el desarrollo en paralelo. Por ejemplo, un desarrollador de software puede trabajar en la vista, un segundo puede ocuparse de la lógica del controlador y un tercero se puede centrar en la lógica de negocios del modelo.
Objetivos
En este laboratorio práctico, aprenderá a:
- Crear una aplicación ASP.NET MVC desde cero basada en el tutorial Aplicación music store
- Agregar controladores para controlar las direcciones URL a la página principal del sitio y para examinar su funcionalidad principal
- Agregar una vista para personalizar el contenido mostrado junto con su estilo
- Agregar clases de modelo para contener y administrar datos y lógica de dominio
- Usar el modelo de vista para pasar información de las acciones del controlador a las plantillas de vista
- Explorar la nueva plantilla de ASP.NET MVC 4 para aplicaciones de Internet
Requisitos previos
Debe tener los siguientes elementos para completar este laboratorio:
- Visual Studio 2012 Express para Web (lea el Apéndice A para obtener instrucciones sobre cómo instalarlo)
Configuración
Instalación de fragmentos de código
Para mayor comodidad, gran parte del código que va a administrar a lo largo de este laboratorio está disponible como fragmentos de código de Visual Studio. Para instalar los fragmentos de código, ejecute el archivo .\Source\Setup\CodeSnippets.vsi.
Si no tiene experiencia con los fragmentos de código de Visual Studio y quiere obtener información sobre cómo usarlos, puede consultar el apéndice de este documento "Apéndice C: Uso de fragmentos de código".
Ejercicios
Este laboratorio práctico está compuesto por los siguientes ejercicios:
- Ejercicio 1: Creación del proyecto de aplicación web ASP.NET MVC MusicStore
- Ejercicio 2: Creación de un controlador
- Ejercicio 3: Transferencia de parámetros a un controlador
- Ejercicio 4: Creación de una vista
- Ejercicio 5: Creación de un modelo de vista
- Ejercicio 6: Uso de parámetros en la vista
- Ejercicio 7: Recorrido por la plantilla nueva de ASP.NET MVC 4
Nota:
Cada ejercicio va acompañado de una carpeta End que contiene la solución resultante que debe obtener después de completar los ejercicios. Puede usar esta solución como guía si necesita ayuda adicional para trabajar con los ejercicios.
Tiempo estimado para completar este laboratorio: 60 minutos.
Ejercicio 1: Creación del proyecto de aplicación web ASP.NET MVC MusicStore
En este ejercicio, aprenderá a crear una aplicación ASP.NET MVC en Visual Studio 2012 Express para Web, así como su organización de carpetas principal. Además, aprenderá a agregar un nuevo controlador y a mostrar una cadena simple en la página principal de la aplicación.
Tarea 1: Creación del proyecto de aplicación web ASP.NET MVC
En esta tarea, creará un proyecto de aplicación ASP.NET MVC vacío mediante la plantilla MVC de Visual Studio. Inicie VS Express para Web.
En el menú Archivo, haga clic en Nuevo proyecto.
En el cuadro de diálogo Nuevo proyecto, seleccione el tipo de proyecto Aplicación web ASP.NET MVC 4, que se encuentra en la lista de plantillas Visual C#,Web.
Cambie el Nombre a MvcMusicStore.
Establezca la ubicación de la solución dentro de una nueva carpeta Begin en la carpeta Source de este ejercicio, por ejemplo [RUTA-DE-HOL]\Source\Ex01-CreatingMusicStoreProject\Begin. Haga clic en OK.
Cuadro de diálogo Crear nuevo proyecto
En el cuadro de diálogo Nuevo proyecto de ASP.NET MVC 4, seleccione la plantilla Básico y asegúrese de que el Motor de vistas seleccionado es Razor. Haga clic en OK.
Cuadro de diálogo Nuevo proyecto de ASP.NET MVC 4
Tarea 2: Exploración de la estructura de la solución
El marco ASP.NET MVC incluye una plantilla de proyecto de Visual Studio que le ayuda a crear aplicaciones web que admiten el modelo MVC. Esta plantilla crea una aplicación web ASP.NET MVC con las carpetas, plantillas de elementos y entradas de archivo de configuración necesarias.
En esta tarea, examinará la estructura de la solución para comprender los elementos implicados y sus relaciones. Las carpetas siguientes se incluyen en todas las aplicaciones ASP.NET MVC vacía porque el marco ASP.NET MVC usa de forma predeterminada un enfoque de "convención antes que configuración" y realiza algunas suposiciones predeterminadas basadas en convenciones de nomenclatura de carpetas.
Una vez que se cree el proyecto, revise la estructura de carpetas que se ha creado en el Explorador de soluciones del lado derecho:
Estructura de carpetas de ASP.NET MVC en el Explorador de soluciones
Controllers. Esta carpeta contendrá las clases de controlador. En una aplicación basada en MVC, los controladores son responsables de controlar la interacción del usuario final, manipular el modelo y, en última instancia, elegir una vista para representar la interfaz de usuario.
Nota:
En el marco MVC es necesario que los nombres de todos los controladores terminen con "Controller", como HomeController, LoginController o ProductController.
Models. Esta carpeta se proporciona para las clases que representan el modelo de aplicaciones de la aplicación web de MVC. Suele incluir código que define objetos y la lógica para interactuar con el almacén de datos. Normalmente, los objetos del modelo real estarán en bibliotecas de clases independientes. Pero al crear una aplicación, podría colocar las clases aquí y, después, moverlas a bibliotecas de clases independientes en un momento posterior del ciclo de desarrollo.
Vistas. Esta carpeta es la ubicación recomendada para las vistas, los componentes responsables de mostrar la interfaz de usuario de la aplicación. Las vistas usan archivos .aspx, .ascx, .cshtml y .master, además de cualquier otro archivo relacionado con la representación de vistas. La carpeta Views contiene una carpeta para cada controlador; el nombre de la carpeta es el prefijo del nombre del controlador. Por ejemplo, si tiene un controlador denominado HomeController, la carpeta Views contendrá una carpeta denominada Home. De forma predeterminada, cuando el marco ASP.NET MVC carga una vista, busca un archivo .aspx con el nombre de vista solicitado en la carpeta Views\nombreDelControlador (Views[nombreDelControlador][Action].aspx) o (Views[nombreDelControlador][Action].cshtml) para vistas de Razor.
Nota:
Además de las carpetas enumeradas anteriormente, una aplicación web de MVC usa el archivo Global.asax para establecer los valores predeterminados de enrutamiento de direcciones URL globales, y el archivo Web.config para configurar la aplicación.
Tarea 3: Adición de HomeController
En las aplicaciones ASP.NET que no utilizan el marco de MVC, la interacción con el usuario se organiza en torno a páginas y la generación y el control de eventos desde esas páginas. En cambio, la interacción del usuario con aplicaciones ASP.NET MVC se organiza en torno a controladores y sus métodos de acción.
Por otra parte, el marco ASP.NET MVC asigna direcciones URL a las clases a las que se hace referencia como controladores. Los controladores procesan las solicitudes entrantes, controlan la entrada y las interacciones del usuario, ejecutan la lógica de aplicación adecuada y determinan la respuesta que se devuelven al cliente (mostrar HTML, descargar un archivo, redirigir a otra dirección URL, etc.). Para mostrar código HTML, una clase de controlador llama normalmente a un componente de vista independiente para generar el marcado HTML para la solicitud. En una aplicación de MVC, la vista solo muestra información; el controlador controla y responde a la interacción y los datos que introducen los usuarios.
En esta tarea, agregará una clase Controller que controlará las direcciones URL a la página principal del sitio de Music Store.
Haga clic con el botón derecho en la carpeta Controllers dentro del Explorador de soluciones, seleccione Agregar y, después, el comando Controller:
Comando Add Controller
Se abre el cuadro de diálogo Agregar controlador. Asigne el nombre HomeController al controlador y presione el botón Agregar.
Cuadro de diálogo Agregar controlador
El archivo HomeController.cs se crea en la carpeta Controllers. Para que HomeController devuelva una cadena en su acción Index, reemplace el método Index por el código siguiente:
(Fragmento de código: Aspectos básicos de ASP.NET MVC 4: Ejemplo 1 HomeController)
public string Index() { return "Hello from Home"; }
Tarea 4: Ejecución de la aplicación
En esta tarea, probará la aplicación en un explorador web.
Presione F5 para ejecutar la aplicación. El proyecto se compila y se inicia el servidor web IIS local. El servidor web IIS local abrirá automáticamente un explorador web que apunte a la dirección URL del servidor web.
Aplicación en ejecución en un explorador web
Nota:
El servidor web IIS local ejecutará el sitio web en un número de puerto libre aleatorio. En la imagen anterior, el sitio se ejecuta en
http://localhost:50103/, por lo que usa el puerto 50103. El número de puerto puede variar.Cierre el explorador.
Ejercicio 2: Creación de un controlador
En este ejercicio, aprenderá a actualizar el controlador para implementar una funcionalidad sencilla de la aplicación Music Store. Ese controlador definirá métodos de acción para controlar cada una de las siguientes solicitudes específicas:
- Una página de descripción de los géneros de música en la tienda de música
- Una página de exploración que muestra todos los álbumes de música de un género determinado
- Una página de detalles que muestra información sobre un álbum de música específico
Para el ámbito de este ejercicio, por ahora esas acciones simplemente devolverán una cadena.
Tarea 1: Adición de una nueva clase StoreController
En esta tarea, agregará un nuevo controlador.
Si aún no está abierto, inicie VS Express para Web 2012.
En el menú Archivo, elija Abrir proyecto. En el cuadro de diálogo Abrir proyecto, vaya a Source\Ex02-CreatingAController\Begin, seleccione Begin.sln y haga clic en Abrir. Como alternativa, puede continuar con la solución que ha obtenido después de completar el ejercicio anterior.
Si ha abierto la solución Inicio proporcionada, deberá descargar algunos paquetes NuGet que faltan antes de continuar. Para ello, haga clic en el menú Proyecto y seleccione Administrar paquetes NuGet.
En el cuadro de diálogo Administrar paquetes NuGet, haga clic en Restaurar para descargar los paquetes que faltan.
Por último, para compilar la solución, haga clic en Compilar | Compilar solución.
Nota:
Una de las ventajas de usar NuGet es que no es necesario incluir todas las bibliotecas en el proyecto, lo que reduce su tamaño. Con NuGet Power Tools, si especifica las versiones del paquete en el archivo Packages.config, podrá descargar todas las bibliotecas necesarias la primera vez que ejecute el proyecto. Por este motivo tendrá que ejecutar estos pasos después de abrir una solución existente desde este laboratorio.
Agregue el nuevo controlador. Para ello, haga clic con el botón derecho en la carpeta Controllersen el Explorador de soluciones, seleccione Agregar y, después, el comando Controller. Cambie el Nombre del controlador a StoreController y haga clic en Agregar.
Cuadro de diálogo Agregar controlador
Tarea 2: Modificación de las acciones de StoreController
En esta tarea, modificará los métodos Controller que se denominan acciones. Las acciones son responsables de controlar las solicitudes de dirección URL y determinar el contenido que se debe devolver al explorador o al usuario que ha invocado la dirección URL.
La clase StoreController ya tiene un método Index. Lo usará más adelante en este laboratorio para implementar la página que enumera todos los géneros de la tienda de música. Por ahora, simplemente reemplace el método Index por el código siguiente, que devuelve una cadena "Hello from Store.Index()":
(Fragmento de código: Aspectos básicos de ASP.NET MVC 4: Ejemplo 2: índice de StoreController)
public string Index() { return "Hello from Store.Index()"; }Agregue los métodos Browse y Details. Para ello, agregue el siguiente código a StoreController:
(Fragmento de código: Aspectos básicos de ASP.NET MVC 4: Ejemplo 2: BrowseAndDetails de StoreController)
// GET: /Store/Browse public string Browse() { return "Hello from Store.Browse()"; } // GET: /Store/Details public string Details() { return "Hello from Store.Details()"; }
Tarea 3: Ejecución de la aplicación
En esta tarea, probará la aplicación en un explorador web.
Presione F5 para ejecutar la aplicación.
El proyecto se inicia en la página Principal. Cambie la dirección URL para comprobar la implementación de cada acción.
/Store. Verá "Hello from Store.Index()".
/Store/Browse. Verá "Hello from Store.Browse()".
/Store/Details. Verá "Hello from Store.Details()".
Examen de /Store/Browse
Cierre el explorador.
Ejercicio 3: Transferencia de parámetros a un controlador
Hasta ahora, se han devuelto cadenas constantes de los controladores. En este ejercicio aprenderá a pasar parámetros a un controlador mediante la dirección URL y la cadena de consulta y, después, hará que las acciones del método respondan con texto al explorador.
Tarea 1: Adición de un parámetro Genre a StoreController
En esta tarea, usará la cadena de consulta para enviar parámetros al método de acción Browse en StoreController.
Si aún no está abierto, inicie VS Express para Web.
En el menú Archivo, elija Abrir proyecto. En el cuadro de diálogo Abrir proyecto, vaya a Source\Ex03-PassingParametersToAController\Begin, seleccione Begin.sln y haga clic en Abrir. Como alternativa, puede continuar con la solución que ha obtenido después de completar el ejercicio anterior.
Si ha abierto la solución Inicio proporcionada, deberá descargar algunos paquetes NuGet que faltan antes de continuar. Para ello, haga clic en el menú Proyecto y seleccione Administrar paquetes NuGet.
En el cuadro de diálogo Administrar paquetes NuGet, haga clic en Restaurar para descargar los paquetes que faltan.
Por último, para compilar la solución, haga clic en Compilar | Compilar solución.
Nota:
Una de las ventajas de usar NuGet es que no es necesario incluir todas las bibliotecas en el proyecto, lo que reduce su tamaño. Con NuGet Power Tools, si especifica las versiones del paquete en el archivo Packages.config, podrá descargar todas las bibliotecas necesarias la primera vez que ejecute el proyecto. Por este motivo tendrá que ejecutar estos pasos después de abrir una solución existente desde este laboratorio.
Abra la clase StoreController. Para ello, en el Explorador de soluciones, expanda la carpeta Controllers y haga doble clic en StoreController.cs.
Cambie el método Browse y agregue un parámetro de cadena para solicitar un género específico. ASP.NET MVC pasará automáticamente los parámetros de cadena de consulta o publicación de formulario denominados genre al método de acción cuando se invoca. Para ello, reemplace el método Browse por el código siguiente:
(Fragmento de código: Aspectos básicos de ASP.NET MVC 4: Ejemplo 3 BrowseMethod de StoreController)
// GET: /Store/Browse?genre=Disco public string Browse(string genre) { string message = HttpUtility.HtmlEncode("Store.Browse, Genre = " + genre); return message; }
Nota:
Se usa el método de utilidad HttpUtility.HtmlEncode para evitar que los usuarios inserten Javascript en la vista con un vínculo como /Store/Browse?Genre=<script>window.location='http://hackersite.com'</script>.
Para más información, visite este artículo de MSDN.
Tarea 2: Ejecución de la aplicación
En esta tarea, probará la aplicación en un explorador web y usará el parámetro genre.
Presione F5 para ejecutar la aplicación.
El proyecto se inicia en la página Principal. Cambie la dirección URL a /Store/Browse?Genre=Disco para comprobar que la acción recibe el parámetro genre.
Browsing /Store/Browse?Genre=Disco
Cierre el explorador.
Tarea 3: Adición de un parámetro id insertado en la dirección URL
En esta tarea, usará la dirección URL para pasar un parámetro Id al método de acción Details del StoreController. La convención de enrutamiento predeterminada de ASP.NET MVC es tratar el segmento de una dirección URL después del nombre del método de acción como un parámetro denominado Id. Si el método de acción tiene un parámetro denominado Id, ASP.NET MVC le pasará automáticamente el segmento de dirección URL como parámetro. En la URL Store/Details/5, Id se interpretará como 5.
Cambie el método Details de StoreController y agregue un parámetro int denominado id. Para ello, reemplace el método Details por el código siguiente:
(Fragmento de código: Aspectos básicos de ASP.NET MVC 4: Ejemplo 3 DetailsMethod de StoreController)
// GET: /Store/Details/5 public string Details(int id) { string message = "Store.Details, ID = " + id; return message; }
Tarea 4: Ejecución de la aplicación
En esta tarea, probará la aplicación en un explorador web y usará el parámetro Id.
Presione F5 para ejecutar la aplicación.
El proyecto se inicia en la página Principal. Cambie la dirección URL a /Store/Details/5 para comprobar que la acción recibe el parámetro id.
Browsing /Store/Details/5
Ejercicio 4: Creación de una vista
Hasta ahora, solo se han devuelto cadenas de acciones de controlador. Aunque es una manera útil de comprender cómo funcionan los controladores, no es cómo se compilan las aplicaciones web reales. Las vistas son componentes que proporcionan un mejor enfoque para generar HTML en el explorador con el uso de archivos de plantilla.
En este ejercicio aprenderá a agregar una página maestra de diseño para configurar una plantilla para contenido HTML común, un elemento StyleSheet para mejorar la apariencia del sitio y, por último, una plantilla View para permitir que HomeController devuelva HTML.
Tarea 1: Modificación del archivo _layout.cshtml
El archivo ~/Views/Shared/_layout.cshtml permite configurar una plantilla para HTML común y usarla en todo el sitio web. En esta tarea, agregará una página maestra de diseño con un encabezado común con vínculos a la página principal y al área Store.
Si aún no está abierto, inicie VS Express para Web.
En el menú Archivo, elija Abrir proyecto. En el cuadro de diálogo Abrir proyecto, vaya a Source\Ex04-CreatingAView\Begin, seleccione Begin.sln y haga clic en Abrir. Como alternativa, puede continuar con la solución que ha obtenido después de completar el ejercicio anterior.
Si ha abierto la solución Inicio proporcionada, deberá descargar algunos paquetes NuGet que faltan antes de continuar. Para ello, haga clic en el menú Proyecto y seleccione Administrar paquetes NuGet.
En el cuadro de diálogo Administrar paquetes NuGet, haga clic en Restaurar para descargar los paquetes que faltan.
Por último, para compilar la solución, haga clic en Compilar | Compilar solución.
Nota:
Una de las ventajas de usar NuGet es que no es necesario incluir todas las bibliotecas en el proyecto, lo que reduce su tamaño. Con NuGet Power Tools, si especifica las versiones del paquete en el archivo Packages.config, podrá descargar todas las bibliotecas necesarias la primera vez que ejecute el proyecto. Por este motivo tendrá que ejecutar estos pasos después de abrir una solución existente desde este laboratorio.
El archivo _layout.cshtml contiene el diseño del contenedor HTML para todas las páginas del sitio. Incluye el elemento <html> para la respuesta HTML y los elementos<head> y <body>. @RenderBody() dentro del cuerpo HTML identifica las regiones que las plantillas de vista podrán rellenar con contenido dinámico. (C#)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> @RenderBody() @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) </body> </html>Agregue un encabezado común con vínculos a la página principal y al área Store en todas las páginas del sitio. Para ello, agregue el siguiente código debajo de la instrucción <body>. (C#)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <header> <div class="content-wrapper"> <div class="float-left"> <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p> </div> <div class="float-right"> <nav> <ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("Store", "Index", "Store")</li> </ul> </nav> </div> </div> </header> @RenderBody() @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) </body> </html>Incluya un elemento div para representar la sección del cuerpo de cada página. Reemplace @RenderBody() por el código resaltado siguiente: (C#)
... <body> <header> <div class="content-wrapper"> <div class="float-left"> <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p> </div> <div class="float-right"> <nav> <ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("Store", "Index", "Store")</li> </ul> </nav> </div> </div> </header> <div id="body"> @RenderSection("featured", required: false) <section class="content-wrapper main-content clear-fix"> @RenderBody() </section> </div> ... </body> </html>Nota:
¿Sabía que? Visual Studio 2012 tiene fragmentos de código que facilitan la adición de código usado habitualmente en HTML, archivos de código y mucho más. Para probarlo, escriba <div> y presione la tecla TAB dos veces para insertar una etiqueta div completa.
Tarea 2: Adición de una hoja de estilos CSS
La plantilla de proyecto vacía incluye un archivo CSS muy simplificado que solo incluye estilos usados para mostrar formularios básicos y mensajes de validación. Usará CSS e imágenes adicionales (posiblemente proporcionadas por un diseñador) para mejorar la apariencia del sitio.
En esta tarea, agregará una hoja de estilos CSS para definir los estilos del sitio.
El archivo CSS y las imágenes se incluyen en la carpeta Source\Assets\Content de este laboratorio. Para agregarlos a la aplicación, arrastre su contenido desde una ventana del Explorador de Windows al Explorador de soluciones en Visual Studio Express para Web, como se muestra a continuación:
Arrastre del contenido de estilo
Aparecerá un cuadro de diálogo de advertencia, en el que se solicita confirmación para reemplazar el archivo Site.css y algunas imágenes existentes. Active Aplicar a todos los elementos y haga clic en Sí.
Tarea 3: Adición de una plantilla de vista
En esta tarea, agregará una plantilla de vista para generar la respuesta HTML que usará la página maestra de diseño y el código CSS agregado en este ejercicio.
Para usar una plantilla View al examinar la página principal del sitio, primero deberá indicar que, en lugar de devolver una cadena, el método HomeController Index devolverá una vista. Abra la clase HomeController y cambie su método Index para devolver ActionResult y haga que devuelva View().
(Fragmento de código: Aspectos básicos de ASP.NET MVC 4: Ejemplo 4 índice de HomeController)
public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return this.View(); } }Ahora, debe agregar una plantilla de vista adecuada. Para ello, haga clic con el botón derecho en el método de acción Index y seleccione Agregar vista. Se abrirá el cuadro de diálogo Agregar vista.
Adición de una vista desde el método Index
Aparecerá el cuadro de diálogo Agregar vista para generar un archivo de plantilla de vista. De forma predeterminada, este cuadro de diálogo se rellena previamente con el nombre de la plantilla de vista para que coincida con el método de acción que la usará. Como ha usado el menú contextual Agregar vista dentro del método de acción Index dentro de HomeController, el cuadro de diálogo Agregar vista tiene Index como nombre de vista predeterminado. Haga clic en Agregar.
Cuadro de diálogo Agregar vista
Visual Studio genera una plantilla de vista Index.cshtml dentro de la carpeta Views\Home y después la abre.
Vista Home Index creada
Nota:
El nombre y la ubicación del archivo Index.cshtml es importante y sigue las convenciones de nomenclatura predeterminadas de ASP.NET MVC.
La carpeta \Views*Home* coincide con el nombre del controlador (Controlador Home). El nombre de la plantilla de vista (Index) coincide con el método de acción del controlador que mostrará la vista.
De este modo, ASP.NET MVC evita tener que especificar explícitamente el nombre o la ubicación de una plantilla de vista cuando se usa esta convención de nomenclatura para devolver una vista.
La plantilla de vista generada se basa en la plantilla _layout.cshtml definida anteriormente. Actualice la propiedad ViewBag.Title a Home y cambie el contenido principal a Esta es la página principal, como se muestra en el código siguiente:
@{ ViewBag.Title = "Home"; } <h2>This is the Home Page</h2>Seleccione el proyecto MvcMusicStore en el Explorador de soluciones y presione F5 para ejecutar la aplicación.
Tarea 4: Comprobación
Para comprobar que ha realizado correctamente todos los pasos del ejercicio anterior, continúe de la siguiente manera:
Con la aplicación abierta en un explorador, debe tener en cuenta que:
El método de acción Index de HomeController ha encontrado y mostrado la plantilla de vista \Views\Home\Index.cshtml, a pesar del código ha llamado a return View(), porque la plantilla de vista sigue la convención de nomenclatura estándar.
La página principal muestra el mensaje de bienvenida definido en la plantilla de vista \Views\Home\Index.cshtml.
La página principal usa la plantilla _layout.cshtml, por lo que el mensaje de bienvenida está incluido en el diseño HTML del sitio estándar.
Vista de índice principal con el diseño y el estilo definidos
Ejercicio 5: Creación de un modelo de vista
Hasta ahora, ha hecho que las vistas muestren HTML codificado de forma rígida, pero, para crear aplicaciones web dinámicas, la plantilla de vista debe recibir información del controlador. Una técnica común que se usará para ese propósito es el patrón ViewModel, que permite a un controlador empaquetar toda la información necesaria para generar la respuesta HTML adecuada.
En este ejercicio, aprenderá a crear una clase ViewModel y a agregar las propiedades necesarias: el número de géneros de la tienda y una lista de esos géneros. También actualizará StoreController para usar la instancia de ViewModel creada y, por último, creará una plantilla de vista que mostrará las propiedades mencionadas en la página.
Tarea 1: Creación de una clase ViewModel
En esta tarea, creará una clase ViewModel que implementará el escenario de lista de géneros de Store.
Si aún no está abierto, inicie VS Express para Web.
En el menú Archivo, elija Abrir proyecto. En el cuadro de diálogo Abrir proyecto, vaya a Source\Ex05-CreatingAViewModel\Begin, seleccione Begin.sln y haga clic en Abrir. Como alternativa, puede continuar con la solución que ha obtenido después de completar el ejercicio anterior.
Si ha abierto la solución Inicio proporcionada, deberá descargar algunos paquetes NuGet que faltan antes de continuar. Para ello, haga clic en el menú Proyecto y seleccione Administrar paquetes NuGet.
En el cuadro de diálogo Administrar paquetes NuGet, haga clic en Restaurar para descargar los paquetes que faltan.
Por último, para compilar la solución, haga clic en Compilar | Compilar solución.
Nota:
Una de las ventajas de usar NuGet es que no es necesario incluir todas las bibliotecas en el proyecto, lo que reduce su tamaño. Con NuGet Power Tools, si especifica las versiones del paquete en el archivo Packages.config, podrá descargar todas las bibliotecas necesarias la primera vez que ejecute el proyecto. Por este motivo tendrá que ejecutar estos pasos después de abrir una solución existente desde este laboratorio.
Cree una carpeta ViewModels para contener el modelo de vista. Para ello, haga clic con el botón derecho en el proyecto MvcMusicStore de nivel superior, seleccione Agregar y después Nueva carpeta.
Adición de una nueva carpeta
Asigna a la nueva carpeta el nombre ViewModels.
Carpeta ViewModels en el Explorador de soluciones
Cree una clase ViewModel. Para ello, haga clic con el botón derecho en la carpeta ViewModels creada recientemente, seleccione Agregar y después Nuevo elemento. En Código, elija el elemento Clase, asigne el nombre StoreIndexViewModel.cs al archivo y haga clic en Agregar.
Adición de una nueva clase
Creación de la clase StoreIndexViewModel
Tarea 2: Adición de propiedades a la clase ViewModel
Hay dos parámetros que se van a pasar desde StoreController a la plantilla View para generar la respuesta HTML esperada: el número de géneros en la tienda y una lista de esos géneros.
En esta tarea, agregará esas dos propiedades a la clase StoreIndexViewModel: NumberOfGenres (un entero) y Genres (una lista de cadenas).
Agregue las propiedades NumberOfGenres y Genres a la clase StoreIndexViewModel. Para ello, agregue las dos líneas siguientes a la definición de clase:
(Fragmento de código: Aspectos básicos de ASP.NET MVC 4: Ejemplo 5: propiedades de StoreIndexViewModel)
public class StoreIndexViewModel { public int NumberOfGenres { get; set; } public List<string> Genres { get; set; } }
Nota:
La notación { get; set; } usa la característica de propiedades implementadas automáticamente de C#. Proporciona las ventajas de una propiedad sin necesidad de declarar un campo de respaldo.
Tarea 3: Actualización de StoreController para usar StoreIndexViewModel
La clase StoreIndexViewModel encapsula la información necesaria para pasar del método Index de StoreController a una plantilla View para generar una respuesta.
En esta tarea, actualizará StoreController para usar StoreIndexViewModel.
Abra la clase StoreController.
Apertura de la clase StoreController
Para usar la clase StoreIndexViewModel desde StoreController, agregue el siguiente espacio de nombres en la parte superior del código de StoreController:
(Fragmento de código: Aspectos básicos de ASP.NET MVC 4: Ejemplo 5: StoreIndexViewModel con ViewModels)
using MvcMusicStore.ViewModels;Cambie el método de acción Index de StoreController para que cree y rellene un objeto StoreIndexViewModel y, después, páselo a una plantilla de vista para generar una respuesta HTML con él.
Nota:
En el laboratorio "Modelos y acceso a datos de ASP.NET MVC", escribirá código que recupera la lista de géneros de la tienda de una base de datos. En el código siguiente, creará un objeto List de géneros de datos ficticios que rellenarán StoreIndexViewModel.
Después de crear y configurar el objeto StoreIndexViewModel, se pasará como argumento al método View. Esto indica que la plantilla de vista usará ese objeto para generar una respuesta HTML con él.
Reemplace el método Index por el código siguiente:
(Fragmento de código: Aspectos básicos de ASP.NET MVC 4: Ejemplo 5: método Index de StoreController)
public ActionResult Index() { // Create a list of genres var genres = new List<string> {"Rock", "Jazz", "Country", "Pop", "Disco"}; // Create our view model var viewModel = new StoreIndexViewModel { NumberOfGenres = genres.Count(), Genres = genres }; return this.View(viewModel); }
Nota:
Si no tiene experiencia con C#, puede suponer que el uso de var significa que la variable viewModel está enlazada en tiempo de ejecución. Esto no es correcto: el compilador de C# usa inferencia de tipos en función de lo que asigne a la variable para determinar que viewModel es del tipo StoreIndexViewModel. Además, al compilar la variable viewModel local como un tipo StoreIndexViewModel, obtiene la comprobación en tiempo de compilación y la compatibilidad con el editor de código de Visual Studio.
Tarea 4: Creación de una plantilla de vista que use StoreIndexViewModel
En esta tarea, creará una plantilla de vista que usará un objeto StoreIndexViewModel pasado desde el controlador para mostrar una lista de géneros.
Antes de crear la plantilla de vista, debe compilar el proyecto para que el cuadro de diálogo Agregar vista conozca la clase StoreIndexViewModel. Para compilar el proyecto, seleccione el elemento de menú Compilar y, después, Compilar MvcMusicStore.
Compilación del proyecto
Cree una plantilla de vista. Para ello, haga clic con el botón derecho en el método Index y seleccione Agregar vista.
Agregar una vista
Como el cuadro de diálogo Agregar vista se ha invocado desde StoreController, agregará la plantilla de vista de forma predeterminada en un archivo \Views\Store\Index.cshtml. Active la casilla Crear una vista fuertemente tipada y, después, seleccione StoreIndexViewModel como clase Model. Además, asegúrese de que el motor de vistas seleccionado es Razor. Haga clic en Agregar.
Cuadro de diálogo Agregar vista
Se crea y abre el archivo de plantilla de vista \Views\Store\Index.cshtml. En función de la información proporcionada al cuadro de diálogo Agregar vista en el último paso, la plantilla de vista esperará una instancia de StoreIndexViewModel como los datos que se usarán para generar una respuesta HTML. Observará que la plantilla hereda un elemento
ViewPage<musicstore.viewmodels.storeindexviewmodel>en C#.
Tarea 5: Actualización de la plantilla de vista
En esta tarea, actualizará la plantilla de vista creada en la anterior para recuperar el número de géneros y sus nombres dentro de la página.
Nota:
Usará la sintaxis @ (a menudo denominada "nuggets de código") para ejecutar código dentro de la plantilla de vista.
- En el archivo Index.cshtml, dentro de la carpeta Store, reemplace su código por lo siguiente:
@model MvcMusicStore.ViewModels.StoreIndexViewModel
@{
ViewBag.Title = "Browse Genres";
}
<h2>Browse Genres</h2>
<p>Select from @Model.NumberOfGenres genres</p>
- Recorra en bucle la lista de géneros en StoreIndexViewModel y cree una lista <ul> de HTML mediante un bucle foreach. (C#)
@model MvcMusicStore.ViewModels.StoreIndexViewModel
@{
ViewBag.Title = "Browse Genres";
}
<h2>Browse Genres</h2>
<p>Select from @Model.NumberOfGenres genres</p>
<ul>
@foreach (string genreName in Model.Genres)
{
<li>
@genreName
</li>
}
</ul>
- Presione F5 para ejecutar la aplicación y navegar a /Store. Verás la lista de géneros pasados en el objeto StoreIndexViewModel de StoreController a la plantilla de vista.
Vista con una lista de géneros
- Cierre el explorador.
Ejercicio 6: Uso de parámetros en la vista
En el ejercicio 3 ha aprendido a pasar parámetros al controlador. En este ejercicio, aprenderá a usar esos parámetros en la plantilla de vista. Para ello, primero se presentarán las clases Model que le ayudarán a administrar los datos y la lógica de dominio. Además, aprenderá a crear vínculos a páginas dentro de la aplicación ASP.NET MVC sin preocuparse de aspectos como la codificación de rutas de dirección URL.
Tarea 1: Adición de clases de modelo
A diferencia de las instancias de ViewModel, que solo se crean para pasar información del controlador a la vista, las clases Model se compilan para contener y administrar datos y lógica de dominio. En esta tarea, agregará dos clases de modelo para representar estos conceptos: Genre y Album.
Si aún no está abierto, inicie VS Express para Web
En el menú Archivo, elija Abrir proyecto. En el cuadro de diálogo Abrir proyecto, vaya a Source\Ex06-UsingParametersInView\Begin, seleccione Begin.sln y haga clic en Abrir. Como alternativa, puede continuar con la solución que ha obtenido después de completar el ejercicio anterior.
Si ha abierto la solución Inicio proporcionada, deberá descargar algunos paquetes NuGet que faltan antes de continuar. Para ello, haga clic en el menú Proyecto y seleccione Administrar paquetes NuGet.
En el cuadro de diálogo Administrar paquetes NuGet, haga clic en Restaurar para descargar los paquetes que faltan.
Por último, para compilar la solución, haga clic en Compilar | Compilar solución.
Nota:
Una de las ventajas de usar NuGet es que no es necesario incluir todas las bibliotecas en el proyecto, lo que reduce su tamaño. Con NuGet Power Tools, si especifica las versiones del paquete en el archivo Packages.config, podrá descargar todas las bibliotecas necesarias la primera vez que ejecute el proyecto. Por este motivo tendrá que ejecutar estos pasos después de abrir una solución existente desde este laboratorio.
Agregue una clase de modelo Genre. Para ello, haga clic con el botón derecho en la carpeta Models en el Explorador de soluciones, seleccione Agregar y después la opción Nuevo elemento. En Código, elija el elemento Clase, asigne el nombre Genre.cs al archivo y, después, haga clic en Agregar.
Adición de un nuevo elemento
Adición de la clase de modelo Genre
Agregue una propiedad Name a la clase Genre. Para ello, agregue el siguiente código:
(Fragmento de código: Aspectos básicos de ASP.NET MVC 4: Ejemplo 6 Genre)
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcMusicStore.Models { public class Genre { public string Name { get; set; } } }Con el mismo procedimiento que antes, agregue una clase Album. Para ello, haga clic con el botón derecho en la carpeta Models en el Explorador de soluciones, seleccione Agregar y después la opción Nuevo elemento. En Código, elija el elemento Clase, asigne el nombre Album.cs al archivo y, después, haga clic en Agregar.
Agregue dos propiedades a la clase Album: Genre y Title. Para ello, agregue el siguiente código:
(Fragmento de código: Aspectos básicos de ASP.NET MVC 4: Ejemplo 6 Album)
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcMusicStore.Models { public class Album { public string Title { get; set; } public Genre Genre { get; set; } } }
Tarea 2: Adición de StoreBrowseViewModel
StoreBrowseViewModel se usará en esta tarea para mostrar los álbumes que coinciden con un género seleccionado. En esta tarea, creará esta clase y, después, agregará dos propiedades para controlar el género y la lista de su álbum.
Agregue una clase StoreBrowseViewModel. Para ello, haga clic con el botón derecho en la carpeta ViewModels en el Explorador de soluciones, seleccione Agregar y después la opción Nuevo elemento. En Código, elija el elemento Clase, asigne el nombre StoreBrowseViewModel.cs al archivo y haga clic en Agregar.
Agregue una referencia a la clase Models en StoreBrowseViewModel. Para ello, agregue el siguiente espacio de nombres using:
(Fragmento de código: Aspectos básicos de ASP.NET MVC 4: Ejemplo 6 UsingModel)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using MvcMusicStore.Models; namespace MvcMusicStore.ViewModels { public class StoreBrowseViewModel { } }Agregue dos propiedades a la clase StoreBrowseViewModel: Genre y Albums. Para ello, agregue el siguiente código:
(Fragmento de código: Aspectos básicos de ASP.NET MVC 4: Ejemplo 6 ModelProperties)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using MvcMusicStore.Models; namespace MvcMusicStore.ViewModels { public class StoreBrowseViewModel { public Genre Genre { get; set; } public List<Album> Albums { get; set; } } }
Nota:
¿Qué es List<Album>?: esta definición usa el tipo List<T>, donde T restringe el tipo al que pertenecen los elementos de List, en este caso Album (o cualquiera de sus descendientes).
Esta capacidad para diseñar clases y métodos que aplazan la especificación de uno o varios tipos hasta que el código de cliente declara y crea instancias de la clase o método es una característica del lenguaje C# denominada Genéricos.
List< T> es el equivalente genérico del tipo ArrayList y está disponible en el espacio de nombres System.Collections.Generic. Una de las ventajas de usar genéricos es que, como se especifica el tipo, no es necesario ocuparse de las operaciones de comprobación de tipos, como convertir los elementos en Album, como haría con ArrayList.
Tarea 3: Uso del nuevo modelo de vista en StoreController
En esta tarea, modificará los métodos de acción Browse y Details de StoreController para usar StoreBrowseViewModel.
Agregue una referencia a la carpeta Models en la clase StoreController. Para ello, expanda la carpeta Controllers en el Explorador de soluciones y abra la clase StoreController. Después agregue el siguiente código:
(Fragmento de código: Aspectos básicos de ASP.NET MVC 4: Ejemplo 6 UsingModelInController)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcMusicStore.ViewModels; using MvcMusicStore.Models;Reemplace el método de acción Browse para usar la clase StoreViewBrowseController. Creará un género y dos nuevos objetos Albums con datos ficticios (en el siguiente laboratorio práctico consumirá datos reales de una base de datos). Para ello, reemplace el método Browse por el código siguiente:
(Fragmento de código: Aspectos básicos de ASP.NET MVC 4: Ejemplo 6 BrowseMethod)
// // GET: /Store/Browse?genre=Disco public ActionResult Browse(string genre) { var genreModel = new Genre() { Name = genre }; var albums = new List<Album>() { new Album() { Title = genre + " Album 1" }, new Album() { Title = genre + " Album 2" } }; var viewModel = new StoreBrowseViewModel() { Genre = genreModel, Albums = albums }; return this.View(viewModel); }Reemplace el método de acción Details para usar la clase StoreViewBrowseController. Creará un objeto Album que se devolverá a la vista. Para ello, reemplace el método Details por el código siguiente:
(Fragmento de código: Aspectos básicos de ASP.NET MVC 4: Ejemplo 6 DetailsMethod)
// // GET: /Store/Details/5 public ActionResult Details(int id) { var album = new Album { Title = "Sample Album" }; return this.View(album); }
Tarea 4: Adición de una plantilla de vista Browse
En esta tarea, agregará una vista Browse para mostrar los álbumes encontrados para un género específico.
Antes de crear la plantilla de vista, debe compilar el proyecto para que el cuadro de diálogo Agregar vista conozca la clase ViewModel que se va a usar. Para compilar el proyecto, seleccione el elemento de menú Compilar y, después, Compilar MvcMusicStore.
Agregue una vista Browse. Para ello, haga clic con el botón derecho en el método de acción Browse de StoreController y haga clic en Agregar vista.
En el cuadro de diálogo Agregar vista, compruebe que el nombre de la vista es Browse. Active la casilla Crear una vista fuertemente tipada y seleccione StoreBrowseViewModel en la lista desplegable Clase de modelo. Deje los valores predeterminados en los demás campos. A continuación, haga clic en Agregar.
Adición de una vista Browse
Modifique Browse.cshtml para mostrar la información del género; para ello, acceda al objeto StoreBrowseViewModel que se pasa a la plantilla de vista. Para ello, reemplace el contenido por el código siguiente: (C#)
@model MvcMusicStore.ViewModels.StoreBrowseViewModel @{ ViewBag.Title = "Browse Albums"; } <h2>Browsing Genre: @Model.Genre.Name</h2> <ul> @foreach (var album in Model.Albums) { <li>@album.Title</li> } </ul>
Tarea 5: Ejecución de la aplicación
En esta tarea, probará que el método Browse recupera Álbumes del método de acción Browse.
Presione F5 para ejecutar la aplicación.
El proyecto se inicia en la página Principal. Cambie la dirección URL a /Store/Browse?Genre=Disco para comprobar que la acción devuelve dos álbumes.
Exploración de los álbumes Disco de la tienda
Tarea 6: Presentación de información sobre un álbum específico
En esta tarea, implementará la vista Store/Details para mostrar información sobre un álbum específico. En este laboratorio práctico, todo lo que se mostrará sobre el álbum ya está incluido en la plantilla View. Por tanto, en lugar de crear una clase StoreDetailsViewModel, usará la plantilla StoreBrowseViewModel actual y pasará el álbum.
Cierre el explorador si es necesario, para volver a la ventana de Visual Studio. Agregue una nueva vista Details para el método de acción Details de StoreController. Para ello, haga clic con el botón derecho en el método Details de la clase StoreController y haga clic en Agregar vista.
En el cuadro de diálogo Agregar vista, compruebe que el nombre de la vista es Details. Active la casilla Crear una vista fuertemente tipada y seleccione Album en la lista desplegable Clase de modelo. Deje los valores predeterminados en los demás campos. A continuación, haga clic en Agregar. Esto creará y abrirá un archivo \Views\Store\Details.cshtml.
Adición de una vista de detalles
Modifique el archivo Details.cshtml para mostrar la información del álbum; para ello, acceda al objeto Album que se pasa a la plantilla de vista. Para ello, reemplace el contenido por el código siguiente: (C#)
@model MvcMusicStore.Models.Album @{ ViewBag.Title = "Details"; } <h2>Album: @Model.Title</h2>
Tarea 7: Ejecución de la aplicación
En esta tarea, probará que la vista Details recupera la información del álbum del método de acción Details.
Presione F5 para ejecutar la aplicación.
El proyecto se inicia en la página Principal. Cambie la dirección URL a /Store/Details/5 para comprobar la información del álbum.
Navegación a los detalles del álbum
Tarea 8: Adición de vínculos entre páginas
En esta tarea, agregará un vínculo en la vista Store para tener un vínculo en cada nombre de género a la dirección URL /Store/Browse adecuada. De este modo, al hacer clic en un género, por ejemplo Disco, navegará a /Store/Browse?genre=Disco URL.
Cierre el explorador si es necesario, para volver a la ventana de Visual Studio. Actualice la página Index para agregar un vínculo a la página Browse. Para ello, en el Explorador de soluciones expanda la carpeta Views, después la carpeta Store y haga doble clic en el archivo Index.cshtml.
Agregue un vínculo a la vista Browse que indique el género seleccionado. Para ello, reemplace el código resaltado siguiente dentro de la etiquetas <li>: (C#)
@model MvcMusicStore.ViewModels.StoreIndexViewModel @{ ViewBag.Title = "Browse Genres"; } <h2>Browse Genres</h2> <p> Select from @Model.NumberOfGenres genres</p> <ul> @foreach (string genreName in Model.Genres) { <li> @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null) </li> } </ul>Nota:
Otro enfoque sería vincular directamente a la página, con un código como el siguiente:
<a href="/Store/Browse?genre=@genreName">@genreName</a>
Aunque este enfoque funciona, depende de una cadena codificada de forma rígida. Si posteriormente cambia el nombre del controlador, tendrá que cambiar esta instrucción manualmente. Una alternativa mejor es usar un método auxiliar HTML. ASP.NET MVC incluye un método auxiliar HTML que está disponible para estas tareas. El método auxiliar Html.ActionLink() facilita la creación de vínculos <a> de HTML, y se asegura de que las rutas de acceso de URL están codificadas correctamente.
Html.ActionLink tiene varias sobrecargas. En este ejercicio, usará una que toma tres parámetros:
- Texto del vínculo, que mostrará el nombre del género
- Nombre de acción del controlador (Browse)
- Valores de parámetros de ruta, que especifican el nombre (Genre) y el valor (nombre de Genre)
Tarea 9: Ejecución de la aplicación
En esta tarea, probará que cada género se muestra con un vínculo a la dirección URL /Store/Browse adecuada.
Presione F5 para ejecutar la aplicación.
El proyecto se inicia en la página Principal. Cambie la dirección URL a /Store para comprobar que cada género se vincula a la dirección URL /Store/Browse adecuada.
Navegación por los géneros con vínculos a la página Browse
Tarea 10: Uso de la colección ViewModel dinámica para pasar valores
En esta tarea, aprenderá un método sencillo y eficaz para pasar valores entre el controlador y la vista sin realizar ningún cambio en el modelo. ASP.NET MVC 4 proporciona la colección "ViewModel", que también se puede asignar a cualquier valor dinámico y acceder a ella desde controladores y vistas.
Ahora usará la colección dinámica ViewBag para pasar una lista de "Géneros marcados con estrella" desde el controlador a la vista. La vista Store Index accederá a ViewModel y mostrará la información.
Cierre el explorador si es necesario, para volver a la ventana de Visual Studio. Abra StoreController.cs y modifique el método Index para crear una lista de géneros con estrella en la colección ViewModel:
public ActionResult Index() { // Create list of genres var genres = new List<string> { "Rock", "Jazz", "Country", "Pop", "Disco" }; // Create your view model var viewModel = new StoreIndexViewModel { NumberOfGenres = genres.Count, Genres = genres }; ViewBag.Starred = new List<string> { "Rock", "Jazz" }; return this.View(viewModel); }Nota:
También puede usar la sintaxis ViewBag["Starred"] para acceder a las propiedades.
El icono de estrella "starred.png" se incluye en la carpeta Source\Assets\Images de este laboratorio. Para agregarlo a la aplicación, arrastre su contenido desde una ventana del Explorador de Windows al Explorador de soluciones en Visual Web Developer Express, como se muestra a continuación:
Adición la una imagen de estrella a la solución
Abra la vista Store/Index.cshtml y modifique el contenido. Leerá la propiedad "starred" en la colección ViewBag y le preguntará si el nombre del género actual está en la lista. En ese caso, mostrará un icono de estrella junto al vínculo de género. (C#)
@model MvcMusicStore.ViewModels.StoreIndexViewModel @{ ViewBag.Title = "Browse Genres"; } <h2>Browse Genres</h2> <p>Select from @Model.NumberOfGenres genres</p> <ul> @foreach (string genreName in Model.Genres) { <li> @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null) @if (ViewBag.Starred.Contains(genreName)) { <img src="../../Content/Images/starred.png" alt="Starred element" /> } </li> } </ul> <br /> <h5><img src="../../Content/Images/starred.png" alt="Starred element" />Starred genres 20% Off!</h5>
Tarea 11: Ejecución de la aplicación
En esta tarea, probará que los géneros con estrella muestren un icono de estrella.
Presione F5 para ejecutar la aplicación.
El proyecto se inicia en la página Principal. Cambie la dirección URL a /Store para comprobar que cada género destacado tiene la etiqueta correspondiente:
Exploración de géneros con elementos con estrella
Ejercicio 7: Recorrido por la plantilla nueva de ASP.NET MVC 4
En este ejercicio, explorará las mejoras de las plantillas de proyecto de ASP.NET MVC 4 y examinará las características más relevantes de la nueva plantilla.
Tarea 1: Exploración de la plantilla Aplicación de Internet de ASP.NET MVC 4
Si aún no está abierto, inicie VS Express para Web
Seleccione el comando de menú Archivo | Nuevo | Proyecto. En el cuadro de diálogo Nuevo proyecto, seleccione la plantilla Visual C#|Web en el árbol del panel izquierdo y elijaAplicación web ASP.NET MVC 4. Asigne el nombreMusicStore al proyecto y actualice el nombre de la solución a Begin, seleccione una ubicación (o deje el valor predeterminado) y haga clic en Aceptar.
Creación de un proyecto ASP.NET MVC 4
En el cuadro de diálogo Nuevo proyecto de ASP.NET MVC 4, seleccione la plantilla de proyecto Aplicación de Internet y haga clic en Aceptar. Observe que puede seleccionar Razor o ASPX como motor de vistas.
Creación de una aplicación de Internet ASP.NET MVC 4
Nota:
La sintaxis de Razor se ha introducido en ASP.NET MVC 3. Su objetivo es minimizar el número de caracteres y pulsaciones de tecla necesarios en un archivo, lo que permite un flujo de trabajo de programación rápido y fluido. Razor aprovecha las aptitudes existentes del lenguaje C# / VB (u otros), y ofrece una sintaxis de marcado de plantilla que permite un flujo de trabajo de construcción HTML impresionante.
Presione F5 para ejecutar la solución y ver las plantillas renovadas. Puede consultar las características siguientes:
Plantillas de estilo moderno
Las plantillas se han renovado, lo que proporciona estilos más modernos.
Plantillas rediseñadas de ASP.NET MVC 4
Representación adaptable
Consulte el cambio de tamaño de la ventana del explorador y observe cómo el diseño de página se adapta dinámicamente al nuevo tamaño de ventana. Estas plantillas usan la técnica de representación adaptable para representarse correctamente en plataformas móviles y de escritorio sin ninguna personalización.
Plantilla de proyecto de ASP.NET MVC 4 en diferentes tamaños de explorador
Cierre el explorador para detener el depurador y volver a Visual Studio.
Ahora puede explorar la solución y consultar algunas de las nuevas características introducidas por la plantilla de solución ASP.NET MVC 4.
Plantilla de proyecto de aplicación de Internet ASP.NET MVC 4
Marcado HTML5
Examine las vistas de plantilla para descubrir el nuevo marcado de tema, por ejemplo, abra la vista About.cshtml dentro de la carpeta Home.
Nueva plantilla,con Razor y marcado HTML5
Bibliotecas de JavaScript incluidas
jQuery: jQuery simplifica el recorrido de documentos HTML, el control de eventos, la animación y las interacciones de Ajax.
jQuery UI: esta biblioteca proporciona abstracciones para la interacción y animación de bajo nivel, efectos avanzados y widgets con temas, creados sobre la biblioteca de JavaScript jQuery.
Nota:
Puede obtener información sobre jQuery y jQuery UI en [http://docs.jquery.com/](http://docs.jquery.com/).
KnockoutJS: la plantilla predeterminada de ASP.NET MVC 4 ahora incluye KnockoutJS, un marco MVVM de JavaScript que le permite crear aplicaciones web enriquecidas y altamente adaptables mediante JavaScript y HTML. Como en ASP.NET MVC 3, las bibliotecas jQuery y jQuery UI también se incluyen en ASP.NET MVC 4.
Nota:
Puede obtener más información sobre la biblioteca KnockOutJS en este vínculo: http://learn.knockoutjs.com/.
Modernizr: esta biblioteca se ejecuta automáticamente, lo que hace que el sitio sea compatible con exploradores más antiguos al usar tecnologías HTML5 y CSS3.
Nota:
Puede obtener más información sobre la biblioteca Modernizr en este vínculo: http://www.modernizr.com/.
SimpleMembership incluido en la solución
SimpleMembership se ha diseñado como reemplazo del sistema anterior de proveedor de roles y pertenencias de ASP.NET. Tiene muchas características nuevas que facilitan al desarrollador proteger las páginas web de forma más flexible.
La plantilla de Internet ya ha configurado algunas cosas para integrar SimpleMembership, por ejemplo, AccountController está listo para usar OAuthWebSecurity (para el registro de cuentas de OAuth, inicio de sesión, administración, etc.) y Seguridad web.
SimpleMembership incluido en la solución
Nota:
Más información sobre OAuthWebSecurity en MSDN.
Nota:
Además, puede implementar esta aplicación en sitios web de Windows Azure si sigue Apéndice B: Publicación de una aplicación ASP.NET MVC 4 mediante Web Deploy.
Resumen
Al completar este laboratorio práctico ha aprendido los aspectos básicos de ASP.NET MVC:
- Los elementos principales de una aplicación MVC y cómo interactúan
- Cómo crear una aplicación de ASP.NET MVC
- Cómo agregar y configurar controladores para controlar los parámetros pasados mediante la dirección URL y la cadena de consulta
- Cómo agregar una página maestra de diseño para configurar una plantilla para contenido HTML común, una hoja de estilos para mejorar la apariencia y una plantilla de vista para mostrar contenido HTML
- Cómo usar el patrón ViewModel para pasar propiedades a la plantilla de vista para mostrar información dinámica
- Cómo usar parámetros pasados a controladores en la plantilla de vista
- Cómo agregar vínculos a páginas dentro de la aplicación ASP.NET MVC
- Cómo agregar y usar propiedades dinámicas en una vista
- Mejoras en las plantillas de proyecto de ASP.NET MVC 4
Apéndice A: Instalación de Visual Studio Express 2012 para Web
Puede instalar Microsoft Visual Studio Express 2012 para Web u otra versión "Express" mediante el Instalador de plataforma web de Microsoft . En las instrucciones siguientes se le guía por los pasos necesarios para instalar Visual Studio Express 2012 para Web mediante Instalador de plataforma web de Microsoft.
Vaya a [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Como alternativa, si ya ha instalado el Instalador de plataforma web, puede abrirlo y buscar el producto "Visual Studio Express 2012 para Web con el SDK de Windows Azure".
Haga clic en Instalar ahora. Si no tiene Instalador de plataforma web se le redirigirá para descargarlo e instalarlo primero.
Una vez que abra Instalador de plataforma web, haga clic en Instalar para iniciar la instalación.
Instalación de Visual Studio Express
Lea todas las licencias y términos de los productos, y haga clic en Acepto para continuar.
Aceptación de los términos de licencia
Espere hasta que finalice el proceso de descarga e instalación.
Progreso de la instalación
Cuando finalice la instalación, haga clic en Finalizar.
Instalación completada
Haga clic en Salir para cerrar el Instalador de plataforma web.
A fin de abrir Visual Studio Express para Web, vaya a la pantalla Inicio, empiece a escribir "VS Express" y, después, haga clic en el icono de VS Express para Web.
Icono de VS Express para Web
Apéndice B: Publicación de una aplicación ASP.NET MVC 4 mediante Web Deploy
En este apéndice se muestra cómo crear un sitio web desde el portal de administración de Windows Azure y publicar la aplicación que ha obtenido al seguir el laboratorio, y aprovechar la característica de publicación Web Deploy proporcionada por Windows Azure.
Tarea 1: Creación de un sitio web desde el portal de Windows Azure
Vaya al Portal de administración de Windows Azure e inicie sesión con las credenciales de Microsoft asociadas a la suscripción.
Nota:
Con Windows Azure puede hospedar 10 sitios web de ASP.NET de forma gratuita y, después, escalar a medida que crezca el tráfico. Puede registrarse aquí.
Inicio de sesión en el Portal de administración de Windows Azure
Haga clic en Nuevo en la barra de comandos.
Creación de un sitio web
Haga clic en Proceso | Sitio web. Después, seleccione la opción Creación rápida. Proporcione una dirección URL disponible para el nuevo sitio web y haga clic en Crear sitio web.
Nota:
Un sitio web de Windows Azure es el host para una aplicación web que se ejecuta en la nube que puede controlar y administrar. La opción Creación rápida permite implementar una aplicación web completada en el sitio web de Windows Azure desde fuera del portal. No incluye pasos para configurar una base de datos.
Creación de un sitio web mediante Creación rápida
Espere hasta que se cree el Sitio web.
Una vez que se cree el sitio web, haga clic en el vínculo bajo la columna Dirección URL. Compruebe que el nuevo sitio web funciona.
Navegación al nuevo sitio web
Sitio web en ejecución
Vuelva al portal y haga clic en el nombre del sitio web en la columna Nombre para mostrar las páginas de administración.
Apertura de las páginas de administración del sitio web
En la página Panel, en la sección de vista rápida, haga clic en el vínculo Descargar perfil de publicación.
Nota:
El perfil de publicación contiene toda la información necesaria para publicar una aplicación web en un sitio web de Windows Azure para cada método de publicación habilitado. El perfil de publicación contiene las direcciones URL, las credenciales de usuario y las cadenas de base de datos necesarias para conectarse y autenticarse en cada uno de los puntos de conexión para los que está habilitado un método de publicación. Microsoft WebMatrix 2, Microsoft Visual Studio Express para Web y Microsoft Visual Studio 2012 admiten la lectura de perfiles de publicación para automatizar la configuración de estos programas para publicar aplicaciones web en sitios web de Windows Azure.
Descarga del perfil de publicación del sitio web
Descargue el archivo de perfil de publicación en una ubicación conocida. Más adelante en este ejercicio verá cómo usar este archivo para publicar una aplicación web en un sitio web de Windows Azure desde Visual Studio.
Guardado del archivo de perfil de publicación
Tarea 2: Configuración del servidor de bases de datos
Si la aplicación usa bases de datos de SQL Server, deberá crear un servidor de SQL Database. Si quiere implementar una aplicación sencilla que no use SQL Server, puede omitir esta tarea.
Necesitará un servidor de SQL Database para almacenar la base de datos de la aplicación. Puede ver los servidores de SQL Database de la suscripción en el Portal de administración de Windows Azure en Bases de datos SQL | Servidores | Panel del servidor. Si no tiene un servidor creado, puede crear uno mediante el botón Agregar de la barra de comandos. Anote el nombre y la dirección URL del servidor, el nombre de inicio de sesión de administrador y la contraseña, ya que los usará en las tareas siguientes. Aún no cree la base de datos, ya que se creará en una fase posterior.
Panel del servidor SQL Database
En la siguiente tarea probará la conexión de base de datos desde Visual Studio, por ese motivo debe incluir la dirección IP local en la lista de Direcciones IP permitidas. Para ello, haga clic en Configurar, seleccione la dirección IP de Dirección IP del cliente actual y péguela en los cuadros de texto Dirección IP de inicio y Dirección IP final, y haga clic en el botón
.
Adición de la dirección IP del cliente
Una vez que se agregue la Dirección IP del cliente a la lista de direcciones IP permitidas, haga clic en Guardar para confirmar los cambios.
Confirmación de los cambios
Tarea 3: Publicación de una aplicación ASP.NET MVC 4 mediante Web Deploy
Vuelva a la solución ASP.NET MVC 4. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto de sitio web y seleccione Publicar.
Publicación del sitio web
Importe el perfil de publicación que ha guardado en la primera tarea.
Importación del perfil de publicación
Haga clic en Validar conexión. Una vez que se complete la validación, haga clic en Siguiente.
Nota:
La validación se completa una vez que aparezca una marca de verificación verde junto al botón Validar conexión.
Validación de la conexión
En la página Configuración, en la sección Bases de datos, haga clic en el botón situado junto al cuadro de texto de la conexión de base de datos (es decir, DefaultConnection).
Configuración de Web Deploy
Configure la conexión de base de datos de la siguiente manera:
En Nombre del servidor, escriba la dirección URL del servidor SQL Database con el prefijo tcp:.
En Nombre de usuario escriba el nombre de usuario de administrador del servidor.
En Contraseña escriba la contraseña de administrador del servidor.
Escriba un nuevo nombre para la base de datos, por ejemplo MVC4SampleDB.
Configuración de la cadena de conexión de destino
A continuación, haga clic en Aceptar. Cuando se le pida que cree la base de datos, haga clic en Sí.
Creación de la base de datos
La cadena de conexión que utilizará para conectarse a SQL Database en Windows Azure se muestra en el cuadro de texto Conexión predeterminada. A continuación, haga clic en Siguiente.
Cadena de conexión que apunta a SQL Database
En la página Vista previa, haga clic en Publicar.
Publicación de la aplicación web
Cuando finalice el proceso de publicación, el explorador predeterminado abrirá el sitio web publicado.
Aplicación publicada en Windows Azure
Apéndice C: Uso de fragmentos de código
Con fragmentos de código, tiene todo el código que necesita a su alcance. El documento de laboratorio le indicará exactamente cuándo puede utilizarlos, como se muestra en la siguiente figura.
Uso de fragmentos de código de Visual Studio para insertar código en el proyecto
Para agregar un fragmento de código mediante el teclado (solo C#)
- Coloque el cursor donde quiera insertar el código.
- Empiece a escribir el nombre del fragmento de código (sin espacios ni guiones).
- Vea cómo IntelliSense muestra los nombres de los fragmentos de código coincidentes.
- Seleccione el fragmento de código correcto (o siga escribiendo hasta seleccionar todo el nombre del fragmento).
- Presione la tecla Tab dos veces para insertar el fragmento de código en la ubicación del cursor.
Empezar a escribir el nombre del fragmento de código
Presione la tecla Tab para seleccionar el fragmento de código resaltado
Presione la tecla Tab de nuevo y el fragmento de código se expandirá
Para agregar un fragmento de código mediante el mouse (C#, Visual Basic y XML) 1. Haga clic con el botón derecho en el lugar donde quiera insertar el fragmento de código.
- Seleccione Insertar fragmento de código seguido de Mis fragmentos de código.
- Haga clic en el fragmento de código correspondiente de la lista para seleccionarlo.
Haga clic con el botón derecho en el lugar donde quiera insertar el fragmento de código y seleccione Insertar fragmento de código
Haga clic en el fragmento de código correspondiente de la lista para seleccionarlo
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de