Se va la Tercera: MVC3 para bobos

Nuestros Ayudantes para definir y validar modelos.
Ahora vamos a hacer un chiquito más complejos los modelos que creamos.
Veamos. La teoría dice que tenemos que tener "separación de incumbencias". De acuerdo a esta norma, los datos deberían quedar reducidos exclusivamente al ámbito de los modelos y las validaciones y la lógica del negocio exclusivamente del lado de los controladores.
Bueno, en el mundo de los ideales, puede ser que sea así, pero en la realidad, eso implica costos: costo de procesamiento, de tráfico y sobre todo de código.
En aras de simplificar, la gente de MVC le pasó algún trabajito de chequeo previo de datos a las vistas, ya que las vistas pueden ejecutar código Javascript. Al mismo tiempo, al momento de definir los datos en los modelos, resultaba más sencillo definir algunas reglas de negocio a nivel de modelo (por ejemplo la obligatoriedad de un dato) en el modelo, y no cada vez que el dato era manipulado en el controlador.
Para cumplir este cometido, se crearon algunos Atributos para los datos que nos facilitan la tarea de codificar cada vez menos y de generar aplicaciones cada vez más fáciles de mantener.

Los DataAnnotations.
Entonces, vieron la luz los DataAnnotations.
El Namespace DataAnnotations contiene una colección de clases de atributos para definir los metadatos para los modelos MVC (también para Data Dynamic, ya lo veremos en las próximas clases).
¿Qué significa esto? Que nos permiten modelar nuestros datos de acuerdo a requerimientos de nuestra capa de negocio, y de esa forma quitar cientos de líneas de programación de los controllers, agregando atributos a los datos.
Con el Namespace DataAnnotations (que pertenece al namespace ComponentModel) podemos determinar si un dato es o no obligatorio, en qué rango va a operar, la cantidad de caracteres que va tener, qué etiqueta va a tener, si lo vamos a comparar contra una expresión regular, etc.
Veamos algunos ejemplos, usando el código que metimos hasta aquí.
Vamos a agregar algunas referencias a nuestros modelos.

El principal es DataAnnotations, pero ComponentModel nos agrega algunos que hacen más legible el código y más fácil de generar código para globalización, lo veremos más adelante.
Bien, ahora vamos a decirle a nuestro código que algunos campos son requeridos, vamos a ponerle etiquetas a los campos que la necesiten, y a agregar un rango de valores válidos para el DNI. ¿Cómo? Así;

Es tan fácil como eso. El espacio de nombres nos ofrece una serie de clases que se agregan como atributos a las propiedades del modelo, y nos permiten agregar validaciones a los datos, de forma tal que cuando los recibe el controlador, apliquemos un sólo método en un objeto que se llama "ModelStateDictionary". El método se llama "IsValid". Al ejecutarse este método, se van a validar todas las DataAnnotations que hayamos puesto en nuestro modelo.

Pretty Bonito, ¿Eh?

Extendiendo las extensiones
Si esto les parece magnífico, ¿qué les parece extender estas validaciones para hacer CUALQUIER validación?
Veamos cómo.
Vamos a agregar una nueva carpeta a nuestro proyecto. Le ponemos de nombre "Infraestructure" En esa carpeta, vamos a agregar una clase que nos permita extender la clase RegularExpressionAttribute, para validar que lo que ingresen en un campo sea una URL Válida.
Agregamos la clase, que se va a llamar en este caso "UrlAttribute". Del nombre de la clase, lo que pongamos antes de Attribute va a ser lo que pongamos luego como "Adorno" en nuestras propiedades.
La clase la vamos a hacer heredar de RegularExpressionAttribute, ya que vamos a usar una validación de RegularExpression.
El código quedaría entonces máso meno Sasí:

¡Qué fácil, Chiquilines! ¿Qué hace esta clase? Lo que está haciendo es pasarle a la Base (RegularExpressionAttribute) la cadena de regularExpression que valida una URL. Entonces, en lugar de esperar una cadena Regex, ya va a tener una asignada que va a validar exclusivamente una URL. (a propósito, la cadena completa es: @"(?i)\b((?:https?://|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'"".,<>?«»“”‘’]))"

Bien. Eso es todo por hoy. El sábado nos volvemos a encontrar para seguir regando la plantita, y practicando un poco más.

Saludos!

Una guía a prueba de bobos para MVC Part Deux

Jóvenes. ¿Leyeron el anterior? BIEN HECHO.
Vamos al código.
En nuestra carpeta de Modelos, hacemos click con el botón derecho y del menú contextual elegimos "Agregar" y luego la última opción "Clase", like this:

¡Qué bonito!... En el cuadro de diálogo de la clase, cambiamos solamente el nombre, que será "Alumno", porque vamos a hacer un pequeño sitio para inscribirse a cursos.
Listo. Una vez que tenemos la clase nueva agregada, vamos a definir nuestro modelo. Para definir a un alumno, tenemos que agregarle sus propiedades. Por ejemplo, queremos que tenga Nombre y Apellido, DNI, Fecha de Nacimiento y queremos saber cómo escuchó de los cursos.
Entonces, agregamos las propiedades desde el código. Para agregar una propiedad en una clase, la forma más efectiva es escribir prop y dar dos veces tab. Prueben y me cuentan.
La clase quedará entonces así:

Vamos a analizar un poquito qué es lo que escribimos.
La propiedad ID, va a ser nuestro identificador unívoco de las instancias de la clase.
Las propiedades Name, LastName, DNI y Birthday no tienen mayores dificultades, pero los dos últimos renglones pueden parecer un poco "raros".
La idea es que el usuario no pueda escribir dónde oyó del curso, sino que seleccione de entre las opciones que le ofrece la página, para normalizar un poco las respuestas.
Entonces, para ello vamos a crear una segunda clase que se va a llamar "Reference", y vamos a relacionarla con nuestra clase Alumno con dos líneas de código: la primera va a tener una propiedad int que va a ser el ID de la referencia, y luego voy a declarar una clase "virtual" (después veremos qué es y para qué sirve) donde lo referencio a la nueva clase (que no está creada, por eso me sale el tipo subrayado) que se va a llamar Reference. Le puedo poner, si quieren, Rapunzel, en lugar de Reference, pero me pareció un nombre simpático.
BIEN. Hagan click sobre la palabra subrayada, y presionen Ctrl y punto. (Me refiero a la tecla ctrl y a la tecla del signo de puntuación punto) y les va a aparecer un menú contextual. Elijan "Agregar Clase para Reference"

Y automáticamente se agregará una nueva clase para "Reference", con la definición del namespace, etc.
Tenemos que modificar el scope de la clase, ya que por defecto no lo tiene declarado, y le agregamos dos campos: Uno de identificación (ID) y otro que, a falta de mejor nombre, le vamos a poner "Name"
La clase quedará entonces así:

Aunque parezca increíble, ¡ya casi tenemos TODO EL CÓDIGO QUE NECESITAMOS!
Vamos entonces a crear el controlador y las vistas para administrar los datos de estos modelos.
Primero compilamos la aplicación, para que el runtime sepa que tenemos nuevos modelos. Esto lo podemos hacer haciendo click derecho sobre el proyecto y elegir "Build" o haciendo Ctrl + Shift + "B".
Bien, vamos a la carpeta controladores y hacemos clique con el botón derecho en la carpeta controladores y seleccionamos "Agregar" y "Controlador, así:

Nos aparece el siguiente cuadro de Diálogo:

En el nombre del controlador vamos a poner "Alumno" en lugar de Default1 y vamos a dejar la palabra Controller, ya que esta es una convención del framework MVC. Nos quedará entonces en "AlumnoController".
En Template vamos a dejar lo que está seleccionado, esto es "Controller With Read/Write Actions and views, using Entity Framework".
En "Model Class" vamos a seleccionar la clase "Alumno" que es la que necesitamos para representar, y en "Data Context Class" vamos a seleccionar "New Data Context". Cuando hagamos esto, nos saldrá un nuevo cuadro de diálogo con el nombre de la contexto de datos. Dejemos el que nos propone, y además copiémoslo porque lo vamos a necesitar en pocos segundos.
Presionamos el botón "Add" (agregar) y listo el pollo y campiona la gallina.
Ahora, hacemos LO MISMO, de agregar controlador, pero en el nombre vamos a poner "ReferenceController", va a responder al modelo "Reference" y vamos a usar el mismo datacontext que ya creamos.
¿Qué es lo que hicimos ? En forma automática, agregamos las clases necesarias para manejar el enlace a datos, el controlador para la interacción con el usuario y las vistas que el usuario va a ver. Esto lo podríamos haber hecho en forma manual, pero ¿Para que tipear algo que la máquina puede hacer por mi?
No se preocupen por las clases y el código generado, ya lo vamos a ver en la próxima clase.
Por ahora vamos a ir cerrando lo que nuestra aplicación necesita para funcionar.
¿Se acuerdan del archivo "Web Config"? Bueno. Lo abrimos, y en donde dice "ConnectionString" reemplazamos el nombre de "ApplicationServices" de la primer entrada por el nombre del data context que acabamos de crear (y de copiar, si siguieron las instrucciones al pie de la letra).
¿Listo? Buenísimo
Ahora vamos a hacer dos cosas más.
Abrimos el archivo global.asax y en el método RegisterRoutes vamos a cambiar la palabra "Home" por la palabra "Alumno" ¿Qué efecto hace esto? que si yo no especifico una ruta para acceder a un controlador, la aplicación va a ir directamente al controlador "Alumno" y a la Acción "Index".
La instrucción quedaría entonces, Masomeno Sasí:


            routes.MapRoute(
                "Default", // Route name
                "{controller}/{action}/{id}", // URL with parameters
                new { controller = "Alumno", action = "Index", id = UrlParameter.Optional } // Parameter defaults
            );

Y una más y no jodemos más.

Vamos a la carpeta "Views", abrimos la carpeta "Shared" y modificamos en la vista "_Layout", que es la que tiene la definición de todas las vistas, en la sección nav vamos a cambiar los "ActionLinks" para que apunten a las acciones de nuestros nuevos controladores.
Está así:

Y quedará asá:

Listo, jovencitos, todo lo que necesitábamos para la aplicación está escrito.
Compilemos y corramos la aplicación, presionando F5 ¿Verdad que está bonito?
Ingresen al vínculo en la parte superior que dice "Referencias", presionen el vínculo "Agregar Nuevo" y agreguen 2 o 3 causas, como "Página Web" "Publicidad en el Diario", etc.
Luego presionen el vínculo de "Alumnos" y prueben de agregar alumnos a la BBDD.

¿Que tal, pascual?

¡Mañana Seguimos siguiendo!

Una Guía a Prueba de Bobos para... MVC 3 Parte I

Queridos Alumnos:
Los que fueron, MUY BIEN.
Los que no fueron: FEA LA ACTITUD!

Veamos.
En nuestra primera clase, vimos el paradigma de progamación MVC que en ASP.Net va por la versión 3, y está preparando la versión 4.
Como breve repaso, y para que los que no fueron a la primera clase no lleguen sin saber nada, vamos a hacer un post de recapitulación de los conceptos vistos en la primera clase.
Para comenzar, vamos a instalar las herramientas necesarias, haciendo click en el siguiente botón:

Esto deberá abrirnos una nueva ventana que nos va a instalar el Microsoft Web Platform Installer y luego va a instalar el Visual Studio Express 2010 y Sql Server 2008 en la máquina local. Paciencia, tarda un rato.

Mientras se está instalando, sigan leyendo que vamos a hacer una pequeña visita a qué significa MVC y con qué salsas lo podemos comer.
MVC es un patrón de arquitectura de Software que separa los datos, la interfaz y la lógica de negocio de una aplicación en tres componentes distintos. Estos tres componentes se relacionan de una forma particular: la interfaz visual (VISTA) se encarga de mostrar los datos. En general no tiene (y no debería tener) lógica de programación, ya que de ésta se encarga el (MODELO). El Modelo, como su nombre lo indica, especifica la modelización de datos, es decir que nos muestra cómo se arma la infrormación y nos permite validarla y almacenarla en un repositorio. Por último el (CONTROLADOR) es el que se encarga de recibir los eventos, es decir la interacción del usuario, enviada por la vista, y redireccionarla al modelo para que éste la transforme, persista o elimine.
Bien, ahora que están BIEN CONFUNDIDOS, vamos a ver un ejemplo práctico, porque una palabra vale menos que 0,0001 imágenes, o algo así.
Si ya terminaron de instalar,  vamos a los bifes:
1) Abran el visual Studio 2010 Express Edition.
2) Hagan click sobre el vínculo que dice "Create New Project" (O crear nuevo proyecto si fueron más inteligentes que yo y lo instalaron en español)

3) En el diálogo que se abre, seleccionen "ASP.Net MVC 3 Web Application" en el tipo de proyecto y luego completen donde dice Nombre ponemos "Curso2011" (para ser original, le pueden poner Rumpelstinskin si quieren poner algo más común)

En el siguiente cuadro de diálogo, seleccionamos "Internet Application" y ya estamos en carrera.

Lo primero que tenemos que ver es las carpetas que el proyecto creó automáticamente para nosotros, y entender dónde buscar las papas, dónde las manzanas y dónde el resto de las verduras. El árbol del proyecto se nos presenta así:

Las carpetas principales del proyecto son las que contienen las vistas, los modelos y los controladores. Para ver la calidad del genio de la gente que programa, están en las carpetas Views, Models y Controllers del proyecto, respectivamente.
Sigamos: Hay tres carpetas más, una que se llama "Content", que va a contener las imágenes y los archivos CSS del proyecto, y la otra que se llama Scripts, que contiene el javascript que hace funcionar a las vistas, y por último hay una carpeta que se llama "App Data" que va a contener las bases de datos de la versión express de Sql Server 2008 que vamos a usar.
Lo que vamos a hacer a continuación, es crear dos modelos relacionados, y en base a esos dos modelos relacionados, crear la base de datos, los controladores necesarios y las vistas que trabajen para ingresar, validar y persistir los datos en la base de datos. No se preocupen que vamos a escribir ¡Menos de 30 líneas de código!

Mañana Seguimos.