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 con C#:
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;
}
}
}
Si prefieren hacerlo con Visual Basic (VB.NET) es muy parecido:
Imports System.Web.Services
Public Class Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
<WebMethod>
Public Shared Function Sumar(Valor1 As Double, Valor2 As Double) As Double
Return Valor1 + Valor2
End Function
End Class
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="https://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="https://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!