[ASP.NET] Consumir un Web Service con jQuery

Posted on Actualizado enn


Hola a todos, vamos a ver como con jQuery podemos consumir un Web Service de una manera bastante sencilla y rápida.

La idea de este artículo es ver como consumir el servicio más no como crearlo, solo les voy a colocar el colocar la función creada en el Web Service, dicha función va a validar si el usuario es válido o no, claro la idea serpia hacer dicha validación contra una base de datos, peor en este caso vamos a tener un array, lo importante a tener en cuenta es que la clase debe adornarse con el atributo <ScriptService()>

   1:  Imports System.Web.Services
   2:  Imports System.Web.Services.Protocols
   3:  Imports System.ComponentModel
   4:  Imports System.Web.Script.Services
   5:   
   6:  ' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
   7:  ' <System.Web.Script.Services.ScriptService()> _
   8:  <System.Web.Services.WebService(Namespace:="http://tempuri.org/")> _
   9:  <System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
  10:  <ToolboxItem(False)>
  11:  <ScriptService()>
  12:  Public Class ValidarUsuario
  13:      Inherits System.Web.Services.WebService
  14:   
  15:      <WebMethod()>
  16:      Public Function ValidarUsuario(sUser As String) As Boolean
  17:          Dim sUsuarios As String() = {"user1", "user2"}
  18:          For Each usuario As String In sUsuarios
  19:              If sUser = usuario Then
  20:                  Return True
  21:              End If
  22:          Next
  23:          Return False
  24:      End Function
  25:   
  26:  End Class

Ahora en nuestra página aspx, vamos a tener un campo de texto y un botón para realizar la comunicación con el Web Service y validar el usuario:

   1:  <h1>Consumir Web Service con jQuery</h1>
   2:  <label>Usuario:</label>
   3:  <asp:TextBox ID="txtUsuario" runat="server"></asp:TextBox>
   4:  <asp:Button ID="btnValidar" runat="server" Text="Validar Usuario" />

Ahora va el código jQuery:

   1:  $(function () {
   2:      $("#<%= btnValidar.ClientID %>").click(function (e) {
   3:          e.preventDefault();
   4:          ValidarUsuario($("#<%= txtUsuario.ClientID %>").val());
   5:      })
   6:      function ValidarUsuario(user) {
   7:          $.ajax({
   8:              type: "POST",
   9:              url: "ValidarUsuario.asmx/ValidarUsuario",
  10:              data: '{"sUser":"' + user + '"}',
  11:              contentType: "application/json; charset=utf-8",
  12:              dataType: "json",
  13:              success: function (resul) {
  14:                  if (resul.d)
  15:                      alert('El usuario es válido.');
  16:                  else
  17:                      alert('El usuairo es inválido.');
  18:              },
  19:              error: function (error) {
  20:                  alert('Se ha producido un error validando el usuario.');
  21:              }
  22:          })
  23:      }
  24:  })

y que hace ese código?

En la línea 2 atachamos un manejador para el click del botón, en la siguiente línea con e.preventDefault() le estamos diciendo que cancele su comportamiento por defecto que sería realizar postback y en la línea 4 llamamos la función que validará el usuario.

La función ValidarUsuario recibe como parámetro el nombre del usuario, ahora con $.ajax le decimos que vamos a realizar una petición AJAX al servidor, en este cas será consumir el Web Service, ahora voy a comentar los parámetros importantes:

  • url: especificamos el nombre del servicio y de la función.
  • data: datos que enviamos al servicio
  • success: función que es llamada si la petición es correcta, luego allí validamos si el valor devuelto por el servicio es true para usuario válido o false para usuario inválido.
  • error: función que es llamada si se produce algún error al llamar el servicio.

Como ven es bastante sencillo, como siempre les dejo el código del ejemplo:

Descarga el ejemplo! (el archivo se llama Consumir WS con jQuery)

6 comentarios sobre “[ASP.NET] Consumir un Web Service con jQuery

    Jorge Ramirez escribió:
    11/22/2011 en 00:57

    Hola, muy chevere el post de consumir el asmx con jquery. tengo una pregunta… si el metodo del servicio lanza una excepcion de .NET algo como IndexOutOfRangeException y esa excepcion lleva un mensaje personalizado ej: throw new IndexOutOfRangeException(“Mi Mensaje”); .. como capturo ese tipo de excepcion y el mensaje para mostrar un alert mas detallado?

      Julio Avellaneda respondido:
      11/22/2011 en 07:28

      hola, bueno el tema tmb es q no deberias mostrarle al usuario un mensaje con la excepción exacta, pq lo vas a dejar muy confundido, podrias tratr con un mensaje amigable, pero si necesitas capturar más info del error el la función error del $.ajax haz algo así:
      error: function(XMLHttpRequest, text, ex) {
      alert(text + ": " + XMLHttpRequest.responseText);
      }

    Ronny Ramírez R escribió:
    10/25/2012 en 13:08

    Muy bueno el ejemplo y el problemita es que todo los ejercios ejecutan webservices locales que tal si dicho servicio esta en la nube ya publicado como lo acceso, e tratado de aplicar estos ejemplo y no lo he logrado.

    Gracias

    dani escribió:
    01/28/2013 en 17:09

    esto es un WebMethod no Webservice

    dani escribió:
    01/28/2013 en 17:10

    pregunto

      Julio Avellaneda respondido:
      01/28/2013 en 17:13

      Hola Dani, es un web service, si revisas esta herendado de System.Web.Services.WebService, un webmethod debe ir en la misma pagina aspx desde la cual lo vas a llamar y debe ser estático, que en este caso se debe decorar con webmethod, peor es un web service, saludos.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s