[jQuery] Indicando que se realiza una petición AJAX en ASP.NET con jQuery

Posted on


Amigos del blog, este es el primer post técnico del año el cual espero les sea de su agrado, y vamos a ver como podemos indicarle al usuario que se esta realizando una operación AJAX en la página, ya que siempre que se realiza un llamado AJAX realmente el usuario si se esta realizando alguna operación o no en la página.

El ejemplo es sencillo (no tiene nada de diseño) pero ya ustedes lo podrán mejorar.

Entonces manos a la obra, vamos a tener una interfaz sencilla, la cual consta de principalmente de una caja de texto en la que mostraremos el nombre de un usuario devuelto por el servidor, en resumen nuestro HTML será algo como:

   1:  <div>
   2:      <h1>jQuery | Informando que esta realizando una petición AJAX</h1>
   3:      <hr />
   4:      <label>Usuario:</label>
   5:      <asp:TextBox ID="txtUsuario" runat="server"></asp:TextBox>
   6:      <img id="imgAjax" src="images/loader.gif" alt="Procesando" title="Buscando Usuario" class="ajaxLoader" />
   7:      <asp:Button ID="btnEjecutar" runat="server" Text="Buscar Usuario" />
   8:  </div>

Luego de tener lista ya nuestra complicada interfaz jaja, procedemos a escribir el código jQuery:

   1:  $(function () {
   2:      var imgAjax = $("#imgAjax");
   3:      var campoTxt = $("#<%= txtUsuario.ClientID %>");
   4:      $("#<%= btnEjecutar.ClientID %>").click(function (e) {
   5:          e.preventDefault();
   6:          campoTxt.val('');
   7:          imgAjax.removeClass('ajaxLoader');
   8:          $.ajax({
   9:             type: "POST",
  10:             url: "Home.aspx/ObtenerUsuario",
  11:             contentType: "application/json; chartset=utf-8",
  12:             dataType: "json",
  13:             success: function (resul) { imgAjax.addClass('ajaxLoader'); campoTxt.val(resul.d); },
  14:             error: function () { imgAjax.addClass('ajaxLoader'); alert('Se ha producido un error.');}
  15:         })
  16:     })
  17:  })

Ahora voy a explicar el código jQuery anterior:

  • Línea 2 y 3: Guardamos en variables los selectores (elementos) que necesitamos.
  • Linea 4: Iniciamos la estructura de la petición AJAX.
  • Línea 5: Le cancelamos al botón su comportamiento por defecto para que no realice postback.
  • Línea 6: Limpiamos el campo de texto.
  • Línea 7: Removemos la clase ajaxLoader a la imagen, es decir ahora la imagen se muestra.
  • Linena 13 y 14: Lo importante acá es que a imgAjax le añadimos la clase ajaxLoader, esto es para que la imagen se oculte.

Y el evento en el lado del servidor:

   1:  <WebMethod()>
   2:  Public Shared Function ObtenerUsuario() As String
   3:      Thread.Sleep(4000)
   4:      Return "Julio Avellaneda!!"
   5:  End Function

Para que la ejecución de la función tarde un poco le hacemos un Sleep al servidor de 4 segundos, y luego continuará con la ejecución de la función, en este caso por simplicidad le he colocado que siempre devuelva la misma cadena de texto, pero en una aplicación muy seguramente vamos a tener una lógica mucho más compleja.

Finalmente cuando iniciemos con nuestro llamado AJAX vamos a ver que al lado del campo de texto se muestra una imagen que indica que se esta realizando una acción:

Imagen1

Espero les sea de utilidad, como siempre les dejo el código del ejemplo:

Descarga el ejemplo! (el archivo se llama jQuery_AJAX_Indicator)

6 comentarios sobre “[jQuery] Indicando que se realiza una petición AJAX en ASP.NET con jQuery

    Isaac Ojeda escribió:
    07/23/2012 en 10:01

    Muy buen ejemplo, últimamente he estado trabajando con jQuery y ASP.NET, prácticamente no nomas estas enseñando como mostrar un “Loading” si no un plus enseñas como consumir un método desde AJAX jquery, muy bien!… saludos!.

    Resumen Post 2012 « Todo en ASP.NET escribió:
    12/19/2012 en 22:03

    […] [jQuery] Indicando que se realiza una petición AJAX en ASP.NET con jQuery […]

    Resumen Post 2012 « MVPs de LATAM escribió:
    01/04/2013 en 12:57

    […] [jQuery] Indicando que se realiza una petición AJAX en ASP.NET con jQuery […]

    darco1103 escribió:
    09/07/2013 en 09:48

    Hola julio, mi pregunta es como hacer lo mismo pero cuando el textbox ha cambiado de texto (textboxchange)???. Resulta que en ese evento mi aplicacion determina lo siguiente:
    -Caso1: Si el usuario está registrado, aparece un mensaje de información (lo descargué de tu skydrive y me funciona perfecto).
    -Caso2: Si el usuario no está registrado, puede continuar llenando el formulario.

    Lo que quiero es que el usuario sepa que en ese campo se está realizando un proceso:
    -Caso1: Antes de que aparezca el mensaje de información y hasta que termine el postback
    -Caso2: Hasta que termine el postback.

    Trabajo con asp.net vb.

    …Gracias!!!

    Julio Avellaneda respondido:
    09/23/2013 en 10:30

    Hola, bueno creo q si estas haciendo algo cada vez que el usuairo escribe algo se va a ejecutar constantemente tu js y depronto puedes tener problemas, en ese caso podrias mostrar siempre el mensaje si el input tiene el foco y ocultarlo cuando lo deje, o bien puedes utilizar los eventos de teclado, keydown, keyup, etc.

    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