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.