Para entender este ejercicio te recomendaría empezar con los artículos anteriores sobre lo que es ajax y sus principios básicos, aqui daremos por explicados esos principios, explicaré cada parte del ejemplo sin detallar todo sin embargo podrás descargarlo para probarlo.

Primero te dire que existen multiples framework para emplear ajax, algunos libres, otros no, no detallaré todos los que existen pero si te diré con el que he probado y si ha funcionado, es el AjaxPro, se que haz estado tentado a usar las utilerías de Microsoft, te compartiré mi experiencia al respecto y es que para empezar la instalación y la implementación no son claras ni transparentes, el uso de sus componentes implica mucho código adicional no controlable, en resumen no tienes mucho control y mucho trabajo en el aspx, y si trabajas limpio no debes abusar de esta parte.

Explicado lo anterior comenzaré explicando paso a paso lo que debes hacer para implementar:

Primero Bajar el framework, es decir una dll que añadirás al bin para hacer básicamente el vínculo entre la parte del cliente y servidor y crear los objetos xmlhttprequest necesarios asi como usar las propiedades y metodos del framework, dicho framework lo encontrarás en www.ajaxpro.info, claro que en esa página hay un buen de ejercicios, sin embargo en esta parte lo resumimos y lo empleamos que parece juego de niños.

Segundo: Supongo ya tienes un par de páginas y clases donde quieres poner en práctica esto, por ello debes crear al menos una para probar, seguido de ello agregar la dll que acabas de bajar como una referencia haciendo click derecho en la carpeta bin y buscarlo como proyecto, hay varias dll segun tu framework que tengas instalado en máquina o servidor, escoge la que se ajuste.

Tercero: Si ya hiciste una prueba de tu página, ya generaste tu web config, de no ser asi, hazlo porque necesitamos agregar unas líneas para reconocer el framework, de no hacerlo te marcará errores de javascript que no encontrarás. Bien si ya tienes tu web config, debes agregar estas lineas justo antes de cerrar el bloque del system web.

<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>

Cuarto: En tu code behind ( página.cs) harás la declaración del namesspace para ver los metodos y propiedades del server desde el cliente y asi mandar a ejecutarlos, si no haces esto no establecerás el vínculo o mejor dicho el Ajax Engine, la pregunta es dónde y que pongo, bien la respuesta es esta: lo vas a poner justo antes de la declaracion de la la clase principal de la página, he aqui mas o menos como.

using System.Xml.Xsl;
using System.Xml.XPath;
//REGISTRAR EL NAMESPACE DONDE ESTARAN LAS FUNCIONES LLAMADAS DESDE EL CLIENTE
[AjaxPro.AjaxNamespace("AyaxExample")]
public partial class db1 : System.Web.UI.Page
{

Quinto: En la sección del page Load, harás la declaración de emplear las herramientas del framework del ayax, bien la declaración es simple como esta:

protected void Page_Load(object sender, EventArgs e)
{
//REGISTRAR EL USO DEL COMPONENTE EN ESTA PAGINA
AjaxPro.Utility.RegisterTypeForAjax(typeof(db1));
}

Sexto: Declarar que el siguiente metodo puede ser visto del lado del cliente y lo puede mandar a ejecutar, si preguntas si le puedes enviar parámetros, la respuesta es si, puedo decir que tus metodos tienen propiedades privadas, publicas etc.. añadiria ahora una mas, publica desde el cliente, bueno lo que hay que hacer es esto justo antes del método.

//METODO LLAMADO DESDE EL CLIENTE
[AjaxPro.AjaxMethod()]
public string PrintTabla()
{

Y esto lo que respecta a la parte del código en C# del Code Behind de tu página, estos pasos son religiosos para poder usar el framework, lo que continua es la parte en el cliente sobre lo que deseas que ocurra , es decir , recargar la parte deseada sin recargar toda la página.

Ejercicio.

Necesitaremos de un archivo XML que consultaremos, esta de mas decir que podemos hacer aqui justamente las consultas base de datos.

Empezamos con una sencilla funcion en el cliente para actualizar una consulta de datos existente en un div.

//FUNCION PARA SOLICITAR CONSULTA EN UN METODO EJECUTADO EN EL SERVER
function GetTabla()
{
var resultado;
//LLAMAR AL METODO EN EL SERVER
//NAMESSPACE.METODO(ARGUMENTOS)
resultado=AyaxExample.PrintTabla().value;
//ELEMENTO DONDE PEGAREMOS EL RESULTADO
var div=document.getElementById("Content");
div.innerHTML=resultado;
}

Como podemos observar, alojamos en una variable el resultado de la ejecución del método en el cliente y simplemente pegamos ese resultado en un div, actualizando solo parte deseada, la implementación es muy corta en esta parte.

A continuación la parte del cliente donde se muestra los controles :

<form id="form1" runat="server">
<div>
<asp:Label ID="Bienvenida" runat="server" BorderStyle="None" Font-Bold="True" ForeColor="Red">Ejemplo de uso de ayax Framework</asp:Label><br />
<asp:Button ID="Recarga" runat="server" OnClick="Recarga_Click" Text="Reiniciar" /><br />
<br />
</div>
<div id="Content" title="Click" onclick="GetTabla()" style="text-align:center;">Div de Contenido</div>
</form>

Y es todo de la parte del cliente, lo que sigue es en el servidor y son la tareas de petición del método, solicitud de consulta y presentación de los datos a regresar.

A partir de un archivo Xml, llenamos un data set , aqui es la oportunidad de realizar consultas a la base de datos y llenar los dataset a partir de stores o querys abiertos, bueno no abundaré en esa parte, solo tomamos como ejemplo este xml para ello, asi:

string XmlFile = Server.MapPath("/AyaxFramework/App_Data/Pets.xml"); //"D:\\xml\\petlist.xml";
string dato = "";
DataSet ds = new DataSet();
//LLENAR DATASET CON ARCHIVO XML
ds.ReadXml(XmlFile);

A contunuación le damos formato a los datos, en este caso se trata de una tabla y empezamos con los cabeceros que extraimos del dataset.

//LLENA CABECERA DE LA TABLA
sb.Append(" <table border='1'><thead style='color:Red;' >");
sb.Append("<tr>");
for (int h = 0; h < ds.Tables[0].Columns.Count; h++)
sb.Append("<td>" + ds.Tables[0].Columns[h].Caption + "</td>");
sb.Append("</tr></thead>");
//LLENAR CONTENIDO DE LA TABLA

Lo que sigue es llenar el contenido de la tabla y regresar el resultado de la consulta:

for (int r = 0; r < ds.Tables[0].Rows.Count; r++)
{
sb.Append("<tr style='color:Silver;'>");
for (int c = 0; c < ds.Tables[0].Columns.Count; c++)
{
dato = ds.Tables[0].Rows[r].ItemArray[c].ToString();
if (dato == "") dato = " ";
sb.Append("<td>" + dato + "</td>");
}
sb.Append("</tr>");
}
sb.Append("</table>");
return sb.ToString();

Esto es el ejemplo completo de lo anteriormente indicado, esta el projecto completo asi como la dll del framework , solo para probar y ya, las alternativas son muchas pero he aqui un ejemplo sencillo y todos los pasos que se obvian en muchos casos y no se explican.

Ejemplo.

Introducción.

Hoy las aplicaciones mas robustas de la web emplean en sus desarrollos Ajax en asp net 2.0, uno de ellos es Google .

Si no estas enterado de este tema, debes hacerlo lo mas pronto posible antes de quedarte sin trabajo o que otros te ganen la inovación en tu empresa.

Piensa en esto como usuario que al seleccionar un combo tengas que ver que la página se recarga totalmente, que molesto ver un pantalla blanca que no sabes si se pasmo, esta lenta la red o ya la consulta se cayó, entonces imagina, bueno no lo imagines ve algunas aplicaciones en la web que recargan solo segmentos de la pagina y ves un flujo mas limpio.

Una de las batallas en punto net es la parte de la recarga y ni modo tienes que manejar muy bien el Page_PreRenderComplete y el Page.IsPostBack y te platico la peor parte, si tienes un Datasource ligado directamente a los controles , si que sufrirás, pues resulta que en un grid cada vez que cambias la paginación del grid vuelve a realizar la consulta y todo se recarga por un evento que debiera de ser ligero, pero no lo es.

Pero estas cosas no son tu culpa pues los controles están mal diseñados desde el inicio y haces trucos para hacerlo funcionar lo mas limpio posible.

¡Para de sufrir!, te digo que hay una alternativa AJAX, sin embargo debes tomar en cuenta que debes empezar con este concepto y te ahorrarás mucho tiempo, generando código más legible, rápido y funcional, una vez que entiendas como funciona el principio básico, lo demás será pan comido.

Piensa como usuario y como te gustaría que funcionen las cosas, si actualizas contenidos robustos, vendes en línea esto es para ti, dale una experiencia diferente a tu usuario, no te quedes fuera, piensa que los cambios a la aplicación serán mas rápidos separando ciertas estructuras, quedando un código limpio y fácil de seguir, también la cantidad de trafico entre cliente servidor disminuirá.

Pero no todo es bello, piensa que pasará cuando des back en el navegador, puede funcionar erraticamente y si deseas que tu contenidos sean considerados en las búsquedas, pues como están ocultas hasta que haya un usuario que genere un evento, ese contenido NO existirá y ahí no fue negocio, por otro lado los servidores de consulta son sencibles a inyección de código, por ello hay que tener cuidado y ser cauto en donde emplearlo y tomar las medidas correspondientes, no puedes emplearlo indiscriminadamente.

Lo Básico.

Comencemos con el significado del acrónimo (Asynchronous Javascript and XML), el término "asíncrono" - en otras palabras, ¡Vamos a hacer un viaje de ida y vuelta al servidor, sin necesidad de ir allí!.

Es entonces el empleo de un engine en tu aplicación, un concepto empleando ciertas técnicas mas que un componente o tecnología nueva, porque no hay nada nuevo en esto, recordemos como le hacemos para tener cierta comunicación desde el cliente con el servidor empleando iframes ocultos guardando información en formas o tags y recuperandola en el cliente actualizando los contenidos de los divs o cualquier forma predispuesta para tal efecto.

Explicado lo anterior como contexto, hay muchas formas de implementar este engine en nuestra aplicación mediante Frameworks prediseñados por fabricantes que lo ponen libre o con costo de licencias. En este capitulo me referiré a la creación inicial que necesitaremos para desarrollar. Se que estas tentado a emplear el ajax extensions de Microsoft, te digo Alto, no necesariamente es lo mejor, pues hay varios puntos de instalación y de uso que no te van a satisfacer y generarás código adicional.

Lo primero que debemos saber es el empleo de Javascript en el cliente y el lenguaje que mejor te parezca en el server, debes saber que emplearas ciertas reglas del protocolo de XML y pensar en una forma diferente como estructuras tus páginas para emplear este concepto.

Código Básico.

Primero.

Lo primero que debes saber es que tienes que crear un objeto del tipo XMLHTTP que se puede usar desde el 2001, para ello es necesario conocer que versión esta existe en el navegador del cliente, existen varias, MSXML2.XMLHTTP.5.0, MSXML2.XMLHTTP.4.0, MSXML2.XMLHTTP.3.0, MSXML2.XMLHTTP y Microsoft.XMLHTTP.