Categories
.NET Artí­culos ASP.NET

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 on “Implementacion de CallBack utilizando ASP.NET 1.1 y Javascript”

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??.

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

By Post Author

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

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

By Post Author

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......

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

By Post Author

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

gracias

Hola alex he visto tu ejm y me parece bien interesante yo he hecho un ejm guiandome del tuyo y tengo un problema cuando quiero ponerlo en una pagina html de esta manera me sale un error:

5
4
3
2
1

morwok's Arm TattooOther Arm TattooStarkville Arm Tattoo

y me sale un error de este tipo Object doesn't support this property or method

Por favor si me puedes ayudar te lo agradeceria mucho

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.

By Post Author

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

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

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

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

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.