Archive for 13 junio 2007|Monthly archive page

Evento Load de Página ASPX Solo se Ejecuta la Primera Vez, Cuando se Abre la Página con JavaScript en Modo Modal.

Nuevamente uno de esos problemas que a uno lo ponen a pensar, y como ya es costumbre proviene de una amiga (que bueno que me hagan estas consultas, así tengo material para el Blog).

El Problema
Cuando abrimos una página ASP .Net en modo modal (diálogo), mediante la instrucción de JavaScript:

showModalDialog();

El código que ponemos en el controlador del evento load de la página que estamos abriendo, se ejecuta solo la primera vez que abrimos la página; en las siguientes veces, simplemente no ejecuta nada, es decir no se produce el evento load de la página.

La Solución
Como es costumbre lo primero que hice, fue reproducir el problema, y me pareció bastante extraño el comportamiento que tenía, luego pase a depurar el programa poniendo un punto de interrupción en la primera instrucción del controlador del evento Load de la página, ejecute el programa y como se esperaba se detuvo en el punto de interrupción, desde ahí comencé a ejecutarlo paso a paso presionando la tecla F10, hasta que se muestre la página por completo, luego cerré la página para abrirla de nuevo, y al abrir de nuevo la página, ¡o sorpresa!, ingresó nuevamente al controlador del evento Load donde estaba el punto de interrupción, y donde se suponía ya no debería de entrar. Así que detuve el proceso de depuración, ejecuté el programa y todo funcionó a la perfección.

Le comenté esto a mi amiga y le dije que después de depurar el programa, todo funcionaba a la perfección, pero ella no puedo reproducir lo que yo había logrado. Rato después cuando probé nuevamente el programa, surgió nuevamente el problema y como era de esperar, mi amiga se rió en mi cara.

Así que me puse a buscar la solución definitiva, luego de probar con muchas posibles soluciones y claro después de buscar en San Google, recordé que cuando una página es servida desde la caché de salida, no se ejecuta ningún código del lado del servidor. Así que procedí a desactivar la caché de salida de la página en cuestión, y que creen, eso solucionó el problema definitivamente, resulta que en las páginas que se muestran como diálogo (Modal), la caché de salida se activa de forma automática y claro no hay manera que se ejecute nuestro controlador de evento Load. Para desactivar la caché de salida de una página basta con colocar la siguiente declaración en el archivo apsx de la página:

<%@ OutputCache Location=”None” VaryByParam=”None” %>

Justo después de la directiva @Page.

Error de Codificación al Recuperar Datos con Caracteres Especiales Como la Letra Ñ de Gridview a un TextBox

Como es costumbre este post se origina con la consulta de una amiga, que me solicitó ayuda con un pequeño problema que se le presentó (el problema parecía tan pequeño que hasta se sonrojaba al hacer la consulta).

El Problema
Al recuperar los datos de un campo de la fila seleccionada en un GridView, a un control TextBox, manda caracteres extraños cuando se tratan de letras especiales como la “ñ” o las vocales con tilde, para recuperar los datos se utiliza el siguiente código en el evento RowCommand, del GridView.

protected void GridView1_RowCommand(object sender,
    GridViewCommandEventArgs e)
{
     if(e.CommandName == “Select”)
     {
        //Seleccionamos la Fila Actual
        GridView1.SelectedIndex =
            Convert.ToInt32(e.CommandArgument.ToString());

         //Recuperamos el valor de la segunda celda
        TextBox1.Text = GridView1.SelectedRow.Cells[1].Text;
     }
}

La Solución
Desde el inicio sospeché que el problema se trataba de la codificación de la página, recordé un post que había leído solo hace un momento donde se mostraba la forma de poner la codificación por defecto, seguí los pasos que se indicaban, pero no solucionó el problema.

Entonces hice la prueba cambiando el control TextBox por un control Label, grande fue mi sorpresa cuando todo funcionó a la perfección, entonces el problema estaba en el TextBox que por alguna razón no decodificaba los caracteres especiales.

Luego recordé que había una función para codificar texto que se utilizaba en seguridad, para evitar que el usuario ingrese caracteres especiales HttpUtility.HtmlEncode() y su correspondiente método para decodificarlo HttpUtility.HtmlDecode(). Como el problema es que los caracteres están codificados y por alguna razón extraña que no llego a entender no se decodifica al asignarlo a un TextBox, para solucionarlo tenemos que utilizar HttpUtility.HtmlDecode(), para decodificarlo manualmente.

protected void GridView1_RowCommand(object sender,
    GridViewCommandEventArgs e)
{
    if(e.CommandName == “Select”)
    {
        //Seleccionamos la Fila Actual
        GridView1.SelectedIndex =
            Convert.ToInt32(e.CommandArgument.ToString());

        //Recuperamos el valor de la segunda celda decodificándola
        TextBox1.Text =
            HttpUtility.HtmlDecode(GridView1.SelectedRow.Cells[1].Text);

    }
}

Temas y Skins con CSS para Mostrar una Interfaz de Usuario Consistente en ASP .NET 2.0

Una primera aproximación para lograr un interfaz de usuario consistente en ASP NET son las hojas de estilo CSS (Cascading Style Sheets), que nos ofrecen una gran mejora al centralizar la información sobre el estilo que nuestros Controles Web lucirán en archivos de hoja de estilos, en lugar de estar poniendo la información de estilo directamente en las propiedades de los controles, colocamos el nombre de estilo CSS. La ventaja de esta aproximación es que al cambiar el archivo de hojas de estilo, el cambio se verá reflejado en todos los controles que utilicen dicha hoja de estilos. La desventaja es que aún hay que colocar en cada propiedad de los controles el nombre del estilo CSS.

Para superar las limitaciones de las hojas de estilo CSS, utilizaremos Temas y Skins.

Tema.- Un tema es una colección de valores de propiedades que nos permiten definir la apariencia de páginas y controles, para luego aplicar esta apariencia a través de toda la aplicación Web asegurando la consistencia de la interfaz de usuario.

Los temas están compuestos por un conjunto de elementos como: Skins, hojas de estilo (CSS), imágenes y otros recursos; como mínimo un tema debe contener skins; los temas se crean en carpetas especiales del Sitio Web (App_Themes).

Skin.- Son archivos con extensión .skin y contiene valores para propiedades de controles individuales como GridView, DetailsView, etc. En la definición del skin se indica a qué control le corresponde.

Ejemplo.- El ejemplo que presentamos es bastante sencillo para ver como agregar temas a un Sitio Web.

1. Agregar un nuevo archivo de hoja de estilos, le podemos poner como nombre “Estilos.css”, en este archivo definimos los estilos que tendrá nuestro sitio web por ejemplo:

.SelectedDayStyle
{
    background-color: #41519A;
    font-weight: bold;
    color: White;
}

Así todos los estimos que vamos a necesitar para definir nuestros skins.

2. Luego agregamos un nuevo skin mediante, agregar nuevo elemento de Visual Studio, como nombre le podemos poner “GridView.skin”, visual estudio nos alertara que estamos intentando crear un skin dentro del sitio web, y nos sugiere crear una carpeta especial para los temas a lo cual respondemos que si; si todavía no existía ningún skin, visual Studio creará la carpeta “App_Themes” y dentro de esta carpeta creará un tema con el mismo nombre del skin, y el nuevo skin dentro del tema, el contenido del skin es similar al siguiente:

<asp:GridView runat="server" CssClass="DataWebControlStyle">
     <AlternatingRowStyle CssClass="AlternatingRowStyle" />
     <RowStyle CssClass="RowStyle" />
     <HeaderStyle CssClass="HeaderStyle" />
     <FooterStyle CssClass="FooterStyle" />
     <PagerStyle CssClass="PagerStyle" />  
</asp:GridView>

Todos los estilos a los que se hace referencia en el skin deben estar previamente definidos en el archivo de hojas de estilo.

Este skin se encargará de poner automáticamente los estilos a los GridView de nuestro sitio web.

3. Una vez creado el tema con sus respectivos skins, es hora de aplicar los temas a nuestro sitio web, podemos aplicar los temas página por página o aplicarlo a todo el sitio web, mediante el archivo de configuración, utilizaremos la segunda forma para lo cual tenemos que agregar en el archivo de configuración la siguiente línea, suponiendo que el tema se llama “Estandar”.

<pages styleSheetTheme="Estandar" />

4. Finalmente tenemos que hacer una referencia al archivo de hojas de estilo desde nuestra página:

<head runat="server">
     <title>Demos Skins</title>
     <link href="Estilos.css" rel="stylesheet" type="text/css" />
</head>

Ahora dependiendo de los skins que hayamos creado para los temas al agregar los controles a nuestra página tomarán automáticamente los estilos del tema.

Temas

Descargar Ejemplo: Ejemplo Temas y Skins
Favor de darle clic derecho y guardar destino como…, una vez descargado cambiar la extensión a .zip, y descomprimirlo (todo esto porque no me dejan subir archivos zip).

De la siguiente página se puede descargar un sitio web con algunos temas listos para utilizar: .Net Treats & Tricks