¿Qué es la vista de diseño ( Layout View) en ASP.NET MVC C#?

 

Una aplicación puede contener una parte específica de la interfaz de usuario que permanece igual en toda la aplicación, como el encabezado, la barra de navegación izquierda, la barra derecha o la sección de pie de página. ASP.NET MVC introdujo una vista de diseño que contiene estas partes comunes de la interfaz de usuario para que no tengamos que escribir el mismo código en cada página. La vista de diseño es la misma que la página maestra de la aplicación de formulario web ASP.NET.

Por ejemplo, la interfaz de usuario de una aplicación puede contener un encabezado, una barra de menú izquierda, una barra derecha y una sección de pie de página que permanece igual en todas las páginas. Solo la sección central cambia dinámicamente, como se muestra a continuación.

La vista de diseño le permite definir una plantilla de sitio común, que se puede heredar en varias vistas para proporcionar una apariencia coherente en varias páginas de una aplicación. La vista de diseño elimina la codificación duplicada y mejora la velocidad de desarrollo y facilita el mantenimiento. La vista de diseño de la interfaz de usuario de muestra anterior contendría secciones de encabezado, menú izquierdo, barra derecha y pie de página. Tiene un marcador de posición para la sección central que cambia dinámicamente, como se muestra a continuación.

La vista de diseño tiene la misma extensión que otras vistas, .cshtml o .vbhtml. Las vistas de diseño se comparten con varias vistas, por lo que deben almacenarse en la carpeta Compartida. De forma predeterminada, se crea una vista de diseño _Layout.cshtml cuando crea una aplicación MVC con Visual Studio, como se muestra a continuación.

El siguiente es el _Layout.cshtml predeterminado.

Como puedeN ver, la vista de diseño contiene etiquetas HTML Doctype, head y body. La única diferencia es una llamada a los métodos RenderBody () y RenderSection (). Las vistas secundarias se mostrarán donde se llame a RenderBody ().

Uso de la vista de diseño

Las vistas que se mostrarán en un marcador de posición RenderBody () se denominan vistas secundarias. Hay varias formas de especificar qué vista de diseño se utilizará con qué vistas secundarias. Puede especificarlo en un _ViewStart.cshtml común, en una vista secundaria o en un método de acción.

El _ViewStart.cshtml predeterminado se incluye en la carpeta Vistas. También se puede crear en todas las demás subcarpetas de Vistas. Se utiliza para especificar configuraciones comunes para todas las vistas en una carpeta y subcarpetas donde se crea.

Establecer la propiedad Diseño en una vista de diseño particular será aplicable a todas las vistas secundarias en esa carpeta y sus subcarpetas.

Por ejemplo, el siguiente _ViewStart.cshtml en la carpeta Vistas establece la propiedad Diseño en "~ / Vistas / Shared / _Layout.cshtml". Entonces, _layout.cshtml sería una vista de diseño de todas las vistas incluidas en Vistas y sus subcarpetas.

El _ViewStart.cshtml también se puede crear en las subcarpetas de la carpeta Ver para establecer la página de diseño predeterminada para todas las vistas incluidas en esa subcarpeta en particular.

Por ejemplo, el siguiente _ViewStart.cshtml en la carpeta Inicio establece la propiedad Layout en _myLayoutPage.cshtml. Así que ahora, Index.cshtml, About.cshtml y Contact.cshtml se mostrarán en _myLayoutPage.cshtml en lugar del _Layout.cshml predeterminado.

Referencias

https://www.tutorialsteacher.com/mvc/layout-view-in-asp.net-mvc

https://www.youtube.com/watch?v=GV-zdZGNgkY

https://www.youtube.com/watch?v=uMO6NmJSnMk