a nil value

Quizás en alguna ocasión hayamos querido mostrar una ventana “estilo modal” por encima del resto del formulario. Es algo muy usado en la programación web y que aumenta de forma considerable la usabilidad del interfaz. Sin embargo, en aplicaciones con muchos controles, nos hemos podido encontrar con un desagradable problema, y es que los controles asp.net DropDownList (Select en HTML) ignoran totalmente el estilo z-index de las capas, y como consecuencia aparecen por encima de nuestra ventana modal, estropeando todo el buen aspecto de la aplicación.

Existen dos soluciones conocidas al problema:

La primera, aunque funciona, conlleva la creación de un script que carga mucho trabajo a la aplicación, y según la cantidad de controles que tengamos, puede no ser una posible alternativa.

for (f = 0; f < document.forms.length; f++)
{
    var elements = document.forms[f].elements;
    // looping through all elements on certain form
 
    for (e = 0; e < elements.length; e++)
    {
        if (elements[e].type == "select-one")
        {
            elements[e].style.display = 'none';
        }
    }
}

Este script recorre todos los controles de nuestro formulario, ocultando aquellos que sean del tipo Select. Claro que si tenemos un número finito de este tipo de controles podemos obviar el bucle e ir directamente al grano.

Una vez los tengamos ocultos podemos mostrar nuestra ventana modal sin riesgo a que sea destrozada por los Select, que estarán ocultos.

Por supuesto hay que controlar que, una vez hayamos acabado con la ventana modal, hay que volver a mostrar estos controles usando el mismo sistema.

La segunda alternativa es mas interesante todavía, aunque parece más un “hack” que otra cosa, y desconozco hasta que punto sería compatible con todos los navegadores. Consiste en hacer uso del elemento “iframe”. Este elemento tiene la característica de aparecer siempre por encima de cualquier otro control web, es decir, incluso por encima de los DropDownList. Y diréis, ¿pero eso no sustituye un problema por otro? Nó exactamente, ya que este elemento admite el estilo z-index y ¡lo cumple!.

Vamos, que podemos mostrar una especie de panel separador entre los controles DropDownList y la ventana modal que queramos mostrar tan solo asignandole un z-index inferior al de nuestra ventana.

Primero añadiríamos el iframe dentro de la ventana que vamos a ocultar y mostrar. Tan solo se mostrará cuando mostremos la ventana.

<iframe id="iframe" class="iframeLayer" frameborder="0"></iframe>

Y segundo, añadiremos el estilo correspondiente tal que:

iframe.iframeLayer
{
    left:600px;
    top:300px;
    position: absolute;
    width: 200px;
    height: 100px;
    z-index: 10;
 
}

Hay que tener especial cuidado en especificar exactamente la misma posición y tamaño que la ventana modal. El iframe se mostrará como un area blanca y ocultará todo lo que esté debajo suyo, pero mostrará nuestra ventana siempre que tenga un z-index superior a 10.

El problema de este método es que queramos crear algo más complejo, o por ejemplo crear un fondo transparente, ya que en ese caso, en lugar de crear un iframe para el area de la ventana, tendremos que crear un iframe para el area de cada control DropDownList que tengamos, lo cual ya es otra historia.

La elección es vuestra. Un saludo

Fuente: CodeProject

Cuando se trabaja de forma asíncrona con AJAX y UpdatePanels resulta imprescindible implementar procesos para informar al usuario de que se están efectuando actualizaciones en el servidor.

Por defecto, ASP.NET AJAX nos proporcionar el complemento UpdateProgress, que unido a un ScriptManager y un UpdatePanel permiten mostrar cualquier indicador mientras el UpdatePanel esta trabajando asíncronamente.

No obstante el UpdateProgress es limitado si queremos realizar tareas o efectos mas complicados. Por ejemplo posicionar el loader dinamicamente en la pantalla segun lo que se actualice, realizar alguna accion de Jscript antes de comenzar la actualización, o permitir al usuario cancelar el proceso.

Para ello existe un maravilloso y muy simple javascript que controla dos eventos importantísimos de la página; el comienzo y el fin del httprequest.

<script language="javascript" type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(
  function(sender, e)
  {
        $get('cargador').style.display="block";
   });
 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(
  function(sender, e)
  {
        $get('cargador').style.display="none";
   });
 
</script>

Donde “cargador” podría ser, por ejemplo:

<div id="cargador" runat="Server" style="display:none">
        <table width="200">
            <tr>
                <td height="50" valign="bottom" align="center">Cargando...</td>
            </tr>
            <tr>
            <td height="50" valign="top" align="center"><img alt="cargando..." src="../img/ajax-loader.gif" /></td>
            </tr>
        </table>
    </div>

add_beginRequest se lanzaría antes de comenzar el evento de solicitar información al servidor y add_endRequest justo despues de terminar todo el proceso.

Para cancelar el Request bastaría con mostrar un boton en el beginRequest que lanzara el siguiente script:

function CancelarPostback() {
    var man= Sys.WebForms.PageRequestManager.getInstance();
    if (man.get_isInAsyncPostBack())
        man.abortPostBack();
    }

Aunque ojo! con este “Cancelar” ya que, si bien cancelara el request y forzando el endRequest, el proceso en el servidor es muy probable que se haya ejecutado ya. Mi consejo es que se utilice unicamente para procesos de lectura y no de escritura.

Un saludo

Bueno, esta es sencilla y fácil de encontrar pero nunca se sabe cuando puede ser útil. Ahora bien, puede confundir al usuario.

<asp:CheckBox runat="server" ID="chkPrueba" onclick="cambiarTextoCheckBox(this);" />

Y la función Javascript:

function cambiarTextoCheckBox(checkbox)
{
  if (checkbox.checked)
    checkbox.nextSibling.innerHTML = 'Activado';
  else
    checkbox.nextSibling.innerHTML = 'Desactivado';
}

Si generamos un UserControl dinámicamente y queremos pasarle parámetros desde la página principal para poder trabajar con ellos tenemos dos métodos:

Metodo fácil:

Utilizando propiedades públicas en nuestro UserControl tal que:

myUserControl ctrl = this.Page.LoadControl("myUserControl.ascx");
ctrl.value1 = "First Parameter";
ctrl.value2 = 200
Panel.Contrlols.Add(ctrl);

Obviamente tendremos que tener dos propiedades publicas en nuestra clase myUserControl para los dos parámetros que queremos pasar.

Y el método ninja:

Añadimos la siguiente función en la página donde hagamos queramos cargar dinámicamente el UserControl:

private UserControl LoadControl(string UserControlPath, params object[] constructorParameters)
{
List constParamTypes = new List();
foreach (object constParam in constructorParameters)
{
constParamTypes.Add(constParam.GetType());
}
 
UserControl ctl = Page.LoadControl(UserControlPath) as UserControl;
 
// Find the relevant constructor
ConstructorInfo constructor = ctl.GetType().BaseType.GetConstructor(constParamTypes.ToArray());
 
//And then call the relevant constructor
if (constructor == null)
{
throw new MemberAccessException("The requested constructor was not found on : " + ctl.GetType().BaseType.ToString());
}
else
{
constructor.Invoke(ctl, constructorParameters);
}
 
// Finally return the fully initialized UC
return ctl;
}

Añadimos en nuestro UserControl dos constructores; uno vacío y otro con los parámetros que le queramos pasar.

public partial class myUserControl : System.Web.UI.UserControl
{
private string value1;
private int value2;
public myUserControl ()
{
}
 
public myUserControl (string parameter1, int parameter2)
{
this.value1 = parameter1;
this.value2 = parameter2;
}
}

Y por último cuando queramos añadir dinámicamente el control:

Control ctrl = LoadControl("myUserControl.ascx","First Parameter",200) ;
Panel.Controls.Add(ctrl) ;

Fuente: http://blah.winsmarts.com/2006/05/20/loadcontrol-a-usercontrol–and-pass-in-constructor-parameters.aspx

Siguiendo con la temática del artículo anterior sabemos que conseguir un postback es tarea fácil con la mayoría de los controles web de ASP.NET, pero puede ocurrir que queramos forzar a la página a realizar una acción de postback desde un lugar que no este preparado para ello.

Para conseguir esto utilizaremos la funcion __dopostback:

function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}

Donde eventTarget es el control que realiza el postback y eventArgument el argumento que queremos enviar junto con el postback (si es que queremos).

Llamando a esta función desde cualquier evento de cualquier control HTML conseguiremos enviar la página al servidor. Especialmente útil cuando si estamos generando controles dinámicamente que realicen postbacks al servidor y queremos controlarlas manualmente.

Un saludo

Si hemos jugado con las opciones de Google Chrome, nos habremos fijado en que este utiliza la misma configuración de red que Internet Explorer, es más, al abrir la configuración de red de Chrome nos abrirá la de Internet Explorer, impidiéndonos utilizar una configuración independiente para Chrome.

Esto es un problema si por ejemplo queremos utilizar Chrome para navegar a través de un proxy y Explorer unicamente para depurar nuestras aplicaciones web.

Podemos solucionarlo de manera sencilla añadiendo el parámetro –proxy-server en la ruta de ejecución del programa. Para esto haremos lo siguiente:

1.- Creamos un acceso directo a Google Chrome (Si no tenemos ya uno)
2.- Editamos sus propiedades
3.- Vamos a “Destino” y añadimos al final de la ruta despues del ejecutable chrome.exe lo siguiente: –proxy-server=[servidor]:[puerto] indicando obviamente el nombre o IP del servidor y número del puerto.

Por ejemplo:
“C:\Documents and Settings\usuario\Configuración local\Datos de programa\Google\Chrome\Application\chrome.exe” –proxy-server=localhost:8080

Si quisiéramos ignorar un proxy configurado en Internet Explorer bastaría con dejarlo vacio (EJ: –proxy-server=)

Un saludo

Echándole un vistazo a las estadísticas de Google en mi antiguo blog, y a pesar de tenerlo bastante abandonado, me he fijado en que los artículos más visitados son aquellos que hablan de temas de programación o temas técnicos (cómo se hace esto o aquello), así que he decidido separar el blog en dos partes;

En www.nilart.com seguiré escribiendo, muy de vez en cuando, artículos de opinión, cosillas interesantes o graciosas.

Y, apartir de ahora, en www.gzafra.com incluiré unicamente artículos de programación o relacionados directamente con la informática. Asi mismo, incluiré todo el contenido que había en la antigua página web que, para que engañarnos, era un poco birria.

La intención no es de ganar visitas o hacerme famoso, simplemente ir juntando consejos, trucos o miniguías en un lugar común, para la posteridad

Un saludo

Una técnica frecuente cuando realizamos grandes proyectos web es crear un log o registro de todos los errores que suceden en el servidor de nuestra aplicación web, de manera que, aunque no estemos depurando podamos conocer cuando y donde falla nuestra aplicación. Es especialmente útil cuando es utilizada por un gran numero de usuarios, pues estos siempre acaban encontrando fallos.

Sin embargo, en muchos casos, nos habremos dado cuenta de que la descripción del error que nos aparece, a pesar de ser muy detallada, no nos da una información esencial, la clase donde ocurre el error y la linea.

Estos datos se obtienen facilmente en el equipo local cuando depuramos, pero se pierden cuando la aplicación se ejecuta en el servidor con el debug desactivado. Para añadir esta información a la descripción del error deberemos hacer dos cosas:

1.- En las propiedades del proyecto, dentro del Visual Studio, debemos ir a la pestaña Compilar y a Opciones de compilación avanzadas. Dentro cambiaremos “Generar información de depuración” a pdb-only.

2.- Ahora solo tenemos que volver a generar nuestra aplicación y recordar subir el fichero .pdb del proyecto que se genera junto a la dll en la carpeta “bin”.

Con este método obtendremos en la información del Stack, el nombre del fichero donde ocurre el error y la linea exacta en la que se lanzó la excepción.

Otro día explicaré el método entero parar generar un log de errores, pero esto, mediante un poco de Google, es bastante sencillo.
Saludos