jueves, 5 de febrero de 2009

ASP.NET - Paginas de contenido, javascript y css

Para quienes tuvieron la suerte de leer ( ;) ) un post anterior, que enseñaba a vincular hojas de estilos y archivos css en tiempo de ejecución, para que las páginas de contenido tengan una apariencia visual estilizada y/o el javascript necesario.
Para quienes no saben qué es una página de contenido:
Es una página que hace referencia a una master page, osea, ya no tiene la estructura html completa, porque la heredará de la master page.
Más info: MSDN - Páginas de contenido
Bueno pues, eso está bien: a veces dependiendo de ciertas condiciones en nuestro código... querremos o no vincular archivos a nuestra página de contenido. Y, como les dije en ese post: Esa es la manera.

Pero, no siempre queremos verificar si cierta condición se cumple o no... a veces simplemente queremos asignarle una hoja de estilo o archivo javascript a ciertas páginas de contenido.

Y, si recordarás, las páginas de contenido no tienen encabezado [head] para agregar la referencia a los estilos ni a los archivos javascript.
Cómo hacemos?
Fácil:
Simplemente en tu masterpage, en el head de tu pagina agregas un contentplaceholder... y debe quedar así:
[head runat="server"]
[title][/title]
[asp:ContentPlaceHolder ID="head" runat="server"]

[/asp:ContentPlaceHolder]
[/head]

En realidad ni siquiera tienes que agregarlo, ya las plantillas de masterpages traen uno llamado "head"... precisamente para poner los estilos y scripts que necesitemos según la página.

Por ejemplo: quiero asignarle el estilo Stylesheet1.css a mi pagina1.aspx y la hoja Stylesheet2.css a mi pagina2.aspx... cómo lo hago?
Simple abro mi pagina de contenido y arrastro el archivo dentro del contentplaceholder llamado head...
[asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"]
[link href="css/Stylesheet1.css" rel="stylesheet" type="text/css" /]
[/asp:Content]

También hago lo mismo con la paginas2.aspx
[asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"]
[link href="css/Stylesheet2.css" rel="stylesheet" type="text/css" /]
[/asp:Content]

De esta manera, cada pagina de contenido tiene su propia hoja de estilo.

Lo mismo para los archivos javascript... simplemente los arrastras hacia la misma zona.

Y lo mismo para el código javascript que quieras embeber en la página... simplemente lo copias dentro del contentplaceholder y ya está!

No hay comentarios.: