Invocando ASP.NET WebServices desde JQuery con notación JSON.
Hola que tal?, ayer martes 12 , hicimos un Webcast con ASP.NET & JQuery, en donde revisamos varios ejemplos, ahora bien, quiero revisar algunos que vimos de manera bastante rápida por el tiempo.
Lo bueno es que vamos a invocar al WS desde una página HTML, aunque esto igual se puede hacer con Microsoft Ajax Library, vamos a ver la potencialidad de JQuery.
Código del WService
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class Saludame
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function Saludame(ByVal nombre As String) As String
Return "Bienvenido a la charla " & nombre
End Function
End Class
El Código es sencillo, y recuerda descomentar la línea en donde está el código:
<System.Web.Script.Services.ScriptService()> _
Que nos permite hacer las llamadas desde un script del lado del cliente.
Código JQuery
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#sayHelloButton").click(function(event){
$.ajax({
type: "POST",
url: "Saludame.asmx/Saludame",
data: "{'nombre': '" + $('#nombre').val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
AjaxOK(msg);
},
error: AjaxError
});
});
});
function AjaxOK(result) {
alert(result.d);
}
function AjaxError(result) {
alert("ERROR " + result.status + ' ' + result.statusText);
}
</script>
Código HTML
<form id="form1">
<h1> Llamando ASP.NET AJAX Web Services con jQuery </h1>
Ingrese su Nombre:
<input id="nombre" /> <br />
<input id="SaludaButton" value="Saluda!"
type="button" />
</form>
Explicación
Lo que hace este código JQuery es encadenar a al evento click del botón la funcionalidad de ajax, seteamos el tipo de envío (Post) , la URL, que corresponde a la dirección web o al nombre del archivo y luego el webmethod que invocamos “Saludame”, en data van los parámetros de entrada al WS con notación JSON, recuerda que si vas a enviar más de un parámetro tienes que formatear correctamente este string. Por ejemplo, si vas a enviar dos parámetros de entrada:
data: "{'a': '" + $('#a').val() + "','b': '" + $('#b').val() + "'}",
Luego especificamos el content type, el tipo de datos y especificamos las funciones que serán invocadas si la ejecución resultó correcta(AjaxOK) o si ocurrió un error(AjaxError).
y ta tan!!
Espero que te sirva,
Gonzalo