A modo de introducir los primeros conceptos de MVC3, crearemos una Aplicación web simple que listará los productos de K1000 marca especializada en complementos (bolsos, riñoneras y mochilas) artesanales.
Visual Studio 2010 es una herramienta muy útil que nos crea una aplicación completa básica inicial sobre la que podemos trabajar.
Archivo/Nuevo Proyecto/Aplicación web MVC3 dará paso al cuadro de dialogo donde podremos elegir la ruta donde guardaremos el proyecto y el nombre de nuestro proyecto, al aceptar deberemos definir también el tipo de aplicación, el motor de las vistas y el lenguaje de marcado.
Razor es el nuevo motor de vistas que ha desarrollado Microsoft sobre el que basará en el futuro y también continuará con ASPX(c#).
CREAR UNA APLICACIÓN MVC CON VISUAL STUDIO 2010
Así crearemos un proyecto con una estructura básica de lo que es una Aplicación Web MVC3
La estructura de directorios refleja el patrón que separa las vistas de los modelos y los controladores.
Content: que contendrá básicamente los css
Controllers: que contendrá las clase controlador
Models: que contendrá las clases entidad
Views: que contendrá las vistas
Scripts: que contendrá los scripts para el lado cliente
Con F5 se ejecutará la aplicación en el localhost con un número de puerto aleatorio asignado. Veremos cómo existe una aplicación completa.
CREACIÓN DE CONTROLADORES Y MAPEADO
En este modelo de separación entre roles MVC el controlador es el encargado de recibir las peticiones del usuario y consultando los datos necesarios en el modelo de datos dar una respuesta con la vista adecuada.
Para que el controlador pueda ser el gestor existe unas normas de rutado que en vez de dirigirse la petición a un archivo en disco como se hace en WebForms, el mapeo se hace sobre el controlador, sobre sus acciones y parámetros de tal manera que la ruta representa /[Controlador]/[Accion]/[Parametros]
Veamos un ejemplo:
- Crearemos un nuevo controlador llamado Productos (seleccionada la carpeta controllers boton derecho añadir controlador y elegiremos vacío)
- Modificaremos el código del controlador para que su salida sea una cadena de caracteres y poder observar su comportamiento
Código:
using System; using System.Web.Mvc; namespace Mvc3RazorKmil.Controllers { public class ProductosController : Controller { // salida por defecto public string Index() { return "Acción por defecto estás en /Productos"; } // acción definida en el mapeo public string Bienvenida() { return "Hola qué tal estás en /Productos/Bienvenida"; } } }
En el navegador:
http://localhost:2032/Productos/
http://localhost:2032/Productos/Bienvenida
Añadiremos una nueva acción con parámetros:
Añadiremos una nueva acción con parámetros:
public string ConParametros(string nombre, int numVeces = 1) { return HttpUtility.HtmlEncode("Hola" + name + ", NumVeces es: " + numTimes); }
Una vez compilado en el navegador:
http://localhost:2032/Productos/Bienvenida?nombre=Paco
Los controladores no serán los encargados de generar código html como está haciendo este de ejemplo, en realidad seguir el patron MVC implica que sea la vista la encargada de este rol. Así que el controlador decidirá la vista y le pasará los datos y la vista generará el código html con los datos suministrados.
CREACIÓN DE VISTAS
Vale la pena usar las ventajas que nos da Razor para crear las vistas. Razor crea documentos .cshtml que son plantillas y documentos que mostrarán la lógica de la vista.
Para crear las vistas modificaremos
