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

6 thoughts on “Cambio de css "ontheFly" with AJAX

  1. Pues tiene buen color!!! La necesidad era hacerlo implicitamente por AJAX???
    te propongo un reto, podrías hacer el mismo ejemplo por ATLAS??
    :o)
    Un saludo

  2. Siempre tirando pa casa ehh mamonassooo xddd la necesidad era simplemente cambiar las css’s sin necesidad de refrecar, y como puedes ver, son cuatro pasitos que incluso se podrían simplificar

  3. Más que simplificación…, se me ocurren varias vías, como desde cambiar directamente la clase aplicada a un div determinado pasando su id (no cambiando toda la hoja de estilos), o utilizar otras funciones para localizar las distintas clases a cambiar, atendiendo al tag al que se estan aplicando, haciendo así cambios de varios conjuntos de elementos, en vez de ir id por id… 🙂

  4. Muy interesante Isaac. La verdad es que es algo que nunca me he planteado pero creo que es un muy truco para tener en cuenta.

    ¡Gracias por compartirlo campeón! 😉

  5. Joder macho…lo que me he alegrado al ver esta web y ver que sigues dando caña.
    Eso sí, como la foto sea totalmente real me parece que falta algo muy importante arriba.

    Oye en la url que te pongo aparece mi mail…escribeme y me cuentas como va todo.

    Un abrazo tío,

    JuanCar (Parra)

Leave a Reply

Your email address will not be published. Required fields are marked *