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

Con Web Pages, crear un sitio web con un diseño consistente es muy fácil.

Apariencia consistente

En Internet, encontrará muchos sitios web que tienen una apariencia y estilo consistentes:

  • Cada página tiene el mismo encabezado
  • Cada página tiene el mismo pie de página
  • Cada página tiene los mismos estilos y diseño

Con Web Pages, puede hacer esto de manera muy eficiente. Puede escribir los bloques de contenido reutilizables (como el encabezado y el pie de página) en un archivo separado.

También puede usar una plantilla de diseño (archivo de diseño) para definir un diseño consistente para todas las páginas web del sitio.

Content Blocks (bloques de contenido)

Muchos sitios web tienen contenido que se muestra en todas las páginas del sitio (como el encabezado y el pie de página).

Con Web Pages, puede usar@RenderPage()método para importar contenido desde diferentes archivos.

Los bloques de contenido (de otro archivo) se pueden importar en cualquier lugar de la página web. Un bloque de contenido puede contener texto, marcado y código, como cualquier página web normal.

Escribir el encabezado y el pie de página comunes en archivos separados le ahorrará mucho trabajo. No tiene que escribir el mismo contenido en cada página. Cuando el contenido cambie, solo tiene que modificar el archivo de encabezado o pie de página, y verá que el contenido correspondiente en todas las páginas del sitio se ha actualizado.

Lo siguiente muestra cómo se presenta en el código:

Ejemplo

<html>
<body>
@RenderPage("header.cshtml")
<h1>Hello Web Pages</h1>
<p>This is a paragraph</p>
@RenderPage("footer.cshtml")
</body>
</html>

Ejecutar ejemplo »

Layout Page (página de diseño)

En la sección anterior, vio que es muy fácil mostrar el mismo contenido en varias páginas web.

Otra forma de crear una apariencia consistente es usar una página de diseño. Una 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 vincula a la página de diseño, se muestra según la estructura de la página de diseño (plantilla).

En la página de diseño se usa@RenderBody()método para incrustar la página de contenido. Aparte de eso, no es diferente de una página web normal.

Cada página de contenido debe comenzar conla directiva de diseñocomenzar.

Lo siguiente muestra cómo se presenta en el código:

Página de diseño:

<html>
<body>
<p>This is header text</p>
@RenderBody()
<p>&copy; 2012 Ejemplo. All rights reserved.</p>
</body>
</html>

Cualquier página web:

@{Layout="Layout.cshtml";}

<h1>Welcome to example.com</h1>

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat.
</p>

Ejecutar ejemplo »

D.R.Y. - Don't Repeat Yourself (No te repitas)

Con Content Blocks (bloques de contenido) y Layout Pages (páginas de diseño), estas dos herramientas de ASP.NET, puede hacer que su aplicación web muestre una apariencia consistente.

Estas dos herramientas le ahorrarán mucho trabajo; ya no tendrá que repetir la misma información en cada página. El marcado, los estilos y el código centralizados hacen que su aplicación web sea más fácil de administrar y mantener.

Evitar que los archivos sean explorados

En ASP.NET, los archivos cuyos nombres comienzan con un guion bajo impiden que estos archivos se vean en Internet.

Si no desea que sus usuarios vean sus bloques de contenido o páginas de diseño, puede renombrar estos archivos:

_header.cshtm

_footer.cshtml

_Layout.cshtml

Ocultar información sensible

En ASP.NET, el método más común para ocultar información sensible (contraseñas de bases de datos, contraseñas de correo electrónico, etc.) es guardar esta información en un archivo separado llamado "_AppStart".

_AppStart.cshtml

@{
WebMail.SmtpServer = "mailserver.example.com";
WebMail.EnableSsl = true;
WebMail.UserName = "[email protected]";
WebMail.Password = "your-password";
WebMail.From = "[email protected]";
}


Otras extensiones