“It’s not human error, it’s the chair-to-keyboard interface that’s broken.”

“No es error humano, es el interfaz silla-teclado que está estropeado.”

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

Supongamos que queremos crear una de esas maravillosas listas dobles de items que nos permita pasar el objeto seleccionado de una lista a otra y viceversa. Esto no tiene ningún secreto, pero si quisieramos que al volver a pasar un item de la segunda lista a la original lo hiciera en la posición en la que estaba originalmente, la cosa se complica un poco.

Esta es una solución. Quizás no la mejor, pero sirve:

Para esto lo primero que tendremos que tener es 3 controles ListBox; dos para las listas de origen y destino, y uno oculto para guardar estáticamente la lista original.

    <asp:ListBox ID="lstOrigen" runat="server" Width="600px" Height ="150px"></asp:ListBox><br /><br />
    <asp:ListBox ID="lstOculto" runat="server" Width="1px" Height ="1px" style="display:none"></asp:ListBox><br />
    <asp:ListBox ID="lstDestino" runat="server" Width="150px" Height ="150px"></asp:ListBox>

Seguidamente, añadiremos nuestro código javascript maravilloso:

       function Add(){
           var lbOrigen = document.getElementById('lstOrigen');
           if(lbOrigen.options.selectedIndex > -1){
                var lbDestino =  document.getElementById('lstDestino'); //obtenemos el contro listbox
                var selectedText = lbOrigen.options[lbOrigen.options.selectedIndex].text;
                var selectedValue = lbOrigen.options[lbOrigen.options.selectedIndex].value;
                for (var i=0; i < lbDestino.options.length; i++) //buscamos coincidencias
                {
                    if (lbDestino.options[i].value.toLowerCase().match(selectedValue.toLowerCase()))
                    {
                                  return false;
                    }
                }
                  var opt = document.createElement("option");
                  opt.text = selectedText;
                  opt.value = selectedValue;
                  lbDestino.options.add(opt);
                  lbOrigen.options.remove(lbOrigen.options.selectedIndex);
           }
        }
        function Remove(){
           var lbDestino = document.getElementById('lstDestino');
           if(lbDestino.options.selectedIndex > -1){
                var lbOculto =  document.getElementById('lstOculto'); //obtenemos el contro listbox
                var lbOrigen =  document.getElementById('lstDestino'); //obtenemos el contro listbox
                var selectedText = lbDestino.options[lbDestino.options.selectedIndex].text;
                var selectedValue = lbDestino.options[lbDestino.options.selectedIndex].value;
                var found = 0; //flag que nos indica si hemos encontrado el item en el listado de destino
                clearListBox(lbOrigen); //limpiamos la lista de origen
                for (var i=0; i < lbOculto.options.length; i++) //buscamos coincidencias del listado original
                {
                    for (var j=0; j < lbDestino.options.length; j++) //buscamos en el listado de añadidos
                    {
                        if (lbOculto.options[i].value.toLowerCase().match(lbDestino.options[j].value.toLowerCase())) //el item fue movido
                        {
                              found = 1; //hemos encontrado el item
                              if (lbOculto.options[i].value.toLowerCase().match(selectedValue.toLowerCase())){
                                 //si el item esta seleccionado lo añadimos al listado de origen
                                 lbOrigen.options.add(crearListItem(selectedText,selectedValue));
                                 break;
                              }
                        }
                    }
                       if (found == 0){ //si no se ha encontrado significa que no está en la lista de destino y debemos añadirlo
                        lbOrigen.options.add(crearListItem(lbOculto.options[i].text,lbOculto.options[i].value));
                       }else{
                         found = 0; //reiniciamos el flag
                       }
 
 
                }
                  lbDestino.options.remove(lbDestino.options.selectedIndex);
           }
        }
 
        function crearListItem(text, value){
                  var opt = document.createElement("option");
                  opt.text = text;
                  opt.value = value;
                  return opt;
        }
        function clearListBox(lb){
            for (var i=lb.options.length-1; i>=0; i--){
                lb.options[i] = null;
            }
            lb.selectedIndex = -1;
        }

Bueno, la función “Add” añadirá el item seleccionado de la lista original a la lista de destino. Para ello comprobamos si hay algun item seleccionado y si este no se encuentra ya en la lista destino, lo añadimos y lo eliminamos del origen.

La función remove es más complicada. Inicialmente limpiará la lista de origen (donde queremos devolver el item a su posición original) y la volvera a reconstruir item por item.

Para ello recorrera la lista oculta(donde tenemos el listado completo de items originales) y buscara coincidencias en la lista de destino. Si no existe coincidencias significa que dicho item no se movió, por lo que lo recuperamos en la lista de origen. Si lo encuentra significa que dicho item lo hemos movido anteriormente, por lo que tenemos que comprobar si es el item que queremos devolver a su posición inicial (esta seleccionado). De ser así, lo añadiremos igualmente a la lista de origen, recuperando asi el item en la posición original (recordad que todo este proceso se realiza en función a la lista oculta), si no está seleccionado, lo obviamos ya que dicho item permanecerá en la lista de destino.

Finalmente eliminamos el item que hemos movido de la lista destino.

Las dos últimas funciones sirven para borrar todos los items de un ListBox y para crear un ListItem con un value y text determinados.

Un saludo

“I don’t code for fun. I code for money, but I also have fun doing it.”

“No programo por diversión. Programo por dinero, pero igualmente me divierto haciéndolo.”

Puedes necesitarla por varias razones; si quieres programar para Mac, para el iPhone, o si simplemente quieres echarle un vistazo al sistema. Ahora bien, no recomiendo usarlo como sistema para el “día a día” ya que es bastante inestable y tiene muchos problemas, pero para salir del paso sirve.

NOTA: Antes de comenzar hay que matizar que los pasos que aquí explicaré pueden no ser los mismos para todos los sistemas. VMWare virtualiza un equipo en funcion del hardware donde se instale, por lo que tendréis que usar un poco de lógica e intuición si no os funciona.

Lo primero que necesitamos es un VMWare versión 6.5 o posterior y una imagen de Leopard. Recomiendo encarecidamente una que se llama iatkos v7 (podeis buscar por Google que seguro que la encontrais). Esta imagen tiene la virtud de poseer una versión de Leopard 10.5.7, lo cual es muy bueno para instalar SDK relativamente modernos. (Podremos instalar hasta cualquier SDK 3.1.x del iPhone)

PASO 1 “Creando la máquina virtual”

1.- Creamos una nueva máquina virtual desde el VMWare.
2.- Seleccionamos Custom.
3.- Elegimos el sistema operativo, en nuestro caso tenemos dos opciones; o Windows NT u Otros > FreeBSD64. Recomiendo comenzar con Windows NT y probar FreeBSD64 cómo segunda opción.
4.- Cuando nos pida el disco de instalación seleccionamos la imágen .iso de iatkos que ya deberíamos tener.
5.- Elegimos 1 PROCESADOR y un mínimo de 512RAM.
6.- En red elegimos host-only ya que le meteremos un parche después para que funcione.
7.- En SCSI Adapter elegimos LSI Logic, creamos un nuevo disco virtual tipo IDE y ponemos mínimo 16GB (Si queremos instalar el SDK para programar recomiendo al menos 20GB)
8.- Finalizamos la creación de la máquina virtual.

PASO 2 “Instalación”

1.- Llegamos a la parte de la instalación. Arrancamos la máquina y cuando nos indique que presionemos F8 durante el arranque para entrar en el modo consola.
2.- Escribimos: “-v busratio=7 cpus=1″ y pulsamos Enter.
3.- La instalación comienza y nos aparece la primera pantalla, que aceptaremos dandole al boton de la flecha.
4.- Antes de continuar vamos a Utilities y de ahí a Disk Utility.
5.- Seleccionamos la partición de 20GB que hemos creado y le damos a Erase. (Ponemos el nombre que queramos y dejamos el formato por defecto)
6.- Le damos a salir pulsando la X roja y continuamos la instalación, eligiendo la nueva partición que hemos creado.
7.- Antes de terminar, le daremos al boton de customize que nos habrá aparecido y añadimos los siguientes add-ons:
– x86patches -> kernel -> voodoo 9.7.0
– drivers->system-> sata-ide -> intel sata/ide (o amd si tenemos un amd)
– [OPCIONAL] drivers -> USB (Si tienes pensado usar algun disco USB o realmente lo necesitas. Aunque suele pegarse con los demás dispositivos USB)
[Ahora tendrás que echarle imaginación]
Si usas ratón o teclado USB deberías seleccionar:
– x86patches -> ACPI -> x86 ACPI
– ps2-> apple ps2 mouse & keyboard
Si usas ratón y teclado PS2:
– ps2 -> voodoo ps2 mouse & keyboard
8.- Aceptamos y comenzamos la instalación. (podemos darle a skip en la comprobación)

PASO 3 “Primer arranque”

1.- Una vez termina la instalación se reiniciará el sistema y pueden ocurrir dos cosas. Que te arranque a la primera sin tocar nada (tienes una flor en el culo) o que empiece a entrar en un maravilloso bucle de reinicios infinito. (Si tienes activadas las alertas te dara un petardazo del kernel y al aceptar se reiniciará).

2.- Lo que tenemos que hacer es darle a F8 (aunque creo que cualquier tecla sirve), durante el arranque y escribir nuestro maravilloso: “-v busratio=7 cpus=1″ y darle a ENTER. (Estoy convencido de que se podría configurar para no tener que escribirlo cada arranque, pero no he conseguido hacerlo, así que en cada reinicio tendremos que hacer lo mismo para que reinicie)

El parámetro -v activa el modo VERBOSE, que nos dirá paso por paso lo que está haciendo el sistema. Es bastante útil si no conseguimos arrancar para saber qué está causando el problema. Si es un driver problemático, la última linea antes del petardazo nos indicará cual es. En cualquier caso, hay que tener paciencia con el arranque; si no arranca, probad varias veces antes de descartar que la máquina no funcione.

3.- Si dios quiere arrancaremos el sistema y todo funcionará correctamente (más o menos, el sonido es un coñazo configurarlo)
4.- Nos pedirá que configuremos nuestro equipo y fiesta. Tendremos nuestra máquina virtual de Leopard 10.5.7.

PASO 4 “Configurando la red”

El último paso que nos queda es configurar la red. Es opcional ya que podemos no necesitarla.

1.- Para ello tendremos que bajarnos el siguiente archivo: http://rapidshare.com/files/353866969/Maxxuss-AMDPCNET-v1.0.iso
2.- Una vez lo tengamos, lo descomprimimos y nos aparecerá una ISO. Con la VM apagada seleccionamos este ISO en la unidad de CD/DVD.
3.- Antes de arrancar la máquina, vamos al directorio donde la tengamos en nuestro equipo y editamos el archivo .vmx con el Notepad.
4.- Agregamos la siguiente linea: ethernet0.virtualDev = “e1000? Guardamos y arrancamos el sistema.
5.- Una vez dentro de Leopard de nuevo, copiamos el contenido del ISO que hemos cargado en cualquier lugar localizable.
6.- Iniciamos el Terminal y escribimos lo siguiente:
$ sudo ./install.sh
$ sudo reboot

(NOTA: Debemos estar localizados en la ruta donde hayamos copiado el contenido del ISO, y dentro de la carpeta. Nos pedirá la contraseña del sistema y reiniciará la máquina)

7.- Al reiniciar, iremos a Ajustes -> Network y nos indicará que hay un nuevo dispositivo. Aceptamos y seleccionamos DHCP. Cerramos y voila! Deberíamos tener acceso por red a nuestro equipo y a internet.

Eso es todo amigos! Espero que haya sido de utilidad.

Un saludo

Cuando creamos un instalador para alguno de nuestros proyectos de Visual Studio podemos necesitar incluir como requisito tener instalada algun paquete o complemento e incluso podermos querer añadirlo al instalador para que, si no está instalado, lo haga.

A esto se le conoce como Bootstrapping y es bastante sencillo.

Para ello lo primero que tenemos que hacer es crear un paquete personalizado para cada complemente que queramos añadir como prerrequisito a nuestro instalador. Por ejemplo, si queremos hacer un instalador para nuestra aplicacion y nos damos cuenta de que requiere el Adobe Reader, podemos hacer un paquete llamado AdobeReader con el redistribuible del Adobe Reader.

Antes de nada saber que estos paquetes se añaden desde Visual Studio a la hora de crear un instalador. Dentr del proyecto de instalación, si vamos a Propiedades del proyecto y ahí a Requisitos Previos obtendremos una lista de los paquetes por defecto que se incluyen en el SDK de Visual Studio, que será similar a la siguiente imagen:

Cada uno de estos requisitos equivale a una carpeta con un ejecutable, unos manifiestos (XML) y otros archivos opcionales de configuración.
Todos estos paquetes se encuentran en una ruta del disco que dependerá de la versión de Visual Studio que estemos utilizando:

Visual Studio 2005: C:\Archivos de programa\Microsoft Visual Studio 8\SDK\v2.0\BootStrapper\Packages
Visual Studio 2008: C:\Archivos de programa\Microsoft SDKs\Windows\v6.0A\Bootstrapper\Packages

Por lo que lo primero que debemos hacer es ir a la ruta que nos corresponda y crearnos una carpeta con el nombre de nuestro paquete, en nuestro caso “AdobeReader”.

El siguiente paso será meter en dicha carpeta el ejecutable que nos instala el AdobeReader. (Hay que tener en cuenta que existen dos versiones de este instalable, al igual que en muchos otros. Una completa que se instala completamente offline y otra online que descarga contenido desde Internet. La primera hara más pesado el contenido de la instalación pero no requerirá acceso a Internet, y la segunda pues obviamente lo contrario)

El tercer paso es crear el manifiesto “Product.xml”. Vamos, crear un XML con este nombre al que añadiremos lo siguiente:

<?xml version="1.0" encoding="utf-8"?>
<Product ProductCode="AdobeReader" xmlns="http://schemas.microsoft.com/developer/2004/01/bootstrapper">
  <PackageFiles CopyAllPackageFiles="false">
    <PackageFile Name="AdobeReader-setup.exe" Hash="F774D8891793C46BDDC1F9418D8E427B6CBAE26D" />
  </PackageFiles>
  <InstallChecks>
    <FileCheck Property="" SpecialFolder="ProgramFilesFolder" SearchPath="C:\Archivos de programa\Adobe\Reader 8.0\Reader" FileName="AcroRd32.exe" />
  </InstallChecks>
  <Commands Reboot="Defer">
    <Command PackageFile="AdobeReader-setup.exe">
      <ExitCodes>
        <DefaultExitCode Result="Success" String="Anunexpectedexitcodewasr" FormatMessageFromSystem="true" />
      </ExitCodes>
    </Command>
  </Commands>
</Product>

Este es el manifiesto obligatorio para que el paquete sea reconocido por el Visual Studio. Pero también tenemos el manifiesto “Package.xml” que añadirá información adicional a nuestro paquete tal como un EULA, o el idioma de la instalación:

<?xml version="1.0" encoding="utf-8" ?>
<Package
  xmlns="http://schemas.microsoft.com/developer/2004/01/bootstrapper"
  Name="AdobeReader"
  Culture="Culture"
  LicenseAgreement="eula.txt">
 
  <PackageFiles>
    <PackageFile Name="eula.txt"/>
  </PackageFiles>
 
  <Strings>
    <String Name="DisplayName">AdobeReader</String>
    <String Name="Culture">es</String>
    <String Name="NotAnAdmin">Debes tener permisos de administrador para poder ejecutar este paquete.</String>
    <String Name="GeneralFailure">A ocurrido un error al intentar instalar el paquete.</String>
  </Strings>
</Package>

En este caso, si añadimos una referencia a “eula.txt” tendremos que añadir el correspondiente fichero con el texto que se deberá mostrar en el EULA.

El cuarto paso es importante, y es que si tenemos el Visual Studio instalado en la lengua de Shakespeare, tendremos que añadir un manifiesto por defecto para dicho idioma. Bastará con crear una carpeta llamada “es” dentro de nuestro paquete y poner una copia del fichero “Product.xml” dentro.

Y ya está! Si volvemos a la ventana del Visual Studio donde se mostraban los prerrequisitos por defecto veremos que aparece nuestro paquete “AdobeReader”. Molto facile e divertente.

Y ahora viene la parte buena, que la he puesto al final para joder un poco, que hay que saber cómo funcionan las cosas y hacerlas a lo Clint Eastwood antes de recurrir a lo fácil. Y es que existe una maravillosa herramienta de Microsoft que nos hace todo el trabajo en unos cuantos clicks. Se llama Bootstrapper Manifest Generator y se puede obtener gratuitamente desde la siguiente URL:

http://code.msdn.microsoft.com/bmg

La aplicación es bastante sencilla y nos da la posibilidad de crear manifiestos mas complejos añadiendo condiciones y otros parámetros de configuración.

Espero que fuera de ayuda para alguien que lo necesite.

Un saludo

En ocasiones nos encontraremos que tenemos que mostrar un listado de elementos excesivamente largo, y aunque volcarlos en un ListBox sea una solución, no lo es de cara al usuario, que tendrá que desplazarse por todo el control en busqueda del item que quiera seleccionar.

Para solucionarlo podemos hacer uso de un script muy sencillo que nos permitirá buscar y seleccionar automaticamente el primer item que incluya el texto introducido, y conforme vayamos introduciendo más carácteres refinará la busqueda.

Para empezar necesitaremos un control ListBox donde tendremos los elementos a buscar y un HTML TEXT donde realizaremos las busquedas. Es recomendable usar un INPUT TEXT en lugar de un TextBox dado que los eventos de cliente del HTML TEXT son reconocidos en tiempo de diseño, mientras que en el TextBox no, aunque a efectos prácticos obtendremos el mismo resultado.

En el control TEXT añadiremos el evento “onkeyup” para llamar a la función “busqueda”.

<asp:ListBox ID="lstItems" runat="server" Width="154px">
        <asp:ListItem>Alda</asp:ListItem>
        <asp:ListItem>Aldana</asp:ListItem>
        <asp:ListItem>Aldair</asp:ListItem>
        <asp:ListItem>Albano</asp:ListItem>
        <asp:ListItem>Brian</asp:ListItem>
        <asp:ListItem>Cinnia</asp:ListItem>
        <asp:ListItem>Elba</asp:ListItem>
        <asp:ListItem>Fiona</asp:ListItem>
        <asp:ListItem>Ginebra</asp:ListItem>
        <asp:ListItem>Iñigo</asp:ListItem>
        <asp:ListItem>Kenneth</asp:ListItem>
        <asp:ListItem>Marvin</asp:ListItem>
        <asp:ListItem>Oscar</asp:ListItem>
        <asp:ListItem>Quinn</asp:ListItem>
        </asp:ListBox><br />
        <input type="text" id="txtBusqueda" runat="server" onkeyup="busqueda(this)" />

Y a continuación añadiremos el siguiente script:

<script language="javascript" type="text/javascript">
    function busqueda(txt){
        var l =  document.getElementById('lstItems'); //obtenemos el contro listbox
        if(txt.value == ""){
            LimpiarListBox(l); //si el campo de busqueda esta vacio quitamos seleccion
        }else{
            for (var i=0; i < l.options.length; i++) //buscamos coincidencias
            {
                if (l.options[i].value.toLowerCase().match(txt.value.toLowerCase()))
                {
                    l.options[i].selected = true;
                    return false;
                }else{
                    LimpiarListBox(l); //si no se encuentran coincidencias quitamos seleccion
                }
            }
        }
    }
 
    function LimpiarListBox(lb){
        lb.selectedIndex = -1;
    }
</script>

Y voilá, ya tenemos nuestro sistema de búsqueda. Hay que decir que este sistema es muy sencillo pero que se puede complicar todo lo que queramos. Por ejemplo para que busque desde el principio o en una parte de la cadena o value del ListItem. También podemos modificar el evento para que solo busque al perder el foco y mil cosas más.

Si se diera el caso de tener que seleccionar varios items convendría añadir un segundo ListBox de elementos seleccionados y añadir uno a uno los elementos que queramos.

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

Hace unos días tuvimos un debate entre los compañeros. No voy a explicar la diferencia entre los parámetros pasados por valor o por referencia, así que es aconsejable tener claros los conceptos antes de seguir leyendo.

En este debate, uno de mis compañeros argumentaba que todos los parámetros en .NET se pasan por defecto por valor, a no ser que se indique lo contrario. Mientras que el otro sostenía que esto no era así para los objetos (tipos) que, dado que cuando declaramos un objeto realmente estamos declarando una referencia de dicho objeto, estos se pasaban por referencia en las funciones y no por valor.

Para demostrar este último argumento creó un código simple tal que:

            StringBuilder y = new StringBuilder();
            y.Append ("hello");
            FooByVal (y);
            Console.WriteLine (y);
            FooByRef (ref y);
            Console.WriteLine (y);
 
        void FooByVal (StringBuilder x)
        {
            x.Append (" and goodbye");
        }
 
        void FooByRef (ref StringBuilder x)
        {
            x.Append (" world");
        }

El resultado fué que, en ambos casos, el objeto StringBuilder y tenía añadidas las cadenas incluidas en ambas funciones, fuera este pasado por referencia o por valor.

¿Podemos concluir que, en .NET, da lo mismo pasar un objeto por referencia que por valor?

Exactamente no. Para entender la diferencia vamos a representar gráficamente la referencia o puntero de nuestro objeto Y, y el espacio en memoria donde se guarda dicho objeto.

En esta imagen vemos cómo, al declarar el objeto Y, estamos creando una referencia o puntero para dicho objeto. Y al inicializar usando new, reservamos en memoria el espacio que utilizaremos para dicho objeto.

Tal y como vemos en la imagen, la diferencia entre pasar el objeto por referencia o por valor está en que, en el primer caso le pasamos la referencia original a dicho objeto, mientras que en el segundo le pasamos una copia de dicha referencia al mismo objeto. En ambos casos estamos modificando el objeto original desde ambas funciones.

¿Donde está entonces la diferencia?

La diferencia se ve cuando, desde estas funciones modificamos no el objeto en memoria sino la referencia a dicho objeto. Por ejemplo:

            StringBuilder y = new StringBuilder();
            y.Append ("hello");
            FooByVal (y);
            Console.WriteLine (y);
            FooByRef (ref y);
            Console.WriteLine (y);
 
        void FooByVal (StringBuilder x)
        {
            x = new StringBuilder();
            x.Append (" and goodbye");
        }
 
        void FooByRef (ref StringBuilder x)
        {
            x = new StringBuilder();
            x.Append (" world");
        }

En el caso de FooByVal, el objeto Y con valor “hello” permanecerá inalterado al pasar por la función, ya que en esta estamos asignando un nuevo espacio en memoria para la copia de la referencia y modificando otro espacio diferente al original.

En el caso de FooByRef, sin embargo, al pasar la referencia original y volverla a inicializar estaremos asignando un nuevo espacio en memoria para la referencia original, perdiendo el contenido que hemos añadido previamente y asignando uno nuevo ” world”.

Basta con probar ambos casos para entender la diferencia.

En conclusión:

Ambos tenían razón en sus argumentos. Todos los parámetros en .NET son por defecto pasados por valor, pero dado que los objetos son realmente referencias, lo que estamos pasando por valor no es sino la referencia a dicho objeto en memoria.

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';
}