Tutorial para "tontos" sobre AJAX en .NET

Soltrac

Buenas! Me pongo a escribir esto porque hay gente q aun no sabe como implementar AJAX en sus páginas para evitar la famosa recarga de página cada vez que acceden a datos del servidor.

Lo primero es decir que este tutorial es para gente que se mueve bien con ASP.NET, no voy a explicar las cosas desde 0 porque opino que la gente q quiere meterse con esto, sabe de lo que hablamos.

Empecemos por el principio...¿Qué es AJAX? No me voy a meter en definiciones...para ello miren http://es.wikipedia.org/wiki/AJAX , digamos simplemente que AJAX es una técnica de desarrollo web para acceder a datos, funciones (en fin...lo que queramos...) del servidor sin tener que recargar la página para ello.

Pongamos un ejemplo: (Los ejemplos los escribiré en Visual Basic, pero no hay ningún problema en adaptarlos a C# por ejemplo)

Supongamos que tenemos un checkbox que cada vez que lo marcamos, ponemos una variable denominada "Unidad" que tiene que estar en el servidor a 1 y cuando lo desmarcamos está a 0.

Sin utilizar AJAX, tendríamos que definir el checkbox con runat="server", luego decirle que el autopostback=true para que en el evento on change podamos poner:

If Checkbox1.checked = True then
Unidad = 1
Else
Unidad = 0
End If

El problema de esto es que cada vez que se clickee el checkbox, la página se va a reiniciar porque necesitamos acceder a datos del servidor.

Para eso, podemos utilizar AJAX.

Veamos los pasos a realizar:

1) Vamos a instalar una dll de Ajax libre que nos ayudará en no tener que escribir un tochazo de código para una tonteria.

http://ajax.schwarz-interactive.de/csharpsample/default.aspx (Aunque ponga que es para C#, podremos utilizarla en VB)

2) Agregamos la referencia de la DLL a nuestro proyecto

3) En el Page_Load de nuestra página, pondremos lo siguiente:

Ajax.Utility.RegisterTypeForajax(GetType(NOMBRECLASE)) , donde NOMBRECLASE será el nombre de la clase de la página (Es decir, yendo al principio de la página .aspx pondrá algo de Inherits="NOMBRECLASE"))

4) Agregaremos lo siguiente al web.config de nuestro sitio en el apartado <system.web>

<httpHandlers>
<add verb="POST,GET" path="AJAX/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>

5) Creamos una función para escribir el evento

<Ajax.AjaxMethod()> _
Public Function CambiarEstado(ByVal value As String) As String

if value = "" Then
Unidad = 0
Else
Unidad = 1
End If

Return "Hemos terminado!!!"
End Function

6) Creamos el checkbox que llame a la función
En el aspx ponemos
< INPUT type="checkbox" id="CheckBox1" onclick="NOMBRECLASE.CambiarEstado(checkbox1.value,CambiarEstado_Callback)">

7) Creamos un javascript que controle el callback (en nuestro ejemplo la función devuelve "hemos terminado!!!", pero podría devolver todo lo que nos diera la gana, como el resultado de una suma, o el resultado de una consulta select....."

function CambiarEstado_CallBack(response)
{
if (response.error != nul)
{
alert("Que tenemos un fallo!!!");
return;
}
alert(response.value);
}

En response.value tendremos el return de la función CambiarEstado, que nos puede servidr para colocarlo por ejemplo en un textbox1.

document.getElementById('textbox1').value = response.value;

Y listo! Tendremos un acceso a una función del servidor sin recargar la página :)

Bueno, si alguien está interesado en que suba un proyecto con todo esto hecho, lo haré y si alguien quiere más ejemplos, de accesos a BB.DD. o de lo q sea, sin problemas.

Si a nadie le sirve esto, pues trabajo a la basura.

Siento la redacción, si hay algo que no se entienda preguntad :)

ElRuso

Voy a ser honesto, no lo he leido.

Pero hay agluna diferencia de AJAX con .NET que con ASP normal, PHP etc? PQ por lo que yo se de ajax es simplemente un metodo de JS, y todos los "calculos" se realizan en server side, donde basicamente da igual que lenguaje se usa.

Soltrac

#2 por supuesto, pero es un ejemplo para casos .NET, ya que es una DLL creada expresamente para ello.

Por supuesto q se puede aplicar para todos los lenguajes, es mas, creo q un usuario de este foro escribió un tal "isiajax" para ese propósito, pero creo que para los q utilicen .NET, este método les simplifica la vida de sobremanera.

IS4kO

Mi más sincera enhorabuena Soltrac, sin duda un claro ejemplo simple y directo sobre como interactuar con la dll de ajax..

Sin duda este tipo de posts son los que se echan de menos en este foro.

P.D: Si quieres darle un par de vueltas más, te aconsejo el siguiente libro gratuito de Dino Esposito sobre "Atlas" for Ajax

http://download.microsoft.com/download/8/6/9/869052F5-403D-4B34-BFC4-E61FD28D53A1/0735623457.exe

bLaCkH0Le

buen trabajo. Estoy ahora liado en un curso de .NET y dentro de poco dare ajax. e viene muy bien para ver a grandes rasgos de que va esto. Gracias.

IS4kO

Codificación para c#:

public partial class CLASE : System.Web.UI.Page
{
     protected void Page_Load(object sender, EventArgs e)
     {

           Ajax.Utility.RegisterTypeForAjax(typeof(CLASE));

      }
     [Ajax.AjaxMethod()]
      public String laFuncion(String value)
      {

           return (value);
      }
}

Usuarios habituales

  • IS4kO
  • bLaCkH0Le
  • Soltrac
  • ElRuso