ASP.NET Web Pages - Diseño de página

A través de Web Pages, es fácil crear sitios web con un diseño uniforme.

Aspecto uniforme

En Internet, encontrarás muchos sitios web con un aspecto uniforme:

  • Cada página tiene el mismo encabezado
  • Cada página tiene el mismo pie de página
  • Cada página tiene el mismo estilo y diseño

A través de Web Pages, se puede lograr esto de manera eficiente. Puedes obtener bloques de código reutilizables (bloques de contenido), como encabezado y pie de página, en archivos independientes.

También puedes definir un diseño consistente para todas las páginas, usando plantillas de diseño (archivos de diseño).

Bloques de contenido

Muchos sitios web tienen contenido que debe mostrarse en cada página (como encabezado y pie de página).

A través de Web Pages, puedes usar @RenderPage() Métodos para importar contenido de diferentes archivos.

Los bloques de contenido (de otro archivo) pueden ser insertados en cualquier lugar de la página web y pueden contener texto, etiquetas y código, al igual que cualquier página web común.

Usar un encabezado y pie de página genéricos puede ahorrar mucho trabajo. No tienes que escribir el mismo contenido en cada página, y cuando cambies los archivos de encabezado o pie de página, el contenido se actualizará en todas las páginas.

En el código es así:

Ejemplo

<html>
<body>
@RenderPage("header.cshtml")
<h1>Hola Páginas Web</h1> 
<p>Este es un párrafo</p>
@RenderPage("footer.cshtml")
</body>
</html>

Ejecutar ejemplo

Usar página de diseño

En el contenido anterior, ya viste que referenciar el mismo contenido en múltiples páginas es muy simple.

Otra manera de crear una apariencia consistente es usar una página de diseño. La página de diseño contiene la estructura de la página web, no el contenido. Cuando una página web (página de contenido) se enlaza con una página de diseño, se muestra según la página de diseño (plantilla).

La página de diseño es similar a una página web común, pero llama a la ubicación de la página de contenido enlazada @RenderBody() Método

Cada página de contenido debe comenzar con Instrucción de diseñoInicio.

En el código es así:

Diseño de página web:

<html>
<body>
<p>Esto es texto.</p>
@RenderBody()
<p>© 2012 CodeW3C.com. Todos los derechos reservados.</p>
</body>
</html>

Cualquier página web:

@{Layout="Layout.cshtml";}
<h1>Bienvenido a CodeW3C.com</h1>
<p>
Esto es texto. Esto es texto. Esto es texto. Esto es texto. Esto es texto. Esto es texto. Esto es texto. Esto es texto.
Esto es texto. Esto es texto. Esto es texto. Esto es texto. Esto es texto. Esto es texto. Esto es texto. Esto es texto.
Esto es texto. Esto es texto. Esto es texto. Esto es texto. Esto es texto. Esto es texto. Esto es texto. Esto es texto.
</p>

Ejecutar ejemplo

No repitas

A través de dos herramientas de ASP.NET, los bloques de contenido y las páginas de diseño, puedes establecer un aspecto consistente para la aplicación web.

Estas herramientas te ahorrarán mucho trabajo, ya que no tienes que repetir la misma información en todas las páginas. Centraliza las etiquetas, estilos y código, lo que hace que la aplicación web sea más fácil de gestionar y mantener.

Prevenir la filtración de código

En ASP.NET, los archivos que comienzan con guión bajo no se pueden navegar a través de web.

Si deseas prohibir a los usuarios ver bloques de contenido o archivos de diseño, renombra los archivos:

  • _header.cshtm
  • _footer.cshtml
  • _Layout.cshtml

Ocultar información sensible

En ASP.NET, una forma común de ocultar información sensible (contraseñas de bases de datos, contraseñas de correo electrónico, etc.) es almacenar esta información en un archivo independiente llamado "_AppStart".

_AppStart.cshtml

@{
WebMail.SmtpServer = "mailserver.ejemplo.com";
WebMail.EnableSsl = true;
WebMail.UserName = "usuario@ejemplo.com";
WebMail.Password = "tu-contraseña";
WebMail.From = "tu-nombre-aqui@ejemplo.com";
}