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.

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

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

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

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.

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

Referencias

• ¿Cómo funciona Google Suggest?
• El Objeto XMLHttpRequest
• Callback en ASP .NET 2.0

Fichero con el código de ejemplo: xknown_CallbackASPNET.zip- Tamaño 4KB