AJAX, El complemento perfecto. Parte 2


En esta segunda parte de AJAX, El complemento perfecto, les mostrare como trabajar AJAX desde javascript, haciendo uso de los pagemethods.
Esto permite llamar metodos que se encuentren en el servidor desde javascript sin refrescar la pagina, asi lograremos trabajar asincronamente y daremos mucha mas funcionalidad a nuestra aplicacion.
El proceso es muy sencillo y puedes modificarlo de acuerdo a tus necesidades.
Para que esto sea posible necesitaremos un ScriptManager en la pagina con la propiedad:
EnablePageMethods en True.

<asp:ScriptManager ID="ScriptManager1" 
    EnablePageMethods="true" 
    EnablePartialRendering="true" runat="server" />

Ahora el siguiente paso sera agregar el codigo JavaScript haciendo el llamado a la funcion que tenemos en el servidor, y esto se hace llamando el metodo como si estuviera localmente pero anteponiendole PageMethods, y para obtener el valor devuelto por la funcion en el servidor, agregaremos un parametro al metodo pero solo en el javascript. Este parametro sera el nombre de una funcion javascript que recibira un parametro y el valor de ese parametro sea el valor devuelto por el servidor.
El codigo quedaria asi:

<script>
     function test() {
            PageMethods.MiMetodo("Jairo Ortiz",fncorrecto);
        }

        function fncorrecto(status) {
            alert(status);
        }
</script>

Aqui estamos llamando al metodo "MiMetodo" que esta en el servidor y le anteponemos la palabra PageMethods seguida de un punto. Esto se hace con el fin de decirle a ajax que ese metodo se encuentra en el servidor y que lo llame.
Ademas le decimos que el valor retornado se procesara en la funcion fncorrecto.
La funcion fncorrecto recibe un parametro el cual es el return de la funcion en el servidor, este parametro es invisble en MiMetodo.

Acontinuacion vamos a crear la funcion en el servidor, la cual tendra que ser Public Static y tendra arriba el  atributo  [WebMethod]. para esto tendras que agregar el espacio de nombres:
using System.Web.Services
Y el codigo del lado del servidor quedaria asi:

[WebMethod]
public static string MiMetodo(string nombre)
{
    return "Hola " + nombre;
}  

La funcion test podremos llamarla desde cualquier parte de nuestra pagina como por ejemplo en un elemento <a>:

<a href="#" onclick="test();">Aqui se devuelve el nombre</a> 

Aqui les dejo la aplicacion de ejemplo:

Ajax - WebMethods

Quedo atento a sus comentarios. :)

1 comentario:

  1. Excelente articulo! Gracias! esperamos mas para ajax .net avanzado ;)

    ResponderEliminar

Google