Cambio de css "ontheFly" with AJAX

Hace unos días me preguntaban si sería posible cambiar los estilos de una página “on The Fly“, al vuelo, durante la ejecución de la misma, cazando el postBack a través de Ajax, sin duda una posibilidad muy interesante de cara a la experiencia de usuario, permitiendo que este “configure” o seleccione sus colores favoritos… sin sufrir los temidos refrescos de página
Pues bien, pues la respuesta es que si, se puede hacer, y muy facilmente, símplemente basta con identificar a nuestro tag < link > (en el que establecemos la ruta de acceso a nuestras StyleSheets) dentro de nuestro DOM, modificando en la función que controle el callBack la propiedad href de este… Como veis no parece muy dificil, y para muestra un botón, aquí os dejo un ejemplillo:


1º Utilizando la Dll de AJAX
El ejemplo lo hice desde un sitio web en blanco, sin las nuevas extensiones AJAX, preferí hacerlo desde 0…. aer que pasaba …. así que para empezar, nos tendríamos que bajar la dll de AJAX
Una vez referenciada en nuestro proyecto, se la asignaremos a los métodos POST y GET de la página, añadiendo el siguiente httHandler al webconfig:

<httpHandlers>
<add verb=POST,GET path=AJAX/*.ashx type=Ajax.PageHandlerFactory, Ajax />
</httpHandlers


A continuación, indicaremos la clase que vamos a utilizar, en el load de nuestra página


protected void Page_Load(object sender, EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(NombreDeNuestraClase));
}


Y por ultimo añadiremos el atributo [Ajax.AjaxMethod()] a todos los métodos a los cuales queremos controlar desde la llamada del cliente


2º Al trapo


Bien, ya lo tenemos todo listo para empezar a jugar con AJAX, así que vamos a lo que nos interesa, cómo cambiar “on the fly” los estilos de mi página. Como os comentaba al principio del árticulillo, basta con ponerle un id a nuestro tag < link > de tal forma que en el head de la página nos encontraríamos con algo como:


<link id=“idLink” rel=“Stylesheet” href=“Styles/StyleSheet1.css” type=”text/css” / >


El paso siguiente es diseñar la funcionalidad de la página a través de la cual, cuando lancemos algun evento, modifiquemos el href de nuestro tag < link > Como ejemplo introduciremos un checkbox, el cual, cuando sufra un onClick llamará a la función javaScript que cazará el postback y realizará el cambio


<input type=”checkbox” id=”miBox” onclick=”NombreDeNuestraClase.NuestraFuncion(NuestraFuncion_CallBack)” ><div class=”NombreDeLaClaseCss”>Cambiar Estilo</div>


A continuación diseñaremos la función javaScript, en la cual, como podemos observar, cambiamos la propiedad href de nuestro trag link, modificando así la ruta de la página de estilos a la que debe acceder:



<script language=”javascript” type=”text/javascript”>
function NuestraFuncion_CallBack(response)
{
document.getElementById(“idLink”).href =response.value;
}
</script>


Bueno, ya lo tenemos casi todo, ahora solo faltaría crear la función de servidor q devolverá la nueva ruta de la página de estilos:


[Ajax.AjaxMethod()]
public String NuestraFuncion()
{
return (“Styles/StyleSheet2.css”); //Devolvemos la nueva ruta
}
Y boilá, ya hemos cambiado todos los estilos y colorines de nuestra página onTheFly, sin necesitar ningún postback de forma rápida y sencilla