Llamar a funciones de una página ASP.Net con jQuery y AJAX

Método para llamar a una función de una página ASP.Net utilizando jQuery


jQuery , aparte de ofrecer mejoras en el interface de usuario de nuestras páginas, también tiene funciones para llamar a métodos de servidor utilizando AJAX .

De hecho, algunos de los programadores del framework de Ajax.Net recomiendan la utilización de jQuery para este tipo de procesos.

En realidad, llamar a un método de servidor en jQuery es tremendamente sencillo.

En primer lugar debemos configurar un método en nuestra página ASP (o en su caso, un servicio Web) al que vamos a llamar utilizando Ajax:

/// 
///		Método Web para borrar una función
/// 
[WebMethod]
public static bool Delete(string strID)
{ // Borra los datos
	System.Diagnostics.Debug.WriteLine("Deberíamos borrar el registro con código " + strID);
  // Devuelve el valor que indica si se ha borrado correctamente
	return true;
}

En el ejemplo hemos definido un método llamado Delete (que debe ser estático y público) que espera una cadena y al que se le ha añadido el atributo [ WebMethod] indicando que es un método Web al que se puede llamar desde el cliente.

Observad que es el mismo atributo que se utiliza en los servicios Web aunque en este caso está en una página ASPX normal.

Para llamar al método desde jQuery utilizamos la función ajax .

Esta función tiene varios argumentos, aunque los más importantes son:

  • type: el tipo de envío, normalmente es un tipo POST.
  • url: URL en la que se encuentra el método AJAX. En nuestro caso, es el nombre de nuestra página ASPX seguido por el nombre del método (es decir: Pagina.aspx /Delete ).
  • data: argumentos del método al que estamos llamando.

Por ejemplo, para llamar al método de nuestra página podríamos utilizar el siguiente código:

function CallFunctionASPNet(strID)
{	$.ajax(
			{ type: "POST",
			  url: "Pagina.aspx/Delete") %>",
			  data: "{'strID':'" + strID + "'}",
			  contentType: "application/json; charset=utf-8",
			  dataType: "json",
			  success: function(strMessage)
			  	{ ShowAlert("La rutina AJAX se ha ejecutado correctamente. Mensaje: " + strMessage);
			  	},
			  error: function(objSender, strReason, objObject)
			  	{ ShowAlert("Error al llamar a AJAX. Razón: " + strReason);
			  	}
			};
		);
}

En este caso los argumentos success y error llaman a funciones que se ejecutan en caso que la llamada al método AJAX se haya ejecutado correctamente o no.

Páginas relacionadas