Llamar a métodos de una página ASP.NET desde JavaScript con jQuerySábado, 16 abr, 2011 @ 18:12 | Por Gustavo Cantero (The Wolf) | ASP.NET, jQuery  |
 |
Cada vez es más frecuente ver aplicaciones que utilizan AJAX para obtener información de algún proceso del servidor y con ella actualizar la página. Con .NET esto se puede hacer fácilmente utilizando el ScriptManager para llamar a servicios web, pero muchas veces no queremos agregar tanta complejidad porque simplemente necesitamos llamar a un método que nos devuelva, por ejemplo, la hora de nuestro server.
Para hacer lo mencionado podemos crear un WebMethod en nuestra página y llamarlo utilizando jQuery (casi todos los sitios web actualmente utilizan jQuery para alguna tarea).
Vamos a explicar cómo hacerlo creando un ejemplo sencillo, en el cual vamos a tomar dos números 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 página.
En el código de nuestra página vamos a agregar el método pero teniendo en cuenta que debemos agregarle el atributo “WebMethod” como muestro a continuación:
using System;
using System.Web.Services;
namespace Ejemplo
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static double Sumar(double Valor1, double Valor2)
{
return Valor1 + Valor2;
}
}
}
Pero para que este método pueda ser llamado desde una página también debemos agregar en el web.config la referencia al HttpModule que maneja estas llamadas:
<?xml version="1.0"?>
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0" />
<httpModules>
<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</httpModules>
</system.web>
</configuration>
Con esto ya terminamos de hacer todo lo necesario en .NET para que nuestros scripts puedan utilizar este método. Ahora debemos agregar la llamada desde nuestra página. Para hacerlo debemos agregar el archivo de JavaScript con la librería de jQuery a nuestra página. Podemos descargar esta librería y “apuntar” a este archivo o simplemente podemos hacer que nuestra página la descargue de los servidores de Microsoft, Google o jQuery (en el ejemplo hago esto último). En la página http://docs.jquery.com/Downloading_jQuery podemos ver las distintas opciones de descarga o utilización de los CDN (Content Delivery Network) que podemos utilizar.
Entonces, en nuestra página de ejemplo, agregamos el siguiente elemento de HTML para que obtenga la librería del CDN de Microsoft:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js" type="text/javascript"></script>
Ahora que tenemos la librería podemos llamar a nuestro método desde nuestra página de la siguiente manera:
$.ajax({
//Tipo de llamada
type: "POST",
//Dirección del WebMethod, o sea, Página.aspx/Método
url: "Default.aspx/Sumar",
//Parámetros para pasarle al método
data: '{Valor1: 22, Valor2: 33}',
//Tipo de contenido
contentType: "application/json; charset=utf-8",
//Tipo de datos
dataType: "json",
//Función a la cual llamar cuando se pudo llamar satisfactoriamente al método
success: resultado,
//Función a la cual llamar cuando se producen errores
error: errores
});
A continuación les dejo el HTML completo de nuestra página de ejemplo, donde toma los dos números, los envía a nuestro método y luego pone el resultado en otro campo de texto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btnSumar').click(function () {
var num1 = $('#num1').val(); //Obtenemos el primer número
var num2 = $('#num2').val(); //Obtenemos el segundo número
$.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 método
$('#num3').val(msg.d);
}
function errores(msg) {
//msg.responseText tiene el mensaje de error enviado por el servidor
alert('Error: ' + msg.responseText);
}
</script>
</head>
<body>
<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>
</body>
</html>
Como verán utilizar WebMethods de ASP.NET desde jQuery es muy sencillo y útil, y puede servirnos en muchas tareas, por ejemplo, en formularios de envío de mail para no tener que recargar la página, para crear campos con “autocomplete”, para obtener información actualizada por otros usuarios sin necesidad de refrescar la página (como hace Facebook), etc.
También les dejo un proyecto con el ejemplo anterior funcionando:
Espero que les sea de utilidad.
Suerte!
Quien haya desarrollado alguna aplicación web que contenga mapas utilizando la versión 2 de la API de Google Maps y haya querido migrar a la versión 3 (ya que es la versión oficial, funciona mucho mejor en dispositivos móviles y la anterior ya ha quedado oficialmente descartada), se habrá dado cuenta que no es tan sencillo como cambiar el JS a utilizar y listo, sino que cambiaron muchas cosas, por ejemplo, ahora las clases no comienzan con la letra G (como GMap) sino que utilizan el namespace google.maps (como google.maps.Map).
Una de las tareas que podemos realizar para reducir el tiempo de descarga inicial de nuestras aplicaciones es la eliminación de comentarios, espacios, puntos y coma y demás caracteres, y renombrar los objetos y variables utilizando nombres más cortos en nuestros archivos de JavaScript, pero realizar esta tarea manualmente esta pesada, repetitiva y propensa a errores, por lo tanto se utilizan herramientas que lo hacen automáticamente. Una de estas herramientas es el Microsoft Ajax Minifier, el cual, en su nueva versión 4.0 que salió ayer, también tiene soporte para archivos CSS, o sea, también elimina espacios, comentarios y caracteres innecesarios de los archivos de estilos.
