ASP.NET MVC 3: nuevo view engine RAZOR

Junto con la nueva versión del framework ASP.NET MVC, se liberó la primera versión de un nuevo view engine llamado Razor y que promete ser muy interesante!

Vayamos directamente al código para entender mejor el tema. Lo primero que debemos hacer es al momento de crear una nueva aplicación web ASP.NET MVC 3, es seleccionar como tipo de view engine a utilizar el nuevo Razor y no al tradicional ASP.NET (ASPX).

Seleccionando el view engine

Seleccionando el view engine

Ahora vamos a crear dos vistas iguales que simplemente muestran una lista de usuarios. La primer vista la haremos con el view engine tradicional de ASP.NET:

<table>
  <% foreach (var item in Model) { %>
  <tr>
    <td><%: item.Id %></td>
    <td><%: item.Name %></td>
  </tr>
  <% } %>
</table>

Como podemos ver nuestras sintaxis de apertura para escribir código es bastante molesta. Pero con Razor nuestro código queda mucho más prolijo gracias a que nuestra sintaxis de apertura es solamente el símbolo @:

<table>
  @foreach (var item in Model) {
  <tr>
    <td>@item.Id</td>
    <td>@item.Name</td>
  </tr>
  }
</table>

Esto nueva sintaxis nos permite generar vistas muchos más limpias y fáciles de leer. Simplemente agregando la @ al iniciar nuestros bloques de código ya es suficiente. Como verán al iniciar el bloque foreach no es necesario indicar el cierre del mismo nuevamente con la @, con solamente agregar la llave de cierre, Razor identifica el final del bloque.

Otra punto interesante es la forma en que definimos nuestras MasterPage. La definición de una MP con Razor sería más o menos de la siguiente manera:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>@View.Title</title>
</head>
<body>
  <div>
    @RenderBody()
  </div>
</body>
</html>

Como podemos observar, el contenido de las vistas que utilicen esta plantilla será reemplazado donde se encuentra el método RenderBody() (mucho más prolijo que los content de ASP.NET, no?). Una vista que utiliza una MP debería hacerlo de la siguiente manera:

@model IEnumerable<MvcTres.Controllers.User>
@{
  View.Title = "Index Usuarios";
  Layout = "~/Views/Shared/_LayoutPage1.cshtml";
}
<table>
@foreach (var item in Model) {
  <tr>
    <td>@item.Id</td>
    <td>@item.Name</td>
  </tr>
}
</table>

Simplemente se crea un bloque donde especificamos cual será la plantilla que vamos a utilizar asignandosela a la propiedad Layout. Además podemos agregar distintas secciones de HTML a nuestras vistas utilizando el método RenderSection(…).

Otra característica interesante es que las páginas no tienen más la extensión aspx, sino que son cshtml o vbhtml, dependiendo del lenguaje seleccionado.

Entre las ventajas encontradas podemos nombrar:

– Reduce al máximo la cantidad de caracteres a escribir en nuestras vistas, lo que permite un código más limpio y simple de leer.
– Es fácil de aprender, ya que permite trabajar con HTML y C# al igual que el motor de ASP.NET.
–  Integra código y HTML como un todo.
– Soporta bloques multi-lineas.

Dos desventajas que note es que por ahora esta versión del view engine no soporta la vista HTML en Visual Studio y tampoco soporta el intellisense (aunque ya prometieron que sí para las próximas versiones!).

Para más info podemos visitar la siguiente entrada del blog de ScottGu’s que contiene muchísima info sobre este motor.

Update: Directiva @model

Razor provee también una nueva directiva llamada @model que nos permite hacer referencia a los modelos de una vista de una forma más limpia y concisa.

Veamos un ejemplo simple: con la directiva @inherits de ASP.NET MVC 3 Previews la forma de hacer la referencia con el modelo de la vista era la siguiente:

@inherits System.Web.Mvc.WebViewPage<IList<Sample.Models.User>>

Pero con la nueva directiva @model podemos definirlo de la siguiente manera:

@model IList<Sample.Model.User>

La sintaxis anterior es conceptualmente igual que antes, sin embargo es muchísimo más fácil de leer y escribir.

Anuncios

9 comentarios en “ASP.NET MVC 3: nuevo view engine RAZOR

  1. Pingback: Jose

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s