¿Cómo llamar eventos de servidor con Ajax y jQuery en ASP.NET?

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. 

Artículos relacionados
19 Comentarios
  • metalheadb93 Comentar
    Thursday, April 14, 2016

    todo es muy confuso; primero, el método ObtenerContactos no está declarado en el código vb y segundo, la configuración de la página dice que es código c# pero la sintaxis es vb

  • Langner Comentar
    Friday, March 9, 2018

    hello!,I really like your writing very much! percentage we keep up a correspondence extra about your article on AOL? I require an expert in this house to resolve my problem. May be that's you! Looking ahead to see you.

  • Mayes Comentar
    Wednesday, March 14, 2018

    I just like the helpful information you provide in your articles. I will bookmark your blog and test once more here frequently. I'm relatively certain I'll learn plenty of new stuff right right here! Good luck for the following!

  • Tickell Comentar
    Saturday, March 17, 2018

    I go to see every day a few websites and information sites to read content, but this website gives quality based articles.

  • Pendleton Comentar
    Saturday, March 17, 2018

    Hey there just wanted to give you a quick heads up. The words in your content seem to be running off the screen in Firefox. I'm not sure if this is a formatting issue or something to do with internet browser compatibility but I thought I'd post to let you know. The layout look great though! Hope you get the issue fixed soon. Cheers

  • Riddoch Comentar
    Wednesday, March 28, 2018

    ???? ??????? 7??? ??? ???? ????? ??? ??????? ??? ???? ????????? ?????? ?????? ?? ?? ????? ??????? ??????? ?????? ???????

  • Beeston Comentar
    Friday, March 30, 2018

    ??? ??? ??? ?????? ??? ??? ???? ????? ????? ??? ?? ??? ????? ??? ?????? ??? ???? ?? ??

  • Neale Comentar
    Wednesday, April 4, 2018

    Good day! I could have sworn I've been to this blog before but after browsing through some of the post I realized it's new to me. Anyhow, I'm definitely delighted I found it and I'll be bookmarking and checking back often!

  • Haveman Comentar
    Tuesday, April 17, 2018

    Thanks for a marvelous posting! I genuinely enjoyed reading it, you could be a great author. I will be sure to bookmark your blog and will come back someday. I want to encourage you to definitely continue your great job, have a nice morning!

  • Sewell Comentar
    Thursday, April 19, 2018

    Wow! This blog looks exactly like my old one! It's on a entirely different subject but it has pretty much the same layout and design. Wonderful choice of colors!

  • Heiden Comentar
    Monday, April 23, 2018

    That is very interesting, You are an overly skilled blogger. I have joined your feed and stay up for in search of extra of your wonderful post. Also, I've shared your web site in my social networks

  • Dias Comentar
    Thursday, April 26, 2018

    Assim receita mas errada de se entender a Deus.

  • Brumfield Comentar
    Friday, April 27, 2018

    Hi there ?ust wanted to giv? you a quick heads u? and ?et you ?no? a few of the images ?ren't loading properly. I'm not ?ure why ?ut ? th?nk its ? linking issue. I've tried it in two d?fferent internet browsers ?nd ?oth ?how the ?ame outcome.

  • Rivett Comentar
    Monday, April 30, 2018

    I know this web site p?esents quality depending ?ontent ?nd extra data, ?? there any othe? website which present? ?uch info?mation in quality?

  • Hemphill Comentar
    Monday, April 30, 2018

    ?reat goods f?om yo?, man. I have understand your stuff ?revious t? and you ?re ?ust too wonderful. I ?eally like what you've acquired here, certainly like what you are s?ying and th? w?y in which you say it. You m?ke it entertaining and you stil? care fo? t? ke?p it smart. I c?nt wait to rea? far more from ?ou. Th?? is re?lly a gre?t web site.

  • Reyes Comentar
    Thursday, May 3, 2018

    Precisely what ? was searching for, regards for posting.

  • Freed Comentar
    Sunday, May 6, 2018

    This design is spectacular! You obviously know how to keep a reader entertained. Between your wit and your videos, I was almost moved to start my own blog (well, almost...HaHa!) Wonderful job. I really loved what you had to say, and more than that, how you presented it. Too cool!

  • Luu Comentar
    Monday, May 7, 2018

    Hello, I enjoy reading through your article. I like to write a little comment to support you.

  • Selph Comentar
    Thursday, May 24, 2018

    Sweet internet site, super pattern, ?eally clean ?nd utilize pleasant.

Enviame un comentario