Cargando

Ir a contenido

X


Ver Más! Si eres de los que tiene o se va a comprar Huawei Mate 20, o Mate 20 Pro. Aquí tienes colección de tutoriales que se irán actualizando diariamente con todas las opciones que te ofrece este genial terminal móvil!


 


ASP.NET MVC - Layouts

En este tutorial veremos como trabajar los layouts en ASP.NET MVC utilizando Razor que es su lenguaje de plantillas.


Escrito por el abr 19 2014 00:27


A medida que desarrollamos una aplicación web, tenemos que ir desarrollando también lo que es su parte externa y estética, es decir, lo que el usuario ve. Parte de esto es hacer la cabecera de la página, el menú, el pie de página, etc.

Esto que mencionamos es el contenido estático y usualmente cambia muy poco durante la vida de la aplicación, generalmente cambia cuando hay un nuevo Look and Feel, es decir, un rediseño o cuando agregamos nuevos componentes que deben ser reflejados.

Para trabajar con este tipo de elementos, debemos utilizar los layouts, esto nos permite escribir una sola vez la cabecera por ejemplo y al hacerlo luego la podemos incluir en otras partes sin tener que reescribirla.

Layouts

Con el uso de Razor podemos escribir plantillas que se comporten como contenedores de vistas, es decir una vista que contendrá otras, como explicábamos, el objetivo de esto es escribir la menor cantidad de código posible y homogeneizar el aspecto de nuestra aplicación.

¿Para qué usar Layouts?
Si tenemos por ejemplo una web básica con una cabecera, lo más lógico es que las diferentes vistas utilicen dicha cabecera, por lo que en vez de escribir varias veces en cada vista su código, hacemos un layout y la incluimos en las diferentes vistas.



Contenido del archivo _Layout.cshtml

Al generar un nuevo proyecto web dentro de nuestra carpeta views, tenemos un archivo llamado _Layout.cshtml, en este archivo tenemos nuestra plantilla principal que va a funcionar como el contenedor de vistas que explicamos en el punto anterior.

Veamos en la siguiente imagen el código fuente que contiene dicho archivo:

asp_layouts.jpg


Si detallamos, tenemos un archivo HTML normal, sin embargo lo que nos interesa es el código Razor, empezamos por la etiqueta title, si nos fijamos Razor indica @View.Title, esto quiere decir que debe imprimir un parámetro Title que venga de la vista, luego continuamos con las demás secciones donde @RenderSection([nombre]) nos permite imprimir contenido indicando en la vista cual va a cada sección y por último @RenderBody() imprimirá el contenido del cuerpo.

Como vemos es algo bastante modular, si vemos ahora un código de una vista, podremos entender cómo se relacionan directamente:

@{ Layout = "~/_Layout.cshtml"; }
@section Header {
<h1>Contenido de la Cabecera de la vista<h1>
}
@section Footer {
Copyright @DateTime.Now.Year
}
<div class="main">
Este es el contenido del cuerpo de la vista
</div>

En esta vista lo que hemos hecho primero es indicarle que utilizará el archivo _Layout.cshtml como base, luego le decimos lo que cada sección va a llevar, por ejemplo @section Header, lo que contiene este bloque es lo que se va a imprimir en el @RenderSection(“Header”) que vimos en el archivo _Layouts.cshtml.

Asociación
Podemos decir entonces que esto va a funcionar como un rompecabezas y el Layout va a colocar cada pieza que identifiquemos donde le corresponde.


Con esto finalizamos este tutorial y como podemos ver utilizando los Layouts podemos ahorrar reescribir mucho código y al tener una sola fuente para este contenido nuestras páginas serán mucho más homogéneas, si necesitamos secciones diferentes podemos escribir un segundo o tercer Layout que nos permita tener todos los elementos que utilizaremos.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado abr 19 2014 00:27
  •   Actualizado abr 20 2014 22:38
  •   Visitas 1.7K
  •   Nivel
    Profesional