Está en la página 1de 5

LLAMAR A MTODOS DE UNA PGINA ASP.

NET DESDE JAVASCRIPT CON JQUERY


Sbado, 16 abr, 2011 @ 18:12 | Por Gustavo Cantero (The Wolf) | ASP.NET, jQuery

Cada vez es ms frecuente ver aplicaciones que utilizan AJAX para obtener informacin de algn proceso del servidor y con ella actualizar la pgina. Con .NET esto se puede hacer fcilmente utilizando el ScriptManager para llamar a servicios web, pero muchas veces no queremos agregar tanta complejidad porque simplemente necesitamos llamar a un mtodo que nos devuelva, por ejemplo, la hora de nuestro server. Para hacer lo mencionado podemos crear un WebMethod en nuestra pgina y llamarlo utilizando jQuery (casi todos los sitios web actualmente utilizan jQuery para alguna tarea). Vamos a explicar cmo hacerlo creando un ejemplo sencillo, en el cual vamos a tomar dos nmeros ingresados por el usuario en campos de texto, los vamos a enviar al WebMethod donde vamos a sumarlo (esta tarea se va a realizar en el servidor) y luego devolveremos el resultado a la pgina. En el cdigo de nuestra pgina vamos a agregar el mtodo pero teniendo en cuenta que debemos agregarle el atributo WebMethod como muestro a continuacin:
1 using System; 2 using System.Web.Services; 3 4 namespace Ejemplo 5{ 6 7 public partial class Default : System.Web.UI.Page {

8 9 10 11 12 13 14 15 16 17 18 19 }

protected void Page_Load(object sender, EventArgs e) { } [WebMethod] public static double Sumar(double Valor1,double Valor2) { return Valor1 + Valor2; } }

Pero para que este mtodo pueda ser llamado desde una pgina tambin debemos agregar en el web.config la referencia al HttpModule que maneja estas llamadas:
1 <?xml version="1.0"?> 2 3 <configuration> 4 <system.web> 5 6 <compilation debug="true" targetFramework="4.0" /> <httpModules>

<add name="ScriptModule"type="System.Web.Handlers.ScriptModule, 7 System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 8 </httpModules> 9 </system.web> 10 </configuration>

Con esto ya terminamos de hacer todo lo necesario en .NET para que nuestros scripts puedan utilizar este mtodo. Ahora debemos agregar la llamada desde nuestra pgina. Para hacerlo debemos agregar el archivo de JavaScript con la librera de jQuery a nuestra pgina. Podemos descargar esta librera y apuntar a este archivo o simplemente podemos hacer que nuestra pgina la descargue de los servidores de Microsoft, Google o jQuery (en el ejemplo hago esto ltimo). En la pgina http://docs.jquery.com/Downloading_jQuery podemos ver las distintas opciones de descarga o utilizacin de los CDN (Content Delivery Network) que podemos utilizar.

Entonces, en nuestra pgina de ejemplo, agregamos el siguiente elemento de HTML para que obtenga la librera del CDN de Microsoft:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery1.5.2.min.js" type="text/javascript"></script>

Ahora que tenemos la librera podemos llamar a nuestro mtodo desde nuestra pgina de la siguiente manera:
1 $.ajax({ 2 //Tipo de llamada 3 4 5 6 7 8 9 10 11 12 13 14 15 16 //Funcin a la cual llamar cuando se pudo llamar satisfactoriamente al mtodo 18 success: resultado, 17 19 20 //Funcin a la cual llamar cuando se producen errores 21 error: errores 22 }); //Tipo de datos dataType: "json", //Tipo de contenido contentType: "application/json; charset=utf-8", //Parmetros para pasarle al mtodo data: '{Valor1: 22, Valor2: 33}', //Direccin del WebMethod, o sea, Pgina.aspx/Mtodo url: "Default.aspx/Sumar", type: "POST",

A continuacin les dejo el HTML completo de nuestra pgina de ejemplo, donde toma los dos nmeros, los enva a nuestro mtodo y luego pone el resultado en otro campo de texto:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head runat="server"> 4 <title></title> 5 <scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/jquery1.5.2.min.js" type="text/javascript"></script>

6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<script type="text/javascript"> $(function () { $('#btnSumar').click(function () { var num1 = $('#num1').val(); //Obtenemos el primer nmero var num2 = $('#num2').val(); //Obtenemos el segundo nmero $.ajax({ type: "POST", url: "Default.aspx/Sumar", data: '{Valor1: ' + num1 + ', Valor2: ' + num2 + '}', contentType: "application/json; charset=utf-8", dataType: "json", success: resultado, error: errores }); }); }); function resultado(msg) { //msg.d tiene el resultado devuelto por el mtodo $('#num3').val(msg.d); } function errores(msg) { //msg.responseText tiene el mensaje de error enviado por el servidor alert('Error: ' + msg.responseText); } </script>

31 </head> 32 <body> 33 34 35 36 37 38 39 40 41 42 43 44 <form id="form1" runat="server"> <div> <br /> <br /> <br /> <input type="text" id="num1" /> + <input type="text" id="num2" /> <input type="button" value="=" id="btnSumar" /> <input type="text" id="num3" disabled /> </div> </form>

45 </body> 46 </html>

Como vern utilizar WebMethods de ASP.NET desde jQuery es muy sencillo y til, y puede servirnos en muchas tareas, por ejemplo, en formularios de envo de mail para no tener que recargar la pgina, para crear campos con autocomplete, para obtener informacin actualizada por otros usuarios sin necesidad de refrescar la pgina (como hace Facebook), etc. Tambin les dejo un proyecto con el ejemplo anterior funcionando:

Espero que les sea de utilidad.