Manual Framework ASP Net

download Manual Framework ASP Net

of 27

Transcript of Manual Framework ASP Net

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Manual del framework ASP.NET MVCManual dedicado al framework de ASP.NET MVC, basado en el patrn Modelo - Vista Controlador, para el desarrollo de aplicaciones web con tecnologas Microsoft.

Autores del manualEste manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:Eduard Toms

Technology Specialist en raona http://geeks.ms/blogs/etomas (8 captulos)

Manual del framework ASP.NET MVC: www.desarrolloweb.com/manuales/framework-asp-net-mvc.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

1

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Introduccin a ASP.NET MVCASP .NET MVC es el nuevo framework que ha sacado Microsoft para desarrollar aplicaciones web, usando tecnologa .NET. Lo de nuevo entre comillas, viene porque la primera versin sali, aproximadamente, a mediados del 2009 y ya sabemos que en este mundo, casi dos aos son una eternidad. De hecho, actualmente el framework ya va por su tercera versin y es esa tercera versin la que vamos a ver en esta serie de artculos. ASP.NET MVC 3.0 permite el desarrollo de aplicaciones web usando .NET Framework 4.0 y Visual Studio 2010. No puede usarse Visual Studio 2008 aunque s la versin Express (gratuita) de Visual Web Developer. ASP.NET MVC 3.0 no viene de serie, ni con Visual Studio 2010 ni con Visual Web Developer 2010. Puede instalarse usando Web Platform Installer o bien descargndolo desde http://www.microsoft.com/downloads/en/details.aspx?FamilyID=d2928bc1-f48c-4e95-a0642a455a22c8f6&displaylang=en

Sustituye ASP.NET MVC a ASP.NET?Esta es una de las primeras preguntas que se realiza mucha gente cuando oye a hablar por primera vez del Framework. La respuesta es un rotundo no, y por dos razones principales: 1. ASP.NET MVC est construido usando ASP.NET. Todos los aspectos transversales de ASP.NET (autenticacin, cache, sesin, roles,) siguen siendo los mismos en ASP.NET MVC. 2. Si a algo puede sustituir ASP.NET MVC es a Webforms, es decir a las pginas .aspx. Pero Microsoft ya ha anunciado que esto no suceder: ambos frameworks (ASP.NET MVC y Webforms) se seguirn evolucionando. As pues si has invertido tiempo en conocer y dominar Webforms, estate tranquilo: ese conocimiento sigue siendo vlido. De todos modos yo te animo a que eches un vistazo a ASP.NET MVC y luego decidas cul de los dos frameworks te gusta ms para el desarrollo de aplicaciones web usando .NET.

El Patrn Modelo - Vista - Controlador (MVC)ASP.NET MVC es, bsicamente, una implementacin del patrn Modelo - Vista - Controlador (MVC) para tecnologa ASP.NET. El patrn MVC no es ni nuevo (data de finales de los aos 70) ni est pensado para aplicaciones web, pero en realidad en aplicaciones web encaja perfectamente. Brevemente podemos decir que el patrn MVC separa la lgica (y acceso a datos) de una aplicacin de su presentacin, usando 3 componentes: 1. Modelo: Representa las reglas de negocio de la aplicacin (y el acceso a datos subyacente). 2. Vistas: Representan la presentacin de la aplicacin. 3. Controlador: Actan de intermediario entre el usuario y el Modelo y las Vistas. Recogen las peticiones del usuario, interaccionan con el modelo y deciden que vista es la que debe mostrar los datos. En el contexto de ASP.NET MVC: Toda la lgica de negocio y el acceso a datos es el Modelo (en muchos casos el Modelo puede estar en uno o varios assemblies referenciados). Las vistas contienen, bsicamente, el cdigo que se enva al navegador, es decir el cdigo HTML (y cdigo de servidor asociado, siempre y cuando este cdigo haga cosas de presentacin, no de lgica de negocio). Los controladores reciben las peticiones del navegador y en base a esas, deciden que vista debe enviarse de vuelta al navegador y con qu datos.

Manual del framework ASP.NET MVC: www.desarrolloweb.com/manuales/framework-asp-net-mvc.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

2

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Ventajas de ASP.NET MVCLa ventaja que primero salta a la vista de ASP.NET es la facilidad con la que se generan URL semnticas, es decir URL que tengan la forma http://servidor/ver/productos/cafeteras en lugar de http://servidor/productos/ver.aspx?code=cafeteras. Las URLs semnticas se indexan mejor en los buscadores y son una prctica SEO habitual. No es que en webforms no se puedan hacer, es que en ASP.NET MVC vienen de serie. Otras ventajas, ms a nivel tcnico, son que con ASP.NET MVC se facilita mucho el probar nuestra aplicacin (especialmente usando pruebas unitarias) y que el uso correcto del patrn MVC facilita la reutilizacin de cdigo de manera mucho ms efectiva que en webforms. Por supuesto, todo esto tiene un precio: la curva de aprendizaje de ASP.NET MVC puede ser ms alta que la de webforms, especialmente si nunca has desarrollado para web. A diferencia de webforms, que te abstrae de HTTP y HTML, ASP.NET MVC est "mucho ms cerca de la web", lo que hace necesario conocer HTTP, HTML y Javascript para trabajar con l. De todos modos eso no debera echarte para atrs: si quieres crear aplicaciones web es normal que debas conocer los protocolos y lenguajes en los que se asenta la web, no? A lo largo de esa serie de artculos, que vamos a publicar en el Manual de ASP.NET MVC, iremos viendo cmo desarrollar una aplicacin ASP.NET MVC, usando la versin 3.0 del framework.Artculo por

Eduard Toms

Manual del framework ASP.NET MVC: www.desarrolloweb.com/manuales/framework-asp-net-mvc.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

3

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

La primera aplicacin ASP .NET MVCVamos a ver cmo paso a paso realizar el, ya tpico, Hola Mundo usando ASP .NET MVC.

Creacin del proyectoUna vez instalado ASP.NET MVC 3, nos aparece un nuevo tipo de proyecto en Visual Studio: ASP.NET MVC 3 Application:

Le damos el nombre que queramos (en este caso MvcHelloWorld) y el directorio donde se va a generar y listos. En el siguiente paso nos preguntar si queremos una aplicacin "Emtpy" o "Internet Application", y seleccionamos "Empty". La diferencia es que en el segundo caso ya se nos genera un conjunto de controladores y vistas por defecto, y ahora este cdigo nos liara ms que ayudara as que vamos a obviarlo. Con "Empty" empezamos con una aplicacin ASP.NET MVC vaca. El desplegable "View Engine" tiene dos valores: Razor y ASPX. Esto hace referencia a la tecnologa con la cual se implementan las vistas. Si seleccionamos ASPX nuestras vistas sern archivos .aspx, mientras que si usamos Razor nuestras vistas sern archivos .cshtml (o .vbhtml si usamos Visual Basic). Razor es una sintaxis nueva mucho ms compacta que ASPX y es, por tanto, la que vamos a usar nosotros.

Manual del framework ASP.NET MVC: www.desarrolloweb.com/manuales/framework-asp-net-mvc.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

4

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Finalmente le damos a "Ok" y eso nos va a crear nuestro proyecto vaco.

Estructura de un proyecto ASP.NET MVCIncluso en una aplicacin vaca, Visual Studio nos habr creado varias carpetas, y algunos archivos:

Manual del framework ASP.NET MVC: www.desarrolloweb.com/manuales/framework-asp-net-mvc.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

5

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

ASP.NET MVC sigue lo que se conoce como convention over configuration, es decir: en lugar de usar archivos de configuracin para ciertas tareas, se usan convenciones predefinidas. Y esas convenciones son reglas como las siguientes: 1. Las vistas se ubican en la carpeta View 2. Los controladores son clases cuyo nombre termina en Controller Las carpetas que nos crea Visual Studio por defecto son las siguientes: 1. 2. 3. 4. 5. Content: Para tener contenido esttico (imgenes, hojas de estilo, ) Controllers: Para ubicar nuestros controladores Models: Para ubicar las clases del modelo. Scripts: Para tener archivos con cdigo javascript Views: Donde van las vistas de la aplicacin

Creacin del controlador y de la accinVamos a crear un controlador que se encargue de recibir la peticin del navegador (y que devuelva la vista que diga "Hola Mundo"). Para ello click con el botn derecho sobre la carpeta "Controllers" y seleccionar Add ' Controller. Visual Studio nos preguntar el nombre del controlador:

Podemos ver que por defecto el nombre termina con Controller. Modificamos para que en lugar de Default1Controller sea HomeController y le damos a Add. Eso nos crear una clase HomeController en la carpeta Controllers con el cdigo:public class HomeController : Controller { //

Manual del framework ASP.NET MVC: www.desarrolloweb.com/manuales/framework-asp-net-mvc.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

6

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com// GET: /Home/ public ActionResult Index() { return View(); } }

Cosas que debemos observar: 1. La clase deriva de Controller 2. Tiene un mtodo pblico que devuelve un ActionResult y que se llama Index. Esto es una accin. Cualquier mtodo pblico de un controlador es por defecto una accin. En ASP.NET MVC toda peticin del navegador debe ser enrutada a una peticin (mtodo pblico) de un controlador. Por defecto se sigue la convencin de que las URLs estn en la forma http://servidor/controlador/accion. Es decir, para invocar la accin Index, del controlador Home, usaremos la URL: http://servidor/Home/Index. Fijaos en un detalle importante: la clase se llama HomeController pero el nombre del controlador es Home (sin Controller)

Creacin de la vista asociadaEl cdigo de la accin que genera Visual Studio (return View();) lo que hace es devolver la vista asociada a dicha accin. Y aqu debemos tener presente otra convencin de ASP.NET MVC. Como se ha dicho antes las vistas cuelgan de la carpeta /Views. Por defecto, las vistas de un controlador: 1. Estn en una subcarpeta con el nombre del controlador 2. Se llaman igual que la accin Es decir, la vista de la accin Index del controlador Home, estar en la carpeta /Views/Home y se llamar Index. As pues creamos la carpeta (Add New Folder) Home dentro de Views y para aadir la vista, click con el botn derecho sobre la carpeta recin creada en el Solution Explorer y Add ' View. Eso nos despliega el dilogo de nueva vista:

Manual del framework ASP.NET MVC: www.desarrolloweb.com/manuales/framework-asp-net-mvc.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

7

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Le ponemos "Index" como nombre y le damos a Add. Con eso Visual Studio nos habr generado un archivo Index.cshtml (situado en /Views/Home) con el cdigo:@{ ViewBag.Title = "Index"; } Index

Ahora modificamos el cdigo HTML para aadir el Hello World:@{ ViewBag.Title = "Index"; } Index Hola mundo. Saludos desde ASP.NET MVC

Manual del framework ASP.NET MVC: www.desarrolloweb.com/manuales/framework-asp-net-mvc.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

8

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Y listos! Con esto ya tenemos nuestra aplicacin lista. Para probarla basta ejecutarla (con F5) y comprobar los resultados:

Un ltimo detalle: Si os fijis la URL es simplemente http://localhost, sin nada ms y se est mostrando nuestra vista. Qu ha ocurrido? Pues que, por defecto si no se incluye controlador se asume que es "Home" y si no se entra accin se asume que es Index. Pero si entramos la URL completa vemos que tambin funciona:

Por otra parte si entramos un nombre de controlador o de accin que no existe, recibimos un 404 (pgina no encontrada):

Manual del framework ASP.NET MVC: www.desarrolloweb.com/manuales/framework-asp-net-mvc.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

9

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Un saludo a todos!Artculo por

Eduard Toms

Pasar datos de los controladores a las vistasEn este artculo vamos a ver como pasar datos desde los controladores a las vistas. Hay tres mtodos (que realmente son dos) principales para pasar datos de los controladores a las vistas. Recordad que segn el patrn MVC, el controlador es quien accede al modelo para obtener los datos y mandrselos a la vista. La vista debe limitarse a mostrar esos datos (o a pedir datos nuevos y mandrselos de vuelta al controlador, lo que veremos ms adelante). Los datos que el modelo proporciona al controlador pueden venir de cualquier fuente (usualmente una base de datos).

Primer mtodo: ViewDataEl primero de los mtodos es el denominado ViewData. ViewData es un diccionario de clave (una cadena) - valor (un objeto) que el controlador pasa a la vista. Un ejemplo de uso de ViewData es el siguiente controlador:public class HomeController : Controller { public ActionResult Index() { ViewData["Nombre"] = "Eduard Toms"; ViewData["Twitter"] = "eiximenis"; return View(); } }

Aqu se define el controlador Home con la accin Index (recordad que las acciones son los mtodos pblicos que reciben las peticiones del navegador). En esta accin establecemos las claves Nombre y Twitter del ViewData y luego devolvemos la vista asociada a dicha accin. Para mostrar los datos en la vista, simplemente usamos la propiedad ViewData que tienen las vistas y que funciona exactamente igual. En este caso, en el cdigo de nuestra vista (archivo Home.cshtml que estara en la carpeta Home dentro de la carpeta Views) tendramos algo como:Index Mi nombre es @ViewData["Nombre"] y puedes seguirme en Twitter.

Fijaos en dos cosas: 1. Para acceder a un valor del ViewData, simplemente usamos ViewData["clave"]. 2. Y muy importante: el uso de la arroba (@) antes de llamar a ViewData. Eso es parte de la sintaxis Razor (que veremos con detalle ms adelante, as que de momento no nos vamos a preocupar mucho de ella). El uso de ViewData tiene dos puntos dbiles que deben tenerse presentes: 1. Las claves son cadenas, por lo que si nos equivocamos el compilador no puede ayudarnos. Tampoco herramientas de refactoring pueden darnos soporte. 2. ViewData["clave"] siempre devuelve un object por lo que debemos ir haciendo casting si queremos obtener el tipo real de lo que hay almacenado. P.ej. En un controlador ponemos el siguiente valor en ViewData:ViewData["FechaAlta"] = new DateTime(2008, 12, 10);

Este valor es un DateTime, no obstante si desde la vista queremos llamar a los mtodos de DateTime (como

Manual del framework ASP.NET MVC: www.desarrolloweb.com/manuales/framework-asp-net-mvc.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

10

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ToLongDateString()) deberemos hacer un casting: Dado de alta en: @(((DateTime)ViewData["FechaAlta"]).ToLongDateString()) Si no hiciramos el casting a DateTime, la llamada a ToLongDateString() generara una excepcin (aun cuando, en efecto, lo que hay en el ViewData["FechaAlta"] es un DateTime).

Segundo mtodo: ViewBagViewBag funciona de forma muy parecida a ViewData. Al igual que ViewData, ViewBag es un diccionario de clave - valor. Pero se aprovecha de las capacidades de programacin dinmica que ofrece C# 4, para en lugar de usar cadenas para especificar la clave, usar propiedades. As, desde una accin podemos hacer:public ActionResult Index2() { ViewBag.Nombre = "Eduard Toms"; ViewBag.Twitter = "eiximenis"; ViewBag.FechaAlta = new DateTime(2008, 12, 10); return View(); }

Fijaos que el cdigo es casi igual al uso de ViewData, solo que en lugar de hacer ViewData["clave"] hacemos ViewBag.clave. Y para recuperarlos desde una vista? Pues igual que antes, podemos usar la propiedad ViewBag:Index2 Mi nombre es @ViewBag.Nombre y puedes seguirme en Twitter.
Dado de alta en: @ViewBag.FechaAlta.ToLongDateString()

Aqu podemos ver la gran ventaja de ViewBag respecto ViewData: no es necesario usar casting. Fijaos que para usar ToLongDateString() no hemos tenido necesidad de convertir el resultado devuelto por ViewBag.FechaAlta a DateTime. Esa es la gran ventaja de ViewBag respecto a ViewData y es por eso que, personalmente, os recomiendo usar ViewBag en lugar de ViewData (de hecho ViewData se mantiene por compatibilidad con las versiones anteriores del framework de ASP.NET MVC). Otra ventaja es que no usamos cadenas sino propiedades para acceder a los elementos, pero ojo, que el compilador no puede ayudaros si accedis a una clave (propiedad) que no existe (al ser las propiedades dinmicas).

Tercer mtodo: Model (tambin conocido como ViewModel)El tercer mtodo para pasar informacin de una accin de un controlador a una vista, es usando la propiedad Model. La propiedad Model no funciona como las anteriores, sino que lo que se pasa es un objeto, que se manda de la accin hacia la vista. A diferencia de ViewData y ViewBag que existen tanto en el controlador como en la vista, el controlador no tiene una propiedad Model. En su lugar se usa una sobrecarga del mtodo View() y se manda el objeto como parmetro:public { public public public } class Usuario string Nombre { get; set; } string Twitter { get; set; } DateTime Alta { get; set; }

public class HomeController : Controller { public ActionResult Index3() { Usuario data = new Usuario(); data.Nombre = "Eduard Toms"; data.Twitter = "eiximenis"; data.Alta = new DateTime(2008, 12, 10); return View(data); } }

Manual del framework ASP.NET MVC: www.desarrolloweb.com/manuales/framework-asp-net-mvc.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

11

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Notemos las diferencias: El controlador crea un objeto de la clase Usuario y manda ese objeto a la vista, pasndolo como parmetro a la funcin View. Y desde la vista? Pues usamos la propiedad Model para acceder a dicho objeto:@model MvcHelloWorld.Controllers.Usuario Index3 Mi nombre es @Model.Nombre y puedes seguirme en Twitter.
Dado de alta en: @Model.Alta.ToLongDateString()

Fijaos que ahora usamos Model para acceder a los datos, en lugar de ViewData o ViewBag. Y una cosa importante: fijmonos en la primera lnea, que empieza con @model. Esa lnea le indica al framework de que tipo es el objeto que la vista recibe del controlador (es decir, de que tipo es la propiedad Model). Por supuesto este tipo debe coincidir con el objeto que se pasa como parmetro a la funcin View en la accin del controlador. Una nota: El uso de @model es opcional, si no lo ponemos, nuestra vista puede seguir usando la propiedad Model, pero en este caso es de tipo dynamic. Eso tiene sus ventajas y sus inconvenientes (volveremos sobre ello en posteriores artculos). Las vistas que declaran @model, se llaman vistas fuertemente tipadas. Usar vistas fuertemente tipadas tiene una ventaja que es que al saber Visual Studio cual es el tipo de la propiedad Model, nos puede proporcionar soporte de Intellisense. Usar este mecanismo es la manera preferida de pasar datos desde una accin a una vista (ya que en lugar de tener datos desperdigados en n claves los podemos tener organizados en una clase). A las clases que se pasan desde las acciones a las vistas (como nuestra clase Usuario) se les conoce tambin con el nombre de ViewModels (para distinguirlas de las clases que conforman el Modelo del patrn MVC, ya que los ViewModels lo nico que hacen es contener datos que mostrar una vista).

Una nota finalAl principio del artculo he comentado que veramos tres mtodos que en realidad eran dos. A que me refera? Pues bsicamente a que ViewBag y ViewData son dos maneras distintas para acceder al mismo conjunto de datos. Es decir, si establecemos el valor de ViewData["Nombre"] podemos leerlo con ViewBag.Nombre y viceversa. De ah que haya comentado que eran tres mtodos, que realmente eran dos. Para ms informacin os recomiendo el artculo de Jos M. Aguilar sobre el tema, que podis leer en: http://www.variablenotfound.com/2010/12/viewbag-en-aspnet-mvc-3.html Un saludo a todos! PD: Comentaros solamente que el cdigo fuente de todos los artculos de esta serie sobre ASP.NET MVC lo podris encontrar en: http://cid-6521c259e9b1bec6.office.live.com/browse.aspx/desarrolloweb-aspnetmvcArtculo por

Eduard Toms

El motor de vistas RazorAnalizamos la sintaxis y sus consideraciones para el motor de vistas Razor en .NET. Desde su versin ASP.NET MVC ha tenido el concepto de motor de vistas (View Engine). A ver, recapitulemos: en ASP.NET MVC las vistas realizan tareas slo de presentacin. No contienen ningn tipo de lgica de negocio y no acceden a datos. Bsicamente se limitan a mostrar datos (en el artculo anterior vimos como pasar datos de los controladores a las vistas) y a solicitar datos nuevos al usuario. Si vienes del mundo de webforms, olvdate del concepto de Web Controls: no existen en ASP.NET MVC. No tenemos drag and drop, no configuramos propiedades. Las vistas son bsicamente HTML. Y lo que no es HTML son pequeas porciones de cdigo de servidor destinadas a terminar generando HTML para mostrar informacin. El equipo que desarroll ASP.NET MVC tuvo la feliz idea de permitir separar la sintaxis de servidor usada, del framework de ASP.NET MVC. El resultado? Lo que llamamos un motor de vistas de ASP.NET MVC. En las versiones 1 y 2, el framework viene con un nico motor de vistas, el llamado motor ASPX, que usa los clsicos archivos .aspx como vistas de ASP.NET MVC. Pero ojo! Aunque estemos utilizando archivos .aspx, no son webforms (los webcontrols no funcionan, no

Manual del framework ASP.NET MVC: www.desarrolloweb.com/manuales/framework-asp-net-mvc.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

12

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com tenemos viewstate ni el ciclo de vida de webforms y adems es que son vistas de MVC, por lo que slo deben hacer tareas de presentacin). La sintaxis que usa el motor ASPX es un poco eso que los anglosajones llaman verbose, es decir que se debe escribir mucho para ciertas tareas. As, imaginad una pgina que tuviese que mostrar una lista de elementos de la clase Usuario (la que usamos en el captulo anterior). El cdigo, usando el motor de vistas ASPX queda as: DemoAspx DemoAspx

Fijaos en la cantidad de veces que debe usarse el tag para indicar dnde empieza y termina el cdigo de servidor. Rpidamente empezaron a surgir motores de vistas alternativos, realizados por la comunidad, con la intencin de tener sintaxis ms claras para nuestras vistas. Algunos ejemplos son Nhaml y Spark. Finalmente la versin 3 de ASP.NET MVC vino acompaada de un nuevo motor de vistas, llamado Razor. Eso s, el motor ASPX puede seguir siendo usado en ASP.NET MVC3, pero honestamente no hay ninguna razn para hacerlo (salvo en casos de migraciones, por supuesto): Razor es ms claro, sencillo e intuitivo.

Sintaxis de RazorLo que ms choca de Razor es que, a diferencia del motor ASPX donde tenemos el tag que inicia el cdigo de servidor y el que lo termina, slo hay tag para iniciar cdigo de servidor. El motor Razor es lo suficientemente inteligente para saber cundo termina el cdigo de servidor, sin necesidad de que lo explicitemos. Veamos la misma vista de antes, pero ahora usando Razor:@model IEnumerable @{ ViewBag.Title = "DemoRazor"; } DemoRazor @foreach (var item in Model) { @item.Nombre @item.Twitter @String.Format("{0:g}", item.Alta) }

Las diferencias saltan a la vista, no? En Razor el smbolo de la arroba (@) marca el inicio de cdigo de servidor. Y como

Manual del framework ASP.NET MVC: www.desarrolloweb.com/manuales/framework-asp-net-mvc.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

13

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com comentaba antes, no hay smbolo para indicar que se termina el cdigo de servidor: el motor Razor deduce cuando termina en base al contexto. Fijaos que para mostrar una variable de servidor (item.Nombre p.ej.) simplemente la precedemos de una @. Fijaos tambin que la llave de cierre del foreach no debe ser precedida de ninguna arroba, Razor ya sabe que esa llave es de servidor y cierra el foreach abierto. El uso de la @ funciona de dos maneras bsicas: 1. @expresin: Renderiza la expresin en el navegador. As @item.Nombre muestra el valor de tem.Nombre. Es decir @expresin equivale a 2. @{ cdigo }: Permite ejecutar un cdigo que no genera salida HTML. Es decir @{cdigo} equivale a

Consideraciones a la sintaxisExpresiones compejas Como hemos visto el motor Razor interpreta cuando empieza y cuando termina el cdigo de servidor. Pero no siempre lo consigue adecuadamente. P.ej, el siguiente cdigo Razor: @{ int a = 10; int b = 3; } El valor de 10 - 3 es: @a-b Genera el siguiente HTML: El valor de 10 - 3 es: 10-b Es decir Razor ha interpretado que el cdigo de servidor terminaba al encontrar el smbolo de resta. En este caso, esa presuncin es totalmente errnea, pero por suerte podemos usar los parntesis para que haya slo una expresin detrs de la arroba: El valor de 10 - 3 es: @(a-b) Con ese cdigo la vista mostrar el valor correcto (7). Recordad la clave: el motor Razor espera una y slo una expresin detrs de la @. Por eso debemos usar los parntesis. "Romper" el cdigo de servidor A veces la problemtica es justo la contraria de la que hemos visto con las expresiones complejas: a veces hay cdigo que Razor interpreta que es de servidor pero realmente parte de ese cdigo es HTML que debe enviarse al cliente. Veamos un ejemplo:@for (int i = 0; i < 10; i++) { El valor de i es: @i
}

A priori podramos esperar que este cdigo generara 10 lneas de cdigo HTML. Pero el resultado es un error de compilacin. La razn es que Razor interpreta que la lnea "El valor de i es: @i" es cdigo de servidor. Para "romper" este cdigo de servidor y que Razor "sepa" que realmente esto es cdigo que debe enviarse tal cual al cliente, tenemos dos opciones: 1. Intercalar una etiqueta HTML. Al intercalar una etiqueta HTML Razor "se da cuenta" que all empieza un cdigo de cliente:@for (int i = 0; i < 10; i++) { El valor de i es: @i
}

2. Usar la construccin @: que indica explcitamente a Razor que lo que sigue es cdigo de cliente:@for (int i = 0; i < 10; i++) { @:El valor de i es: @i
}

Manual del framework ASP.NET MVC: www.desarrolloweb.com/manuales/framework-asp-net-mvc.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

14

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com La diferencia es que en el primer caso las etiquetas se envan al navegadaor, mientras que en el segundo caso no.

Consideraciones en correos electrnicosLa gente que ha desarrollado el motor Razor ha tenido en cuenta una excepcin para los correos electrnicos. Es decir, Razor es de nuevo, lo suficientemente inteligente para saber que una expresin es un correo electrnico. As pues el siguiente cdigo no da error y enva el HTML esperado al cliente:Enviame un mail: a [email protected]

En este caso Razor interpreta que se trata de un correo electrnico, por lo que no trata la @ como inicio de cdigo de servidor. Este comportamiento a veces tampoco se desa. P.ej, imaginad lo siguiente:Div usado

Estoy asumiendo que el ViewModel que recibe la vista tiene una propiedad llamada Index. Supongamos que dicha propiedad (Model.Index) vale 10. La verdad es que uno pensara que eso generara el cdigo HTML:Div usado

Pero el resultado es bien distinto. El cdigo HTML generado es:Div usado

Es decir, Razor no ha interpretado la @ como inicio de cdigo de servidor, y eso es porque ha aplicado la excepcin de correo electrnico. La solucin pasa por usar los parntesis:Div usado

Ahora Razor sabe que Model.Index es cdigo de servidor y lo evaluar, generando el HTML que estbamos esperando. A veces Razor falla incluso ms espectacularmente. Dado el siguiente cdigo:@for (int i = 0; i