ASP.NET MVC 3: Layouts con Razor

Introducción

Este es un documento de trabajo para aprender como funcionan las capas en Razor. Sin más comienza el post.

Layouts con Razor

 

Las Layout views son las mater pages de razor. Usa los métodos RenderPage, RenderBody, RenderSection para dibujar la página. En el enlace [1] se pueden ver varios ejemplos de desarrollo.

En el código fuente siguiente podemos ver el uso de RenderBody:

<!DOCTYPE html>
<head>
<title>@ViewBag.Title</title>
<script src=”@Url.Content(“/Scripts/jquery.js”)” type=”text/javascript”></script>
</head>
<body>
@RenderBody()
</body>
</html>

Usando RenderSection

RenderSection se utiliza para indicar que una parte de la página va a contener una capa determinada, el método utiliza dos atributos, nombre de la Sección y un booleano. Una llamada de ejemplo puede ser la siguiente:




Declarando secciones

Las secciones se declaran con la directiva @Section NOMBRE-DE-LA-SECCION. Y entre llaves el código de la sección. Por ejemplo:


@Section Footer{
	Esto es el pie de página
}

Comentarios dentro de los layouts

Para realizar comentarios dentro del código de las layouts, utilizaremos arroba asterisco @* para iniciar el bloque de comentarios y para finalizarlo utilizaremos asterisco arroba *@ .

Localización de las Capas en el proyecto

Las capas se guardan dentro de la carpeta Shared,que a su vez está dentro de la carpeta Views.

Nombrado de las capas

Todas las capas comienzan por el carácter guión bajo _ y contienen la extensión cshtml.

Vista Inicial

Para indicar cual es la vista que se va a cargar utilizaremos el archivo _ViewStar.cshtml, contiene dentro una directiva para indicar la capa de inicio.

@{
	Layout="RUTA-DE-LA-CAPA-NOMBRE-DEL-ARCHIVO-EXTENSION-DOTCSHTML";
}

Enlaces:

[1] – http://www.dotnetcurry.com/ShowArticle.aspx?ID=636

Anuncios
Deja un comentario

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

A %d blogueros les gusta esto: