En este artículo veremos una forma sencilla y muy rápida de como ejecutar métodos definidos del lado del servidor utilizando Ajax y jQuery en nuestras páginas ASP.NET.
jQuery entre más lo conoces más te sorprende, 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 .
Bueno vamos al punto, primero debemos creer un método en nuestra página ASP.NET, (o en su caso, un servicio Web) al que vamos a llamar utilizando Ajax. El ejemplo es el siguiente:
HTML y Jquer
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Naucalpan.aspx.vb" Inherits="DeveloperJI.Naucalpan" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script type="text/javascript" src="../Scripts/jquery-1.3.2.min.js" ></script>
<script type = "text/javascript">
jQuery(document).ready(function() {
$('#btnObtContactos').click(getContactos);
});
function getContactos() {
$.ajax({
type: "POST",
url: "JQAjaxArrayJSon.aspx/ObtenerContactos",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var contactos = (typeof response.d) == 'string' ?
eval('(' + response.d + ')') :
response.d;
$('#tablaContactos').empty();
$('#tablaContactos').append('<tr>
<td><b>ID</b></td><td><b>Nombre</b></td>
<td><b>Telefono</b></td><td><b>EMail</b></td>
</tr>');
for (var i = 0; i < contactos.length; i++) {
$('#tablaContactos').append('<tr>' +
'<td>' + contactos[i].IdContacto + '</td>' +
'<td>' + contactos[i].Nombre + '</td>' +
'<td>' + contactos[i].Telefono + '</td>' +
'<td>' + contactos[i].Email + '</td>' +
'</tr>');
}
},
error: function (result) {
alert('ERROR ' + result.status + ' ' + result.statusText);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" id="btnObtContactos" value="Obtener Contactos" /> <br/><br/>
<table id='tablaContactos'></table>
</form>
</body>
</html>
Código VB.NET
<System.Web.Services.WebMethod()> _
Public Shared Function RegresaGiros(ByVal Tipo As String) As List(Of Contacto)
Dim lista As New List(Of Contacto)
lista.Add(New Contacto() With {.IdContacto = 14, .Nombre = "Pedro", .Telefono = "601 01 01 01", .Email = "pedrog@gmail.com"})
lista.Add(New Contacto() With {.IdContacto = 15, .Nombre = "Maria", .Telefono = "601 01 01 02", .Email = "maria69@gmail.com"})
lista.Add(New Contacto() With {.IdContacto = 16, .Nombre = "Juana", .Telefono = "601 01 01 03", .Email = "juana33@gmail.com"})
Return lista
End Function
Public Class Contacto
Public Property IdContacto() As Integer
Get
Return m_IdContacto
End Get
Set(value As Integer)
m_IdContacto = value
End Set
End Property
Private m_IdContacto As Integer
Public Property Nombre() As String
Get
Return m_Nombre
End Get
Set(value As String)
m_Nombre = value
End Set
End Property
Private m_Nombre As String
Public Property Telefono() As String
Get
Return m_Telefono
End Get
Set(value As String)
m_Telefono = value
End Set
End Property
Private m_Telefono As String
Public Property Email() As String
Get
Return m_Email
End Get
Set(value As String)
m_Email = value
End Set
End Property
Private m_Email As String
End Class
Pero comentemos un poco el ejemplo AJAX ASP.NET que hemos expuesto:
Lo primero que hicimos en el ASPX fue asociar al evento click del botón btnObtContactos, la función getContactos().
$('#btnObtContactos').click(getContactos);
Esta función es la que hace la llamada jQuery AJAX, pero detallemos más en las opciones usadas en esta llamada AJAX:
$.ajax() Opciones
- type: "POST": Con esto estamos especificando el tipo de petición AJAX (HTTP Verb) que haremos al servidor (GET o POST). En nuestro caso hemos usado el método POST.
- url: "Naucalpan.aspx/ObtenerContactos": Esta propiedad contiene la dirección url del método donde está alojado nuestro servicio web (url / método a invocar). En nuestro caso es un PageMethod (ObtenerContactos) que hemos definido en la propia página (Naucalpan.aspx) por simplicidad.
- data: "{}": Esta propiedad contiene los datos que serán enviados al servidor. En nuestro caso como el PageMethod (ObtenerContactos) no necesita ningún parámetro, pues no enviamos dato alguno. Si por ejemplo, quisiéramos enviar algún dato en la petición AJAX, podríamos hacer algo como esto:
- data: "{'nombre': 'Derbis', 'apellidos': 'Corrales Varela'}"
- contentType: "application/json; charset=utf-8": Esta propiedad contiene el formato en el que estamos pasando nuestro parámetros al servidor.
- dataType: "json": Esta propiedad contiene el tipo de dato que esperamos recibir desde el servicio invocado. En nuestro caso JSON evalúa la respuesta y nos retorna un objeto javascript.
- Por último seteamos success y error, asociándole las funciones que deben ejecutarse al terminarse de procesar la petición AJAX, si todo fue bien se ejecutará la función success, de lo contrario ejecutará la asociada a error. En la función anónima asociada a success lo que hacemos es obtener el Array JSON y llenar la tabla tablaContactos.
Luego de esto solo queda comentar el código VB.Net, donde está el PageMethod ObtenerContactos, que no hace nada complicado, solo crea una lista de contactos (List<Contacto>) que devuelve.
Nota: En este ejemplo utilizamos un PageMethod para hacer la llamada jQuery AJAX, pero también podríamos haber usado un Web Services, WCF, o una simple página.
