Implementacion de CallBack utilizando ASP.NET 1.1 y Javascript

Introducción

En estos días en los que se considera de vital importancia el manejo adecuado de recursos, muchas veces nos encontramos con el problema que causan los refrescos, especialmente cuando tenemos dos listas(combos) dependientes, en asp.net 1.1 esto en parte se soluciona con SmartNavigation, pero la utilización de este a su vez trae diferentes consecuencias (problemas con Response.Redirect, el hecho de que sólo sirve en IE, etc.), frente a esto se propusieron algunas soluciones como ésta para evitar el parpadeo de las páginas.

Otra solución, en la cual se basa este artículo, es el que se utiliza en Google Suggest, que utiliza un objeto de javascript denominado XMLHttpRequest, que permite hacer llamadas sin el refresco de la página para obtener documentos XML y así poder interpretarlos o mostrarlos, esto funciona en la mayoría de navegadores (IE, Mozilla 1.0/Firefox, Opera, Safari 1.2).

Explicación

Para efectos de prueba se tomará una relación maestro/detalle (las tablas Categories y Products de la base de datos Northwind), empezamos con una nueva página en la cual agregamos 2 DropDownList's. Se agrega el evento del lado del cliente onchange a categorias. Notar que al método CargarDocumento se le pasa el URL de la página que generará el documento XML y el evento para determinar el valor seleccionado de categorias.

html:
<p>
Categorías:
<select id="categorias" name="categorias"
onchange="CargarDocumento('http://localhost/Productos.aspx?idcat=',event)" runat="server">

</select>
</p>
<p>
Productos : <select name="productos" id="productos" runat="server">
</select>
</p>

En el evento Page_Load ponemos el código necesario para llenar categorias.

csharp:
public void Page_Load(){       
        if(!Page.IsPostBack){
                SqlConnection conexion;
                SqlCommand comando;
                conexion=new SqlConnection("server=localhost;uid=sa;pwd=;database=Northwind;");
                comando=new SqlCommand("select CategoryId as idcat, CategoryName as nombre from categories",conexion);
                conexion.Open();
                categorias.DataValueField="idcat";
                categorias.DataTextField="nombre";
                categorias.DataSource=comando.ExecuteReader(CommandBehavior.CloseConnection);
                categorias.DataBind();
                categorias.Items.Insert(0,"Seleccione una Categoria ...");
                productos.Items.Insert(0,"Seleccione un Producto ...");
        }
}

La siguiente porción código hace la petición para obtener los productos, en base a la categoría seleccionada

javascript:
function CargarDocumentoXML(url) {
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = procesar;
        req.open("GET", url, true);
        req.send(null);
    } else if (window.ActiveXObject) {
        isIE = true;
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = procesar;
            req.open("GET", url, true);
            req.send();
        }
    }
}

Se crea una nueva página que se encargará de recibir el ID de Categoría, y generar un documento XML Válido

csharp:
Response.ContentType = "text/xml";
string output='<?xml version="1.0" encoding="ISO-8859-1"?>';
output += "<productos>";
while (sdr.Read()){
        output += "  <producto>";
        output += "    <idprod>"+sdr["idprod"]+"</idprod>";
        output += "    <nombre>"+sdr["nombre"]+"</nombre>";
        output += "  </producto>";
}
output += "</productos>";
Response.Write(output);

Luego se agrega el código necesario para interpretar los datos obtenidos.

javascript:
function procesar() {
    if (req.readyState == 4) {
        if (req.status == 200) {
            limpiarProductos();
            cargarProductos();
         } else {
            alert("Hubo un problema al intentar obtener el documento XML: " + req.statusText);
         }
    }
}

Limitaciones

El objeto XMLHttpRequest funciona dentro del navegador, éste adopta las mismas políticas de seguridad para el mismo dominio con respecto al Javascript que se ejecuta.

Todos debe estar dentro del mismo dominio (los scripts que hacen dichas llamadas y la página que devuelve XML), esto significa que los scripts de cliente no pueden obtener servicios web de otros lugares y mostrarlos en su página, bajo estas circunstancias no se producen alertas de seguridad en los navegadores de los usuarios.

En ASP.NET 2.0 se mejora el manejo de Callback, que permite que código del lado del cliente puedan hacer llamadas a eventos del lado del servidor, recuperar estos valores y procesarlos. Sólo nos queda esperar la versión estable!.

Elementos Utilizados

Referencias

22 Replies to “Implementacion de CallBack utilizando ASP.NET 1.1 y Javascript”

  1. Tengo un problema con la implementación del CallBack, ya que tengo un problema cuando intento realizar una misma petición dos veces y el estado de la respuesta debe de ser dstinto, ya que al parecer cachea la respuesta recibida la primera vez que hago la petición. ¿¿Hay alguna forma de solucionarlo??.

  2. Hola!
    Podrías dar más detalles del problema que tienes, puedes hacerlo a traves de los foros o enviándome un mail a: alex (at) buayacorp (dot) com

  3. Hola Tengo problemas con el Postback en mi página.... me gustaria saber como hacer esto en Visual web 2005..
    Gracias

  4. Hola,

    Sol: Lamentablemente de delphi no sé nada, consultaré con un amigo para ver si puede ayudarte.

    Marcelo: Sería bueno que nos expliques qué quieres hacer en realidad, por lo que dices, me parece que es sencillo.

    Saludos

  5. hola.......tengo un problema al correr la aplicacion me manda el siguiente mensaje.........."Hubo un problema al intentar obtener el documento XML...no foun".......a que podra deberse esto......

  6. Hola,

    Ese error probablemente se deba a que estás poniendo mal la dirección de la página que te devuelve los datos (xml)

    Saludos

  7. muchas Gracias Alex..........eres todo un master........efectivamente...era la URL la que me estaba fallando.

    gracias

  8. Miguel, este ejemplo es muy antiguo y está limitado sólo a cierta funcionalidad, te sugiero que uses algún framework AJAX para .NET, puedes usar ASP.NET Ajax, Anthem, AjaxPro, etc.

    Si aún deseas hacer uso del código de este artículo, intenta subir tus modificaciones a un servidor público para que le de una mirada.

  9. Alex mira lo q yo quiero hacer es generar codigo html por ejm tener un textbox y un boton y q cuando haga click en el boton vaya a base de datos y traiga un valor cualquiera entonces de ahi copiar el contenido html y ponerlo en cualquier pagina y q realize la misma funcion que en la pagina aspx.

    Espero que haya sido claro y me puedas ayudar con este tema

  10. Hola alex ya solucione ese problema lo q me faltaba poner en el html nuevo era la etiqueta , ahora tengo otro problema, lo que es que funciona perfecto para Explorer pero para Firefox no funciona, por favor ayudame en este tema. Gracias por todo Alex

  11. Alex ya encontre la solucion lo q paso es q a mi control no tenia "id" solo tenia "name". Gracias de todos modos

  12. Hola, tengo una pagina en aspx, donde despues de introducir una id, necesito que me de varios mensajes como, tiene infracciones, otro con, tiene horas extras, otro con tiene anuncios, por mas que le busco no se por donde. tengo el siguiente codigo

    private void horasext()
    {
    esperasegundos(6);

    sql1 = "select * from lic.horext where idnegocio='" + txtidneg.Text + "'";
    cmd.CommandText = sql1;
    cmd.Connection = conn;
    //conn.Open();
    // abro la conexion a la base

    NpgsqlDataReader dr3 = cmd.ExecuteReader();
    //leo el registro

    if (dr3.Read())
    {
    regis = dr3.FieldCount;
    this.MsgError("Este negocio tiene HORAS EXTRAS autorizadas");
    }

    }

    y asi para los demas pero siempre muesta el ultimo, alguna idea.
    Gracias

  13. Quiero implementar la siguiente rutina en JavaScript

    HttpReq=new ActiveXObject("Microsoft.XMLHTTP");
    param="ddlTipoConsulta=1&txtNro=99878978"; //numero ejemplo
    HttpReq.Open("POST","http://200.60.223.134/vircanfiext/DirectorioRpm/frmDirectorioRpmRedi.aspx",false);
    HttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    HttpReq.setRequestHeader("Content-length", param.length);
    HttpReq.send(param);
    resultado=HttpReq.responseText;
    archivo.write(resultado)

    Pero el resultado no me muestra la respuesta sino el codigo de la pagina origen como si la estuviera recargando sin enviarle parametros de consulta, podrias indicarme que esta pasando he probado el mismo codigo en una pagina muy parecida de php y no hay problemas pero en esta de .net sucede esto
    Muchs gracias

Comments are closed.