viernes, 2 de mayo de 2008

ASP.NET - Modificar HTML HEAD dinamicamente

Vamos a plantear un escenario:
Tenemos una aplicación web, la cual usa una master page.
En la master page queremos incluir la lógica necesaria que permita que ,según la página que se esté mostrando, se modifique por ejemplo el título de la página, alterar los metatags, agregar/cambiar la hoja de estilos, agregar enlaces a archivos javascript, etc.
Y hacer esta funcionalidad, desde ASP.NET 2.0 es una cosa muy sencilla.
En ASP.NET 1.X no había forma de lograr esto sin que tuvieras que escribir una ensalada de artificios para lograr el resultado esperado.

Empecemos.
-Creamos un proyecto web de tipo ASP.NET, lo llamaremos Tests.
-Eliminamos la página default.aspx que viene por defecto.
-Añadimos una master page llamada site1.master a nuestro proyecto.
-Seleccionamos Añadir nuevo elemento... y añadimos tres formularios de contenido web (Web Content Form) llamados
default.aspx, orders.aspx y products.aspx respectivamente.

Lo que vamos a hacer primero es determinar en qué página estamos y según eso mostraremos un título apropiado.
Bueno, si de antemano sabes cuál es el título de la página... entonces no nos hagamos problemas, simplemente vamos al html de la página products.aspx (por ejemplo) y le ponemos su título... asi:
[%@ Page Language="vb"
AutoEventWireup="false"
MasterPageFile="~/Site1.Master"
CodeBehind="Products.aspx.vb"
Inherits="Tests.Products"
title="Products" %]

Simple.
Pero si no sabemos cuál será el título o tal vez cogeremos el título desde una fuente de datos, entonces debemos hacerlo de otra manera.
Podríamos ir al code-beside de cada página escribir ahí el título que le corresponde a cada página, pero sería mejor centralizarlo en una sola página... por eso usaremos la master page.

Entonces nos vamos al code-beside de la master page y escribimos el sgte código:
Partial Public Class Site1
Inherits System.Web.UI.MasterPage

Protected Sub Page_Load(ByVal sender As Object, ...
Dim CurrentPage As String = GetPageName()
If CurrentPage = "default.aspx" Then
Page.Title = "Página de bienvenida"
ElseIf CurrentPage = "" Then
Page.Title = "Ordenes de compra"
Else
Page.Title = "Nuestros productos"
End If
End Sub

Private Shared Function GetPageName() As String
Dim arr() As String
arr = HttpContext.Current.Request.RawUrl.Split("/")
Return arr(arr.GetUpperBound(0))
End Function

End Class
Para que esto funcione, en el html de la master page, el tag [head] debe tener su atributo runat="server".
Con eso solucionamos el tema del título.

Pero... qué si quiero agregarle los metatags apropiados a cada página?
Simple pes... hacemos uso de la clase HtmlMeta:

Dim tag As New HtmlMeta
tag.Name = "Description"
tag.Content = "Galería de productos"
Page.Header.Controls.Add(tag)

Nuestras páginas, hasta el momento ya tienen título y metatags.

Ahora, pongámosle una hoja de estilos dinámicamente:

Dim css As New HtmlLink
css.Attributes("type") = "text/css"
css.Attributes("href") = "style.css"
css.Attributes("rel") = "stylesheet"
Page.Header.Controls.Add(css)


Excelente!!!

Finalmente, agreguemos un archivo javascript dinámicamente:

Dim js As New HtmlGenericControl("script")
js.Attributes.Add("type", "text/javascript")
js.Attributes.Add("src", "javascript.js")
Page.Header.Controls.Add(js)

Muy bien!!

1 comentario:

Gonzalo dijo...

Loco, espectacular lo tuyo.

Sos un femonemo.

Te dejo mi pagina de juegos para que la visites, son gratis.

http://www.juegosgratis.com.uy.

Muchas gracias por tu aporte