Parte 1La gran mayora de los nuevos integrantes de la comunidad informtica siempre han tenido o tienen mucho inters en conocer lo que se esconde por detrs de los proyectos, pginas web o aplicaciones de escritorio.Sin embargo, hoy en da con la expansin de conceptos tan aprovechables como es el trmino nube, la mayora de las empresas dirigen sus miradas a crear sus aplicaciones o servicios orientados hacia dicha nube, utilizando las bondades que proporciona internet hoy en da.Es por esto que se ha pensado en la creacin de una serie de artculos relacionados con la creacin de una aplicacin web desde su inicio y explicando cada una de sus partes. De sta forma se avanzar en el diseo de una web comn a la cual se le irn incorporando elementos conforme vayan avanzando el nmero de publicaciones.

Como se ve en la figura anterior,ASP.NET MVCfue construido sobreMicrosoft ASP.NET Framework, la cual esta a su vez montada sobre Microsoft .NET Framework.ASP.NET Web Forms fue concebido como un reemplazo y mejora para de MicrosoftActive Server Pages(ASP) y pronto se convirti en la metodologa favorita para los desarrolladores a la hora de plantear una aplicacin web. Sin embargo, a pesar que ASP.NET MVC sali a la luz un poco ms adelante que ASP.NET Web Forms esto no significa que es un reemplazo para ella, ya que son dos tecnologas que emplean patrones totalmente diferentes.Por lo cual ASP.NET MVC debe considerarse slo una forma alternativa de hacer un sitio web de ASP.NET.Como herramienta inicial se van a utilizar el entorno de desarrollo de Microsoft Visual Studio 2012 y se ha pensado utilizar el frameworkASP.NET MVC 4que implementa el patrn modelo-vista-controlador.Qu tiene de nuevo MVC4 en relacin a sus versiones anteriores?Entre las novedades que incluye MVC 4 en relacin a su predecesor tenemos:Entity Framework 4.3,cuya principal ventaja es la migracin de bases de datos usando nicamente cdigo preservando los datos de la base de datos.Lasaplicaciones se cargan de forma ms rpida y cercanas para los usuarios, pes se disminuye el tiempo y el tamao que hacen las pginas a los HTTP.Cache Bustingque permiten un mejor manejo de archivos.Wep APIs: Se incluye soporte para su creacin, permitiendo crear servicios HTTP y APIs que pueden ser llamadas directamente desde el cdigo desde una gran cantidad de clientes. Ideal para crear Servicios REST.Web para mviles: ASP.NET MVC 4 incluye soporte para construir aplicaciones y sitios web para mviles, permitiendo crear de forma mucho ms sencilla experiencias dirigidas a telfonos y tabletas.Mejoras en Razor: ASP.NET MVC 4 incluye la versin 2 del motor Razor, este incluye mejoras en la creacin de plantillas, ms limpias y consistentes, soporte en la resolucin de referencias URL, y en la muestra selectiva de atributos HTML.

Actualmente ASP.NET MVC 4 es compatible con Visual Studio 2010 y Visual Studio 2012, por lo que si desea seguir este tutorial y dispone de una versin anterior a las mencionadas tendr que actualizar su versin de Visual Studio.

Si no cuentas aun con Visual Studio 2012 puede obtener de forma gratuita la versin de prueba para 30 das con el cual, adems de seguir el tutorial de la mejor forma posible, podrs plantear nuevas funcionalidades a la aplicacin o crear tus propias aplicaciones dando as la posibilidad de comentar tus dificultades de forma que al intentar solucionarlas se beneficien ms usuarios que puedan encontrarse en la misma tesitura.En la prxima entrada de iniciar con el proceso de creacin de la aplicacin Web.

Parte 2

En esta ocasin vamos a ir directos a la creacin de una aplicacin web con Visual Studio 2012. Aunque en el presente tutorial se haga uso de la versin profesional como se ve en la siguiente imagen, no significa que vosotros no podis seguirla, ya que los elementos de los que se va a hacer uso estn disponibles tambin en la versinVisual Studio Express 2012 para Web

Imagen1: Pantalla de bienvenidaEn la pantalla anterior se hace clic sobre New Project para empezar un nuevo proyecto. O haciendo uso de la pestaaFile->New->Project

Imagen2: Iniciando la creacin de un proyecto webA continuacin aparecer una ventana donde podris elegir la tecnologa que ms os guste.Como se deca en el post anteriorcon Visual Studio 2012 podris hacer uso de ASP.NET Web Forms, ASP.NET MVC 3 o ASP.NET MVC 4, aunque en esta ocasin se va a crear una Aplicacin Web usando ASP.NET MVC 4 por lo cual se marca dicha opcin, se escribe el nombre que se le querr dar al proyecto (MiPrimeraAplicacionWebMVC4) y por ltimo se establece la ubicacin final del proyecto.

Imagen3: Seleccionando el tipo de proyectoLo siguiente ser establecer una plantilla, para lo cual se va a elegir Aplicacin de Internet (Internet Application) y como motor de vistas seleccione Razor.

Imagen4: Estableciendo motor de vistas y tipo de plantillaTras dar al botn Ok, se iniciar el proceso de creacin de carpetas y archivos de configuracin pertenecientes al proyecto web que acabamos de crear.

Imagen5. Creando el rbol de directorios de la aplicacinLa solucin quedar estructurada como se muestra a continuacin.

Imagen6: rbol de directorios de la aplicacinPara muchos de los que sta sea su primera toma de contacto con el desarrollo con Visual Studio 2012 y ms aun con MVC, sera conveniente explicar cada uno de los elementos presentes en la mencionada estructura, para ello se ha numerado las partes ms importantes a priori y haciendo mencin a las dems (que sern detalladas ms adelante).

Imagen7: Elementos principales de una aplicacin ASP.NET MVC1.Vistas (View):Cuando un usuario convencional piensa en una pgina web rpidamente se le vendra la mente una interfaz proporcionada por el navegador web, donde el usuario podr ver e interactuar con los elementos visualmente disponibles. Pues las vistas se asemeja muchsimo a esa idea, es decir, es la capa de presentacin de los elementos que devuelve el controlador. De una forma ms coloquial, en la vista se muestra exactamente lo que el desarrollador desea que el usuario vea en cada momento.

Imagen8: VistasComo se puede apreciar en la imagen, se ha seleccionado la vista Index, perteneciente a la carpeta Home, que es la vista que se mostrar por defecto cuando se ejecuta la aplicacin. Cabe destacar que cuando, por ejemplo, se pida la pginahttp://localhost:63630/Home/el servidor buscar automticamente la accin Index, aunque no se especifique, por lo que dara lo mismo pedir la pginahttp://localhost:63630/Home/o pedirhttp://localhost:63630/Home/index, ya que ambos acudiran al mismo lugar.Otro detalle curioso es su extensin .cshtml, lo cual es muy acertado ya que una vista es como una fusin entre los ficheros .html tradicionales y los archivos .cs del lado del servidor en ASP.NET Web Forms.Para muestra podis ver el cdigo que viene detrs de la vista predeterminada.

Imagen9. Cdigo detrs de una vista2.Controladores (Controller):Para quienes conozcan algn otro lenguaje de programacin, como por ejemplo Java, los controladores o controller son lo ms parecido a un Servlet, ya que funciona como un intermediario entre la Vista y el Modelo respondiendo a los eventosgenerados por ellos (generalmente acciones).Resumiendo, la Vista realiza una peticin al Modelo, pero para ello pasa previamente por el controlador quien analizar la peticin, la enviar al modelo correspondiente, luego recoger la respuesta del Modelo y la enviar a la vista de la forma que el controlador considere oportuna.

Imagen10: Cdigo de un controladorComo se puede ver en la imagen anterior, el nombre del controlador tiene el mismo nombre que la carpeta que incluye las vistas (Home) seguido de la palabra Controller, por convenio se proseguir usando sta metodologa para todos los controladores que se vayan creando.Otro detalle es que el controlador ve a cada vista como una funcin, retornando en cada caso la vista correspondiente al nombre de la funcin que se est invocando.Por ejemplo: El usuario quiere ir a la pgina http://localhost:63630/Home/index, entonces el servidor de aplicaciones ira al controlador llamado HomeController y localizar la accin Index, ejecutando lo que dicha accin desee ejecutar, por ltimo el controlador devuelve la vista llamadaIndex.3.Modelos(Models):Es la parte que gestiona los accesos a la informacin propiamente dicha, tanto como conexiones a bases de datos, acceso ficheros con informacin crtica, etc. sobre los que se realizarn consultas, actualizaciones, etc.Si se desease hacer otra comparacin, sera como acceder a una API que se encuentra llena de funciones que devolvern unos resultados que sern usados por los controladores para generar una respuesta a la Vista.4.Web.Config:Es un archivo XML donde se guardan las principales opciones de configuracin de una aplicacin ASP.NET, ya sea Web Forms o MVC.Desde aqu se controla la carga de los modulos, configuracin de control de sesiones, lenguaje de programacin, configuracin de seguridad, etc. Sin embargo, lo que a priori ser interesante ver es que aqu dentro es donde se va a guardar las cadenas de conexin a base de datos, usados por los mtodos de autenticacin o las funciones que sean desarrolladas posteriormente dentro de los Modelos.

Imagen11: Web.Config5.Global.asax:Es un archivo disponible, al igual queWeb.Config, en cualquier aplicacinASP.NETy su principal funcin es manejar los eventos generador por la aplicacin.Con ste fichero se pueden manejar eventos tales como:Application_Init: ste evento se dispara cuando una aplicacin es inicializada o la primera vez que es llamada. Esto invoca a todas las instancias de objetos de tipo HttpApplication.Application_Start: Se dispara cuando se ha creado la primera instancia de la clase HttpApplication. Esto permite crear objetos que son accesibles a las todas las instancias de HttpApplication.Application_Disposed: La cual se dispara justo antes de que una aplicacin sea destruida. Este mtodo es ideal para limpiar anteriormente recursos que fueron utilizados.Application_Error: Cuando una excepcin no controlada ocurre en la aplicacin. Muy funcional cuando se desea controlar errores del tipo CodeError.Application_End: Se dispara cuando la ltima instancia de la clase HttpApplication es destruida. Este mtodo es solamente lanzado una vez durante la vida de la aplicacin.Entre otrasAhora que ya se conocen las partes principales de un proyecto MVC, hacemos clic sobre el botn para ejecutar la aplicacin. Como puede verse podeis elegir entre utilizar vuestro navegador por defecto o alguno de los que tenga instalados en su equipo. En ste caso se har uso de Google Chrome, pero funcionara igual de bien en los navegadores como Mozilla Firefox, Internet Explorer, Opera, Safari, etc.

Imagen12: Iniciando el proyectoLa pgina de bienvenida ser la siguiente:

Imagen13: Pagina de bienvenidaPodis modificar las Vistas a vuestro criterio para darle vuestros toques personales.

Imagen14: Pgina de LoginSi os movis por la web, tendris acceso a la zona deLogin, la cual es una zona muy peculiar, ya que hasta el momento estaba declarada la localizacin de la base de datos, sin embargo en realidad no se haba creado, por lo que tras el primer ingreso a dicha pgina se generar automticamente la base de datos del sitio web en el destino especificado en elWeb.Config.(Lo mismo pasara con la Vista Register)En nuestro caso:connectionString="Data Source=(LocalDb)\v11.0;Initial Catalog=aspnet-MiPrimeraAplicacionWebMVC4-20130624184706; Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnet-MiPrimeraAplicacionWeb MVC4-20130624184706.mdf"providerName="System.Data.SqlClient"Para verlo un poco mejor se puede hacer uso de SQL Server Management Studio.

Imagen15: BBDD de la aplicacin desde SQL Management Studio 2008 R2Ahora solo quedara registraros en la aplicacin (http://localhost:xxxxx/Account/Register)

Imagen16: Registrando un usuario en la aplicacinY estaris navegando como usuarios autenticados en el sistema.

Imagen17: Navegando en la aplicacin como usuario autenticadoEn el prximo post se har hincapi en la sintaxisRazor, para posteriormente que sea mas fcil explicar la comunicacin entre controladores y vistas,ademas de transmitir de mejor manera la formas que MVC 4 tiene para el acceso a base de datos

Parte 3En el anterior post Desarrollo de Aplicaciones Web con ASP .Net MVC4: La primera aplicacin ASP.NET MVC se empez con el esquema de presentacin donde se muestran cada uno de los elementos presentes en un proyecto web ASP.NET MVC4, en sta oportunidad se va a ir ms all explicando algo ms sobre Razor.Para empezarQu es Razor?Razores un motor de vistas, implementado desde MVC 3 con el que podemos generar vistas, ms claras, ms sencillas e intuitivas incluyendo en su estructura cdigo de programacin de alto nivel. Dicho de otra forma, mediante el uso deRazorse podr insertar cdigo de servidor en nuestras vistas.Otros motores de vista populares en ASP.NET MVC utilizan hoy en da incluyenSparkyNHaml.Qu caractersticas se podran destacar de Razor como motor de vistas?Razorha evolucionado desde MVC 3 a MVC 4, y es muy probable que lo siga haciendo en el prximo MVC 5, sin embargo sigue con unas caractersticas comunes que se han ido acentuando conforme ha ido creciendo el nivel de desarrollo del motor. Compacto, expresivo y fluido:Razorminimiza el nmero de caracteres presentes en un cdigo fuente, permitiendo un flujo de trabajo rpido y elegante. Por otro lado no es necesario interrumpir su codificacin de la vista para indicar explcitamente los bloques de servidor dentro de su HTML, es decir, se puede mezclar, cdigo servidor y cdigo cliente, y siempre quedarn identificadas ambas partes ya que el analizador es lo suficientemente inteligente para deducir esto.Esto permite una sintaxis muy compacta y expresiva que adems es limpio, rpido y divertido de escribir. Fcil de aprender:Razores fcil de aprender y le permite ser productivos rpidamente con un mnimo de conceptos.Utiliza todo tu idioma existente y conocimientos de HTML. Adems tiene cierto parecido a la sintaxis ASP clsico. No es un nuevo lenguaje:Los desarrolladores podrn utilizarRazorcon su lenguaje de programacin. Compatibilidad con Intellisense:Razorha sido diseado para no requerir una herramienta especfica o un editor de cdigo(Puede usarse el bloc de notas para dar inicio con la creacin de la vista), sin embargo cuenta con el apoyo de Intellisensede Visual Studio para la finalizacin de instrucciones Compatible con Test Unitarios:En un entorno de desarrollo es imprescindible el tema de creacin de test unitarios, para dotar de seguridad y fiabilidad a nuestro desarrollo software, por lo que se puede decir que se puede usar perfectamente Razor en entornos de pruebas o test unitarios.Para tener una breve primera toma de contacto con Razor, se cree necesario hacer una ligera regresin en el tiempo y mostrar algo que todas aquellas personas que hayan iniciado el estudio de un lenguaje de programacin recordarn con nostalgia. Casi con toda seguridad la primera aplicacin que realizaron, tanto aplicacin de escritorio como web el muy querido por todos Hola Mundo, donde se empezar la creacin de una pgina web HTML esttica (o cualquier contenido textual) y luego hacerlo dinmico mediante la adicin de cdigo de servidor a la misma.

Imagen1: Creacin de la vista HolaMundo, especificando el Motor de Vistas RazorDentro de la vista creamos contenido esttico, es decir, que su contenido permanecer igual a lo largo del tiempo, ya que no tiene interaccin con algn elemento del servidor.

Imagen2: Hola Mundo de forma estticaLo cual genera la vista:

Imagen3: Resultado de la ejecucin de la vistaAhora se modificar la vista incluyendo elemento con Razor:

Imagen4: Vista dinmica de Hola MundoComo se puede ver, al inicio se ha cambiado el valor de ViewBag.Title (elemento del que hablaremos en la siguiente entrega) el cual es utilizado para modificar el valor de la etiqueta correspondiente al nombre que parecer en la pestaa del navegador donde se ejecute la web.Despus tambin se definir una hora local haciendo uso Datetime.Now, despus tambin se genera una cadena que corresponda al nmero de segundos, si el nmero es menor de 10 se aadir un cero a la izquierda, en caso contrario se pondr el numero tal cual (Esto asegurar que los segundos sean representados con dos dgitos.)Por ultimo unimos ambos elementos en una sola cadena de texto usando la funcin Format que proporciona la clase String. Vase que se est generando informacin dentro de la propia vista, sin necesidad de interaccin con el controlador ni con un modelo, por lo que puede ser muy til para asegurar rapidez y flexibilidad en el cdigo, siempre que no comprometa la seguridad del proyecto.

Imagen5: Resultado de la vista dinmicaAlgo que tambin puede llamar la atencin es el mbito de validez, es decir, se ve claramente que Razor busca el carcter @ para empezar a trabajar, sin embargo si se le aade el carcter } le indicar al motor de vista que los sentencias siguientes se considerarn como un solo bloque de cdigo independiente pero disponible en todo el cdigo, hasta que encuentre el carcter de cierre }Por ello que abajo se ve @String.Format("{0}:{1}",dt.ToShortTimeString(),segundos), donde el motor es capaz de identificar las declaraciones anteriores como bloques de cdigo independientes para poder usarlas en esa lnea. Adems como la sentencia solo se compone por una lnea, el motor es capaz de saber dnde empieza y donde acaba el bloque de cdigo por lo tanto no hace falta delimitar con { y }, ya que Razor lo interpretar por nosotros.Declaracin de bucles.Ahora piense en la situacin donde quiere enumerar un conjunto de datos con relacin entre ellos. Por ejemplo el precio por unidad de un producto en especial Un ordenador porttil = 600. Se generar una pgina HTML con el precio segn el nmero de equipos comprados.El siguiente cdigo:

Imagen6: Implementacin esttica de la lista de ventaPuede reducirse al siguiente cdigo usando Razor.

Imagen7: Implementacin dinmica usando RazorAmbas implementaciones de la vista darn como resultado:

Imagen8: Resultado visual de ambas vistasSentencias condicionalesEn el cdigo anterior se va a aadir sentencias condicionales para ver su implementacin y funcionalidad. En ste caso se quiere hacer un descuento de un porcentaje sobre la cantidad total a facturar teniendo en cuenta el nmero de porttiles a comprar, y dicho descuento va desde el 5 al 15 %. Siguiendo el criterio (nmero de porttiles + 2)% con un mnimo de 3 porttiles comprados. El proceso sera muy largo de escribir de forma esttica ya que tendramos que llegar a 13 lneas para llegar al 15% sin embargo usando Razor la cosa se simplifica.

Imagen9: Implementacin de la lista de ventas ampliada usando RazorComo se puede ver, se han anidado dos sentencias IF para separar a las compras de menos de dos elementos, y las que superan el 15% de descuento, ya que si no sera fcil comprar 98 ordenadores y beneficiarnos de un 100% de descuento (por ello se limit a un mximo de 15% de descuento)El navegador devolver lo siguiente.

Imagen10: Vista donde se ve la lista de ventas ampliada con los descuentosEn la siguiente entrada se hablar sobre el uso de Razor para definir secciones de plantillas, para hacer un uso de ellas de forma similar como lo haramos con una MasterPage en ASP.NET Web Forms.

Parte 4Continuando con sta dilatada serie se va a bordar un poco ms en profundidad las capacidades que ofrece Razor utilizando los conceptos de ASP.Net Web Forms. En este caso se hablar sobre el uso de Razor para simular el uso de pginas maestras o mejor conocidas como Master Pages.Para quienes no conozcan el significado de las Master Pages, se puede comentar que Microsoft lo presento desde su versin ASP.NET 2.0 permitiendo el desarrollo de pginas web mediante plantillas, es decir, que mediante el uso de stas plantillas los usuarios no solo evitarn escribir repetidas veces fragmentos de cdigo HTML que se repite en muchas pginas de su proyecto web, sino que tambin compartirn hojas de estilos y cdigo Javascript definidas en la pgina maestra.Ahora la plantilla padre proporcionar el esqueleto para las paginas hijas y dichos hijos aadirn elementos a la plantilla mas no podrn modificar al padre.Para verlo de forma prctica, se mostrar la pgina de Windows Tcnico, donde se identificarn las secciones que se suelen repetir en cada visualizacin de un post.

Imagen1. Estructura de Windows TcnicoEntonces podra considerarse que usa una plantilla o pgina maestra que, sin contenido, sera similar al siguiente.

Imagen2: Plantilla pensada para Windows TcnicoLas pginas hijas solo rellenaran el espacio donde no aparece informacin.Es un uso habitual en muchos, foros, blogs, y pginas web donde hay secciones con mens de redireccin o elementos de publicidad, entre otros motivos.Ahora se volver al cdigo de la aplicacin de prueba que se ha venido utilizando desde el primer post, llamada MiPrimeraAplicacionWebMVC4 y sera bueno dirigirse a la plantilla que viene por defecto definida para la vista Home llamada _Layout.cshtml donde se comentarn los elementos ms interesantes.

Imagen3: Cdigo de la plantilla "_Layout.cshtml"Como se puede ver, la plantilla tiene el cdigo principal del esqueleto de la pgina web, es decir, desde las etiquetas, ,,entre otros, como una ligera divisin en secciones segn el diseo que se haya elegido.En color azul se puede ver una renderizacin hacia el Body (Render en ingls), es decir, se espera que dicha etiqueta@RenderBodysea sustituida por el cuerpo de la pgina hija, de forma que quede construida la pgina resultante por la mezcla de padre e hijo.En color marrn, mediante la etiqueta@Html.Partialse puede importar un fichero de cdigo fuente, lo cual ser insertado en la plantilla en tiempo de compilacin. Esto proporciona mucha flexibilidad a la hora de diferenciar diferentes secciones y huir un poco de la homogeneidad que sola imponer los MasterPages, de sta forma se puede insertar diferentes secciones desarrolladas por separado y que pueden ser reutilizados donde y cuando el diseador crea conveniente. En este caso donde sera exactamente lo mismo insertar el cdigo mediante@Html.Partial(_loginPartial.cshtm)que escribir directamente el prximo cdigo.

Imagen4: Pgina que ser incluida directamente en la plantillaEn color verde se muestran las interpretaciones de rutas de cdigo. ste tipo de cdigo es bastante interesante, ya que no se puede incluir una definicin de rutas directamente en ste cdigo, sino que debe recurrirse al fichero BundleConfig.cs donde se definirn unas etiquetas que definirn las rutas absolutas a los ficheros que se deseen importar.

Imagen5: Fichero BundleConfig.csDentro del cdigo se puede ver lo siguiente.

Imagen6: Contenido del fichero BundleConfig.csComo se mencionaba antes, en sta clase se definen unas etiquetas, que por lo general tienen un parecido a las rutas absolutas solo para identificar hacia donde se est apuntando.En este caso, ~/Content/css apuntaa la direccin absoluta ~/Content/site.css, as tambin ocurre con las dems renderizaciones presentes en el cdigo y marcadas de color verde.Por ltimo, de color rojo y de forma similar a como ocurre con@Html.Partial, @RenderSectionintroduce dentro del cdigo fuente del padre una seccin que en sta ocasin se definir en el hijo (pgina que har uso de una plantilla padre). sta etiqueta tiene una propiedad llamada Required que define si es obligatorio implementarlo en cada hijo que haga uso de la plantilla, en caso contrario queda como uso totalmente opcional.Para rellenar dicha etiqueta habr que hacer una referencia a dicha seccin en cualquier parte del cdigo.

Imagen7: Referencias a una seccin para comprobar el uso de @RenderSectionComo se ve, se hace una llamada a la seccin Scripts donde se le est agregando una referencia a un script de la misma forma que ya se ha explicado con anterioridad, adems aqu el usuario podra definir sus propios scripts para poder incrustarlos en la pgina maestra.La apariencia de la vista ser la siguiente:

Imagen8: Vista de administracin de cuenta.Y en su cdigo fuente se ver en la parte inferior:

Imagen9: Cdigo fuente por detrs de la vista.Puede comprobarse arriba que la plantilla renderiza a ~/bundles/jqueryval y para comprobar si realmente incluye lo que debe incluir podis dirigiros al fichero BundleConfig.cs donde se ve que dicha etiqueta incluye los archivos ~/Scripts/jquery.unobtrusive* y ~/Scripts/jquery.validate* haciendo uso de * como si de un comodn se tratase, dirigindose a la carpeta raz, luegoa la carpeta Scripts y seleccionando los ficheros que cumplan con dichas caractersticas (no se suelen coger las versiones reducidas, sino las versiones completas, si ambas estn disponibles en dicha carpeta)

Una cosa que es muy importante mencionar es que no es sensible a casos, ya que si en la plantilla se define un@RenderSectionllamadoscriptssi en el usuario referencia a la seccin Scripts (con la primera letra en maysculas) Razor reconocer que se quiere hacer referencia a la seccin scripts definida en la plantilla. Sin embargo si el usuario escribe@section Scriptgenerar un error, ya que no hay definido ningn @RenderSectionllamado Script en singular.Hay que tener especial cuidado con eso, ya que es un error muy comn y que lleva a roturas de cabeza hasta ver tan pequeo error.Por ultimo mencionar que todas las vistas incluidas en el proyecto tienen como plantilla predeterminada la que viene dentro del fichero_ViewStart.cshtmlsin embargo, cada usuario puede definir sus propias plantillas.Para definir que una vista est afectada por una plantilla, en la parte inicial de la vista se debe declarar la misma de la siguiente manera:@{Layout ="~/Views/Plantillas/MiPlantilla.cshtml";}De sta manera se sobrescribir la plantilla predeterminada por la que acaba de establecer el diseador.En la prxima entrada se proporcionarn las vas por las que Razor realiza la creacin de formularios, validacin en servidor y muchas ms ventajas que ofrece Razor a la programacin orientada a web.

Parte 5Unos de los usos ms extendidos a la hora de utilizarRazoren MVC son para la realizacin de formularios, los cuales con el uso de ste motor se simplifican bastante.Por ello va a ser necesario tener primero creado un modelo, el cual va a servir para tener definida una estructura a la hora de generar el formulario, es decir, el formulario se va a crear en concordancia al modelo.El mtodo de creacin de un modelo es el mismo que crear una clase en cualquier proyecto Visual Studio .NET:

Imagen1: Insertar un nuevo modelo en el proyectoEn ste caso se crear una clase persona, que representar a una instancia de persona con la que se interactuar.

Imagen2: Creacin del modelo como una clase simpleEntre los atributos que contendr dicha clase se encuentran los datos personales de una persona comn, de momento, sin ninguna restriccin, salvo el tipo de elemento (cadena de caracteres, nmero, etc.).

Imagen3: Definicin de la clase PersonaAhora que ya se tiene el modelo se puede proceder a crear un formulario, y la forma habitual de hacerlo usandoRazorse hara de la siguiente forma.Imagen4: Formulario comn con razorEl uso del HtmlHelper@Html.BeginForm()da inicio al formulario y se cierra automticamente al final del mbito ( { y }). Como puede verse, cada elemento o input se genera a travs de un textbox y tiene un elemento de validacin, la cual se va a explicar, ms adelante.Solo de modo ilustrativo, los label tambin pueden ser creados mediante HtmlHelpers y sera algo como@Html.Label(nombre del label)Para dar aun un poco ms de profundidad en el uso deRazor, y la validacin en servidor (o tambin conocida como validacin remota)se va a usar el modelo creado anteriormente para dar forma al formulario, de tal forma que el desarrollador no olvide ningn campo, tras lo cual el formulario quedar de la siguiente manera.

Imagen5: Formulario ajustado a un modeloComo puede verse, al inicio con@modelse incluye una referencia al modelo que se va a utilizar a lo largo de la vista, sin embargo, si desea utilizar ms de un modelo en la misma vista tendr que volver a declarar el objeto@modelcon la nueva referencia al modelo a continuacin, de sta forma se pierde la referencia al anterior modelo y se establece el nuevo.Como la interpretacin del cdigo HTML sigue un modelo secuencial, desde la parte superior hacia la inferior, puede tenerse tantos modelos como se quieran, trabajar con el modelo y posteriormente cambiarlo para realizar otra accin. Todo al gusto y necesidad del programador.Volviendo al punto anterior, como se pretende realizar una validacin remota, hay que enviar los datos hacia el servidor para que realice la comprobacin sobre las restricciones aplicables a cada campo del formulario, por lo que ser mejor diferenciar entre una peticin por GET (sin parmetros por ejemplo, cuando cargamos la pgina por primera vez) y la peticin POST con todos los datos del formulario. Como puede verse, ste formulario enva los datos al mtodo Formulario delcontrolador EjemploController (Al mencionar Ejemplo como nombre de controlador, implcitamente ir a buscar al controlador llamado Ejemplo concatenado con la palabra Controller).Como la primera vez que se entre en el formulario, la peticin se enva sin parmetros, la ejecucin ir porGET, utilizando la primera funcin.Por el contrario, si el formulario enva datos, son tratados cada uno de ellos como un parmetro a la hora de realizar una llamada a la funcin Formulario de dicho controlador, sin embargo, aqu se ve algo interesante llamadoModelBinding.

Imagen6: Parte del controlador relacionada a la vista FormularioEsto quiere decir que mientras de forma general, el controlador podra esperar cada uno de los argumentos para ejecutar correctamente la accin (Algo similar a lo siguiente):

Imagen7: Accin Formulario sin ModelBindingLo que hace es esperar un objetoPersonaque, como ya se ha visto anteriormente es un objeto que contiene las mismas caractersticas que la peticin anterior. Tras lo cual, si se ejecuta la aplicacin y se navega hacia la vista se podr ver el formulario creado.

Imagen8: Vista grfica del formularioSin embargo, siempre se puede mejorar. Para esto se va a recurrir a tres aspectos importantes:Anotaciones sobre el modelo:

Imagen9: Clase Persona aadindole anotaciones para realizar validacin en servidorSer necesario incluir la referencia haciaSystem.ComponentModel.DataAnnotationspara aadir las etiquetas que servirn para exigir al controlador que tenga un determinado nmero de caracteres, exigir que no sea nulo, cumpla con una expresin regular (muy til para validacin de correos electrnicos).Entre los ms utilizados estn los siguientes:RegularExpressionAttribute: Con esto se exige que la entrada String cumpla con un determinado formato que debe cumplirse de forma obligatoria ya que en caso contrario el servidor lo dar como invalido. Muy til para evitar que los usuarios introduzcan caracteres que no deben, como puede ser el caso de un intento de XSS o SQL Injection.Ejemplo:[RegularExpression(@"^[a-zA-Z''-'\s]{1,40}$", ErrorMessage ="Caracteres invlidos.")]public String Nombre;RequiredAttribute: Exige que la entrada sea diferente de null o vaco, con lo que si el campo se enva sin datos generar un mensaje de error. Puede verse su uso en la clase Persona que se encuentra en la imagen anterior.DataTypeAttribute: Exige que un elemento sea de un determinado tipo en el caso de que sea necesario, por ejemplo un email, aunque puede entenderse que por debajo utiliza una expresin regular para determinar cul es correcta y cual no, en la lista posterior se pueden ver los tipos ms comnmente utilizados.oEmailAddressAttribute: Que sea de tipo correo electrnico.oFileExtensionsAttribute: Que coincida con una extensin de fichero.oCreditCardAttribute: Que tenga la forma de una tarjeta de crditooPhoneAttribute: Que tenga el formato de un nmero de telfono.StringLengthAttribute: Establece una longitud exacta de la cadena de caracteres.MinLengthAttribute: Establece una longitud mxima de la cadena de caracteres.MaxLengthAttribute: Establece una longitud mnima de la cadena de caracteres.La validacin en servidor tomar como error tambin si se le pasa como datos un elemento invalido, por ejemplo, cuando se espera un nmero entero y se le pasa una cadena de caracteres, o cuando espera una fecha y se le pasa algo diferente o mal formado, etc.

Imagen10: Vista de reaccin frente a errores de entrada en la vistaSi el desarrollador desea realizar una accin cada vez que un usuario introduzca mal los datos en el formulario, en el controlador, se puede comprobar a travs del objeto ModelState y su propiedad IsValid. Por ejemplo, si un usuario se equivoca al ingresar los datos puede redirigrsele a una pgina de error o a un lugar de ayuda, e incluso lanzar una alerta, todo al gusto del programador.

Imagen11: Comprobacin si el modelo enviado por la vista cumple los requisitos para ser considerado validoEn el prximo post se explicarn los Helpers, listas desplegables y se terminar con la parte de iniciacin en el motor de vistas Razor.

Parte 6

Como se comentaba en elanterior post, se terminar con la introduccin aRazor, presentando temas muy tiles como losHelpersy las listas desplegables.HelpersLos Helpers, o como su traduccin en espaol sera Ayudadores son elementos de apoyo para encapsular acciones dentro de la vista, como si de una funcin en la parte del servidor se tratase. Para ver un ejemplo sencillo se ha creado unHelperllamado fila, el cual recibir un nombre para la etiqueta y un determinado contenedor para el Texbox, y con ello generar una fila con dos columnas, donde la primera columna tendr el nombre del campo (label) y la siguiente tendr un campo de texto. En la imagen se pueden ver cmo se puede sobrecargar dependiendo el tipo de campo de texto que se quiera insertar, un campo que espere un nmero entero o un campo que espere una cadena de texto.

Imagen1: Definicin de Helpers y uso dentro de una tablaComo se ve, en el cdigo de la vista propiamente dicha se genera una tabla y utilizando elHelper filase ir insertando las filas que se crean necesarias, en lugar de escribir una tabla enorme con cada fila y sus respectivas columnas.Listas desplegablesMuchas veces es necesario realizar una lista desplegable para dar un conjunto limitado de posibles valores que puede tomar un campo. En cdigo HTML es sencillo colocar un Select esttico con un nmero determinado de valores.Sin embargo, queda un poco feo que en un desarrollo se introduzcan elementos estticos y cada vez que se tenga que modificar los contenidos de las listas se haga de forma manual.Una forma sencilla de colocar una lista desplegable sera creando una lista normal con Razor, darle valores, y posteriormente con el@Html.DropDownList

Imagen2: Creacin de una lista y enlazarla con el desplegable.De forma grfica el cliente ver lo siguiente:

Imagen3: Resultado grafico de una lista desplegable simple.Y en el cdigo fuente se ve queRazorhar elSelect HTMLpor nosotros.

Imagen4: Cdigo fuente de la lista desplegable simpleDe una forma ms tcnica, y teniendo en cuenta que cuando se enva al controlador lo que l recibe es una tupla de datos [nombre, valor], se proceder a crear unEnumerablecon los elementos que se pueda mostrar. Se har uso de la claseSelectListItempara situar los tems dentro de la lista desplegable.

Imagen5: Clases para la generacin de la lista desplegable comnEn el controlador se crear una accin llamada FormularioDesplegable que crear una lista de elementos del tipoSelectListItem, el cual tendr el primer elemento seleccionado. Como ltima accin crear una instancia de la clase Lista,se le dar valor al atributo Marcas y finalmente se devolver a la vista dicho objeto.

Imagen6: Accin dentro del controlador que crear la lista desplegable haciendo uso de las clases anterioresLo nico que quedara ahora es que en la vista de aadiera la siguiente lnea:@Html.DropDownListFor(model => model.Marcas, Model.Marcas)La forma que el controlador devuelve informacin a la vista ser vista en el prximo post.Visualmente se observar lo siguiente:

Imagen7: Visualizacin del formularioY el cdigo cuente presentar la siguiente estructura, con el campo valor establecido en cada etiqueta option. Ahora cuando el usuario seleccione una de las opciones el controlador recibir el valor deseado.

Imagen8: Cdigo fuente tal cual debera ser.Por ltimo sera bueno mencionar que Visual Studio permite una gran integracin con el motorRazory su herramienta de autocompletadoIntellisensecon el cual ser mucho ms fcil acceder a los elementos de cada objeto creado conRazor, as como a los Helper o funciones disponibles.

Imagen9: Utilizar Intellisense con RazorEn la prxima entrada se har referencia a la comunicacin entre controlador y vista, as que de momento ya podis ir practicando a realizar vuestros propios formularios y enviar datos al controlador. Cualquier duda o sugerencia ser recibida y respondida tan pronto sea posible para que el desarrollo de ste extenso tutorial sea lo ms didctico y dinmico posible. Si se hacen referencia a elementos interesantes relacionados con Razor en las posteriores entradas se aadir una referencia en sta entrada para que sea fcil acceder a ellas.