Compatibilidad de los navegadores con CSS

En algunas ocasiones conseguir que una web se vea correctamente en todos los navegadores puede resultar un verdadero infierno. Para solucionar los diversos problemas de estandares y compatibilidades podemos optar por usar diferentes hojas de estilo dependiendo del navegador. A continuación podeis ver un ejemplo:

<!--[if gte IE6]>

<link rel="stylesheet" type="text/css" href="styles/ie.css" />

<! [endif] -->

Otra forma de aplicar distintos estilos a una web en función del navegador es haciedo esta diferenciación dentro de la hoja de estilo, en este caso podemos ver varios ejemplos de como hacerlo.

#something { color: red; } /* Se aplica a IE6 y superior. */
*+html #something { color: green; } /* Se aplica a IE7. */
* html #something { color: blue; } /* Se aplica a IE6. */

margin-left: 5px; /* Margen izquierdo para todos los navegadores */
.margin-left: 7px; /* Margen izquierdo de 7px para IE6 y IE7, los demas navegadores todavia seguiran manteniendo el margen de 5px inicial */
_margin-left: 6px; /* Sólo IE6 leerá y entendera este estilo y aplicará el valor */

Por último podemos recurrir a otro pequeño truco, si en nuestra hoja de estilos añadimos una propiedad y le anteponemos '//' internet explorer si que interpretara esta propiedad pero el resto de navegadores no.

#nonie{//display: none;}

#iebased{
       display: none;
       //display: visible;
}

En esta caso si tuvieramos dos Div´s como los siguientes :

<div id="nonie"> Tu <i>no estas</i> utilizando Internet Explorer. </div>

<div id="iebased"> Tu <b>estas</b> utilizando Internet Explorer. </div>

En este caso solo veriamos la capa correspondiente en función del tipo de navegador que usemos. Este ultimo truco no es demasiado elegante pero si muy funcional.

Deshabilitar la cache de una pagina asp.net en Firefox

Para deshabilitar la cache de una página asp.net podemos hacerlo de diversas formas, desde IIS (indicando que la página caduque inmediatamente), añadiendo metas a las cabeceras de la pagina e inclucuso podemos hacerlo también desde código con esta instrucción: HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache); Después de probar las diversas técnicas he descubierto que no todas funcionan con todos los navegadores (en esta ocasión es Firefox quien pone la nota discordante), asi que para conseguir deshabilitar la cache para una página concreta lo mejar sera añadir etiquetas META. La siguiente función muestro como añadir las etiquetas desde código. public void DeshabilitarCache() { Response.ClearHeaders(); Response.AppendHeader("Cache-Control", "no-cache"); Response.AppendHeader("Cache-Control", "private"); Response.AppendHeader("Cache-Control", "no-store"); Response.AppendHeader("Cache-Control", "must-revalidate"); Response.AppendHeader("Cache-Control", "max-stale=0"); Response.AppendHeader("Cache-Control", "post-check=0"); Response.AppendHeader("Cache-Control", "pre-check=0"); Response.AppendHeader("Pragma", "no-cache"); Response.AppendHeader("Keep-Alive", "timeout=3, max=993"); Response.AppendHeader("Expires", "Mon, 26 Jul 1997 05:00:00 GMT"); }

Ordenar un Dropdownlist con Linq

El siguiente codigo muestra una función que sirve para ordenar un Combo utilizando, como campo de ordenación el texto que se muestra en cada uno de los items. ///Funcion que ordena los elementos de un Dropdownlist protected void OrdenarDropDownList(DropDownList drp) { drp.DataSource = drp.Items.Cast() .OrderBy(o => o.Text) .ToList(); drp.DataBind(); }

Comprobar si una página es válida desde javascript

En el siguiente post veremos como usando los controles de validación de asp.net se puede comprobar desde javascript si la pagina es valida o no. Esto puede ser útil para para mostrar u ocultar información en función del resultado de la validación. Para hacer la comprobación solo tendremos que añadir el siguiente codigo en una funcion javascript //nombre del grupo de validadores que queremos comprobar //en caso de dejarlo en blanco se comprueba la pagina entera var validationGroupName = ""; if (typeof(Page_ClientValidate) == 'function') { var validationResult = Page_ClientValidate(validationGroupName); if (validationResult == true) { //Cuando entramos aqui, sabemos que la página o el los controles pertenecientes //al grupo de validación seleccionado son válidos } }

Recorrer los nodos de un TreeView control desde javascript

Hace unos dias me surgio la necesidad de trabajar con el control treeview, mas concretamente he tenido que realizar una busqueda sobre sus nodos. Para llevar a cabo esta tarea tenia que recorrer todo el arbol y comprobar si el valor de alguno de los nodos coincidia con el texto que un usuario introduciria en una caja de texto. Esta tarea me ha llevado a investigar mas profundamente el control Treeview, es un cotrol digamos... diferente. Para recorrer el control primero de todo he tenido que fijarme en el html que se genera, este esta compuesto por capas y tablas. Un nodo es una tabla con una fila y dentro de esas filas celdas, que correspoden con la imagen de expandir colarpsar, la imagen que el nodo tenga y el nombre o texto del nodo. Si este nodo tiene nodos hijos, estos iran dentro de una tabla cada uno de ellos y todos ellos dentro de una etiqueta

que por identificador tendra el del nodo padre más un el sufijo "Nodes". Basandonos en esto el código seria el siguiente: //obtención de la cadena a buscar var keysrch = $get('<%=txtBuscar.ClientID %>').value; //obtencion del objeto Treeview var tree = document.getElementById('<%=arbolListines.ClientID%>'); if(keysrch != '') { //obtencion de todas las tablas que hay dentro del control var tables = tree.getElementsByTagName('table'); if(tables) { for (var i = 0, j = tables.length; i < j; i++) { //dentro de cada tabla accedemos a los enlaces que esta continen links = tables[i].getElementsByTagName('a'); if(links) { for (var x = 0, y = links.length; x < y; x++) { //si el primer nodo no es una imagen significa que no es ni el icono +/- //tampoco es la imagen que hemos asociado a nuestro nodo, con lo que ya hemos //llegado a la posición en la que se encuentra el texto que es lo que nos interesa if(links[x].firstChild.nodeName.toLowerCase() !='img') { // procesamos el texto para buscar si la cadena que de búsqueda esta dentro del nombre del nodo var result = links[x].innerHTML.toLowerCase().indexOf(keysrch); if (result != -1) { //hemos encontrado el nodo que buscabamos //procesar..... }//fin del if que comprueba que estemos buscando solo en el enlace que contiene el nombre } }//fin del bucle for que recorre todos los enlaces de cadad nodo } }//fin del bucle for que recorre las tablas que genera el control treeview en HTML }

Cachear imagenes creadas en un HttpHandler

Existen varias maneras de mejorar el rendimiento de una aplicación web, una de las más importantes es el cacheo de datos y más concretamente, cachear imagenes. Existen algunos escenarios en los cuales conseguir cachear los datos no es trivial, uno de ellos es cuando tenemos una imagen almacenada en una base de datos en formato BLOB, en este casi si queremos mostrar la imagen en nuestra web, una manera de hacerlo es creando un Controlador genérico (.ashx). Si hacemos esto deberemos manejar manualmente el cacheo de imagenes. El siguiente fragmento de código muestra como habilitar la cache:

//creacion de un objeto TimeSpan que va a indicar la duración de la cache

TimeSpan freshness = new TimeSpan(0, 0, 10, 0);

//se configura el tiempo de expiración de la cache

context.Response.Cache.SetExpires(DateTime.Now.Add(freshness));

//configuracion del ámbito de la cache

context.Response.Cache.SetCacheability(HttpCacheability.Public);

context.Response.Cache.SetValidUntilExpires(false);

Posteriormente se se envia la salida de la imagen

context.Response.ContentType = "image/gif";

context.Response.OutputStream.Write(buffer, 0, buffer.Length);

Como saber si si ha ocurrido un Postback Asíncrono Parcial

Con la llegada Ajax debemos tener en cuenta que actualmente existen dos tipos de Postback, uno podriamos llamarlo Full Postback, en él se recarga toda la página. Con ajax surge el concepto de Partial Postback, es una ida al servidor que solo actualiza una parte de la página. En ocasiones puede ser interesante para el control de nuestras aplicaciones si un Postaback ha sido parcial o total, para ello tendremos que obtener una instancia del ScriptManager de nuestra página a traves del método GetCurrent y comprobando el valor de la propiedad IsInAsyncPostBack. A continuación podemos ver un ejemplo: protected void Page_Load(object sender, EventArgs e)

{

if (Page.IsPostBack)

{

//Se obtiene comprueba la propiedad IsInAsyncPostBack

if (ScriptManager.GetCurrent(this.Page).IsInAsyncPostBack)

{

// TODO logica para una recarga parcial

}

else

{

//logica para un postback total

}

}

}