ASP.NET MVC 3: Comenzando con Razor

Autor: Javier Yagüe Sánchez

MSP – Developer Evangelist Junior at Microsoft

http://labloguera.net/blogs/javier

La última versión de ASP.NET MVC 3 ya está disponible, y entre las mejoras se encuentran las siguientes características: nuevo motor de creación de Vistas de Razor, filtros globales (una manera de registrar controladores o acciones en un solo lugar), compatibilidad mejorada con JavaScript, validaciones JQuery, JSON binding, soporte de intellisense para Razor sobre HTML, CSS, JavaScript, C#, VB,…

Este artículo pretende guiar al lector para crear su primera aplicación con Razor y que se familiarice con el entorno.

1. Instalando la última versión de ASP.NET MVC3
2. Instalación de librerías de terceros con NuGet
3. Una pequeña introducción a la nueva sintaxis Razor
4. Familiarizarse con los archivos _Layout y _ViewStart en la carpeta “Vistas”
5. Añadiendo controladores al proyecto
6. La carpeta Models
7. Creando Vistas a través de los controladores
8. Navegando por distintos Controladores

Instalando la última versión de ASP.NET MVC3

Para poder trabajar con Razor. lo primero es instalar la última versión, y para ello debemos dirigirnos a la dirección http://www.asp.net/mvc/mvc3 , una vez instalada ejecutamos Visual Studio 2010 y creamos un nuevo proyecto Web MVC3, y luego podremos elegir el tipo de proyecto, si ASPX o Razor, y entre una aplicación vacía o una aplicación de Internet. Ésta última opción nos dará una web básica con algunos métodos de ejemplo del tipo “Login”. Escogemos aplicación vacía y sintaxis Razor para empezar un proyecto desde cero (si elegimos “aplicación de internet” nos creará un modelo de proyecto base con algunas funcionalidades básicas, como navegación y login de usuarios).

Instalación de librerías de terceros con NuGet

NuGet es un complemento para Visual Studio con el que podremos descargar de forma sencilla librerías de terceros que nos ayuden al desarrollo de nuestra aplicación web, es recomendable utilizar esta utilizad. Para ello, nos dirigimos a la carpeta Referencias de nuestro proyecto y seleccionamos “Add Library Package Refence”.

En esta aplicación vamos a hacer uso de los helpers (métodos que devuelven código, en este caso HTML, generado a partir de unos parámetros) para redes sociales. Para ello instalaremos la librería Microsoft.Web.Helpers, la cual podemos encontrar mediante el cuadro de búsqueda, o con un poco de paciencia buscando entre la multitud de librerías que se nos ofrece.

Una pequeña introducción a la nueva sintaxis Razor

La sintaxis Razor es una sintaxis de programación sencilla donde se puede escribir código ejecutado en el servidor a través de la web. En una página web que usa sintaxis Razor, hay dos tipos de contenido: cliente y servidor. El contenido cliente es el acostumbrado en las páginas web habituales: HTML, CSS, Javascript y texto.

La sintaxis Razor también permitirá introducir código en servidor a este contenido cliente. Si hay código Razor escrito en la página que se va a cargar, el servidor ejecuta primero este código, antes de mandar el resto de la página web al cliente (navegador).

Las páginas web ASP.NET que incluyen sintaxis Razor, tienen una extensión especial (.cshtml o .vbhtml). El servidor reconoce estas extensiones, ejecuta el código Razor, y luego enviará la página al navegador.

Familiarizarse con los archivos _Layout y _ViewStart en la carpeta “Vistas”

El archivo _Layout.cshtml será la estructura de las páginas de nuestra web. Podemos tener tantos layouts como queramos según nuestras necesidades. Dentro del layout habrá una parte “RenderBody()”, y lo que hará este método propio de Razor será invocar la Vista que queremos que sea visualizada o a la cual estemos navegando.

Como podéis ver, ya hemos incluido el helper de Twitter a través de los helpers de la librería instalada con NuGet, así en la barra lateral de nuestro site mostrará los últimos tweets del usuario esmsdn.

El archivo _ViewStart.cshtml se encargará, si no indicamos lo contrario en la vista, de cargar el layout que le indiquemos para todas las Vistas que tengamos en nuestro proyecto, ya que es un archivo el cual se invoca por defecto al cargarlas. En este archivo también podemos precargar datos o variables según nuestras necesidades.

Añadiendo controladores al proyecto

Los controladores se encargarán de hacer de capa entre la Vista y los datos. En ellos podremos acceder a nuestra base de datos, llamar a Acciones, y devolver una Vista con parámetros.

En el cuadro de diálogo que nos aparece, nos da la opción de crear automáticamente las acciones de “Creación”, “Borrado”, “Actualización” y “Detalles”. En este ejemplo no seleccionaremos esta opción, ya que solo nos interesan las acciones “Index” y “About” dentro de este controlador, y al que llamaremos “HomeController”.

También vamos a crear otro controlador que se llame “MusicController” donde introduciremos las Acciones “Info” y “Details”, que será donde cargaremos los datos de todas las entradas sobre una categoría de música, y la entrada con todos los detalles (Titulo, cuerpo de la entrada, enlace, fecha publicación,…) respectivamente.

La carpeta Models

Un modelo es la representación de un objeto con el que vamos a trabajar, en este caso Post y Categoría. Aunque en este artículo no vamos a entrar en la especificación de modelos, vamos a utilizar ésta carpeta para alojar un archivo de clases LinqToSQL, el cual nos hará de capa de acceso a la base de datos.

Creando Vistas a través de los controladores

Como se ha comentado antes, desde el controlador se pueden hacer consultas a la base de datos, y el resultado pasarlo como parámetro a la vista asociada a la acción. Para ello debemos introducir el resultado tal y como se muestra a continuación:

Ahora vamos a crear la Vista de nuestra acción “Index”, para ello nos posicionamos sobre el nombre de la acción, en este caso “Index” y desde el botón derecho del ratón, hacemos click en “Añadir Vista”.

Nos saldrá una ventana emergente preguntando cómo queremos crear la vista. Vamos por partes:

El nombre la vista lo dejaremos tal cual. La opción crear una vista parcial, es por si queremos que esa vista solo se encargue de un trozo de nuestro site, como puede ser comentarios sobre una entrada a nuestro site… en este caso, marcaremos la opción de crear una Vista fuertemente tipada, y seleccionaremos que los datos que va a contener la Vista serán del tipo “Post”, con el motor Razor y el tipo de contenido “Lista”. No seleccionaremos la opción de una Master Page, ya que en el archivo _ViewStart ya cargamos nuestro layout por defecto, asique a no ser que queramos que tenga una apariencia distinta, lo dejaremos sin marcar. El resultado de esta acción nos proporcionará una Vista con una tabla la cual irá cargando uno a uno todos los Post que tengamos registrados en nuestro site mediante un “foreach” a través del parámetro “model”, el cual es del tipo IEnumerable y contendrá, tal y como le hemos indicado, objetos del tipo Post.

Debemos fijarnos que al no marcar la casilla de MasterPage, nos creará un archivo con extensión .cshtml completo, con las etiquetas head y body. Debemos borrar todo lo que esté fuera de la tabla, ya que si no es así, dará un error al intentar cargar la vista (no se puede tener dos etiquetas head y body en una misma página), al igual que el texto” @{Layout = null;}”.

Navegando por distintos Controladores

Si nos fijamos en el archivo “Global.asax”, concretamente en el método RegisterRoutes, veremos que MVC por defecto enmascara la url que aparece en el navegador, ocultando los nombres de las páginas, incluso las carpetas físicas en las que se encuentran, mostrando la información que queremos que muestre para una mayor navegabilidad. En la URL podrán aparecer separados por barras los siguientes parámetros y valores por defecto:

·        Controller = “Home”

·        Action = “Index”

·        Id = opcional.

Para hacernos una idea, imaginemos que navegamos a una página que se aloja en el controlador “Music”, que la acción que requerimos es “Info” y además queremos que el “id” del post sea el número 5. Nos aparecería en la barra de direcciones lo siguiente: http://www.miwebsite.net/Music/Info/5

Cuando escribimos el método Html.ActionLink debemos especificar tres parámetros, el nombre que aparecerá como enlace, la acción asociada a las acciones del Controlador donde nos encontremos (por ejemplo HomeController), y opcionalmente un objeto (en el que podemos sobrescribir el Controlador donde queremos navegar, la Acción asociada a ese Controlador, y el parámetro id que le pasamos a la Acción). Un ejemplo:

Si queremos navegar desde un mismo controlador (MusicController) a una parte específica del mismo, e incluso pasarle parámetros, también podemos hacerlo especificando en el segundo parámetro de ActionLink la ruta a la que queremos navegar. Esto no funcionaría entre distintos Controladores. Un ejemplo:

Hay que tener en cuenta, que el parámetro “id” no se le puede cambiar el nombre, ya que la Acción no reconocería éste parámetro. Asique utilizaremos el parámetro “id” con el tipado de datos que queramos (int, string, char, bool, …) pero siempre manteniendo su nombre.