ASP .NET MVC3: una aplicación básica ( Capítulo 1)

Basado en: http://www.asp.net/mvc/tutorials

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:

1. Crearemos un nuevo controlador llamado Productos (seleccionada la carpeta controllers boton derecho añadir controlador y elegiremos vacío)
2. 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:

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

ASP .NET MVC3: una aplicación básica ( Introducción)

Esta será una serie de artículos basados en los tutoriales que Microsoft pone a disposición pública para que podamos aprender su tecnología.

Tutoriales de Microsoft: http://www.asp.net/mvc/tutorials

Espero que nos sean de utilidad.

Cuando estudié la OO (orientación a objetos) pensaba en cómo lo íbamos a implementar, la aparición de los patrones ha hecho que trabajemos sobre una base mucho más sólida a la hora de hacer nuestros desarrollos.

MVC es el patrón MODELO, VISTA, CONTROLADOR sobre el que está basado ASP.NET MVC3, con este patrón conseguimos un modelo de abstracción, ocultación de la información y modularidad alta.

MARCO DE TRABAJO ASP.NET MVC: aplicación de inicio

Para iniciarnos en este marco de trabajo crearemos una aplicación sencilla. Esta aplicación listará una categorías, de cada categoría podremos listar los productos que la componen y acceder a los detalles de cada producto.

MVC es un patrón de diseño que divide nuestra aplicación web en tres tipos de componentes:

• Modelos: que representan a los datos y estarán representadas por las clases entidad, las clases entidad encapsulan los datos y los accesos a ellos.
• Vistas: que son las interfaces con las que actúan los usuarios
• Controladores: que son los que gestionan las interacciones entre los usuarios y la aplicación, recogen los requerimientos en las vistas, interactuan con las clases entidades y devuelven vistas.

CREAR UNA APLICACIÓN WEB ASP.NET MVC CON VISUAL STUDIO 2010

Menú: Archivo/Nuevo Proyecto

Cuando aceptamos también nos preguntará se queremos crear directorio de pruebas. Otra de las características de MVC en ASP.NET es la posibilidad de trabajar con pruebas unitarias que nos permitirán validar nuestro código en todo momento.

ESTRUCTURA BÁSICA 

Si elegimos la plantilla MVC nos creará una estructura básica de lo que es una aplicación Web MVC.

Las carpetas Models, Controllers y Views que guardarán los componentes de MVC

Carpeta Content que contendrá aquellos archivos para la personalización de las vistas como los css

Scripts que contendrá los archivos para el código del lado cliente



MAPEADO DE LAS URLS

En Web Forms el mapeado de la URL va a un archivo en el disco (.aspx) que es el que contiene el código que será procesado por el servidor (también en archivo a parte pero referenciados en el .aspx). Sin embargo en MVC el que se encarga de contener la lógica de aplicación es el controlador que accederá a los datos y redireccionará a la vista adecuada.

Las reglas de enrutado se encuentran preconfiguradas en el archivo Global.asax, estas reglas capturan por ejemplo el path de entrada /Productos a la clase controladora Productos, así que para recoger toda la funcionalidad para los productos crearemos la clase controlador ProductosController (todas las clases controladoras acabarán por Controller).

Si nos situamos en la carpeta controllers y pulsamos el botón derecho nos da la opción de añadir una nueva clase y especificaremos una clase controlador para MVC2 así añadiremos el controlador a nuestra aplicación. Ahora deberemos añadir la lógica para gestionar todas las peticiones sobre los productos que como hemos definido serán la de listar las categorías, listar los productos por categoría y ver los detalles e un producto.

Una primera estrategia sería la de hacer un select case que nos llevara a las acciones que queremos pero en la arquitectura MVC el propio mapeo de la url nos llevará, tal y como nos ha llevado al controlador, a la acción correcta ya que las acciones dentro del controlador se corresponderán con los fragmentos en la url, para nuestra aplicación:

URL	acción	comportamiento
/Productos/Categorias	Categorias()	Lista las categorias
/Productos/Listar/Categoria	Listar()	Lista los productos por categoria
/Productos/Detalle/IDProducto	Detalle()	Lista los detalles de un producto

Los parámetros también los recogerá de la URL como hace con el nombre de la acción, así /Productos/Listar/Categoria Categoria sería la string de la categoría que queremos listar.

La clase ProductosController quedará:

MODELO DE DATOS

Ahora generaremos las clases entidad que contendrán los datos y las acciones necesarias para que se puedan ver y modificar esos datos. En este caso tenemos una base de datos kmil en SQL Server Express y haremos el modelado de datos con LINQ to SQL. Visual Studio 2010 generará nos permitirá crear el modelo de datos de forma gráfica en un documento .dbml que tendrá el esquema y generará las clases .cs necesaria para los métodos accesores dentro del contexto de datos.

Botón derecho en la carpeta models y añadiremos nueva clase para LINQ to SQL

Codificaremos la clase KmilDataContext.cs que contendrá lo necesario para poder acceder a los datos con las instrucciones Linq necesarias, así la clase controladora no tendrá ninguna instrucción linq. Será una clase parcial puesto que el diseñador ya nos ha definido métodos.