Llamado AJAX desde aspx page

Buenas a todos.

En esta ocasión presentare como llamar a un metodo (WebMethod) en paginas de sitios ASP.NET Web Form, o  mas conocido como "paginas aspx", con la tecnologia AJAX.

Para hacerlo mas simple, el ejemplo lo he realizado todo en un solo archivo, dentro de ella tenemos el front-end y back-end. Como script front uso jquery y como lenguaje back-end, C# (cSharp).

El resultado final es un boton, que al dar click mostrará la hora actual de forma asíncrona usando Ajax.


Ejemplo: nombre de nuestra pagina → ajaxUsingWebMethod.aspx
En primer lugar mostraremos el html de estos pequeños controles
    <div>
        <input type="button" id="btnAjax" value="Call Ajax" />
        <label for="txtOutput">
            Output
                <input type="text" id="txtOutput" />
        </label>
    </div>
: boton llamara al metodo, y el texto mostrara la hora

Ahora vemos nuestro metodo C#
    [System.Web.Services.WebMethod]
    public static string GetTime(string format)
    {
        return DateTime.Now.ToString(format);
    }
: es simple, solo nos devuelve el formato de la hora o fecha (si es que se quiere) del format que se le pasa por parametro
Nota: algunas opciones de "format": HH:mm:ss:fff | dd MM, yyyy | t ... entre otros..

Ahora vamos a lo mas importante, y al motivo de este nueva entrada de blog, ...el "ajax"
            $(document).on('ready', function () {
                $('#btnAjax').on('click', showTime);
            });
: seteo del evento 'click' llamando a la funcion 'showTime'

function showTime() {            
            $.ajax({
                 type: "POST",
                 url: "ajaxUsingWebMethod.aspx/GetTime",
                 contentType: "application/json; charset=utf-8",
                 data: "{ format : 'HH:mm:ss:fff' }"
            }).done(function (data) {
                 $('#txtOutput').val(data.d);
            }).fail(function (data) {
                 console.log(' ERROR :: ', data);
            }).always(function (data) {
                 console.log(' COMPLETE :: ', data);
            });
        }
Analicemos en detalle esto:
$.ajax : es la funcion o metodo de jquery para hacer llamados Ajax
  |- type: (default: GET) verbo HTTP. Tener en cuenta que no todos los browser soportan todos los verbos, Por ejemplo los verb DEL o PUT.
  |- url: url del servicio/metodo
  |- contentType:  (default: 'application/x-www-form-urlencoded; charset=UTF-8') Usado cuando enviamos datos al server, en el cual le decimos el formato/mime enviado. El valor por default es bueno y sirve para la mayoria de los casos.
  |- data : éste es muy importante, y hace referencia al parametro que espera el metodo. Debe ser tal cual el mismo nombre y tipo.

Hay muchos mas, pero quiero solo mostrar un ejemplo basico, y no explayar mucho el tema de las distintas configuraciones del $.ajax.
Luego de ello tenemos los callback (done, fail, always), lo cual tampoco me extendi en explicarlos ya que es muy simple y seguro lo saben.
Solo para este caso, menciono que hoy en dia, se recomienda usar done, fail y always, y no success, error ni complete, estos ultimos estan deprecados (segun jquery)

Resumiendo y finalizando.
Al hacer click al boton, llama al metodo ajax de jquery y este al webMethod del back-end.
Devuelve la hora, o lo que se haya indicado en el formato y los visualiza.

Paso HTML completo.
<%@ Page Language="C#" %>
 
<!-- server -->
<script runat="server">
    [System.Web.Services.WebMethod]
    public static string GetTime(string format)
    {
        return DateTime.Now.ToString(format);
    }
</script>
 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>| ajax using web method </title>
</head>
<body>
    <div>
        <input type="button" id="btnAjax" value="Call Ajax" />
        <label for="txtOutput">
            Output
                <input type="text" id="txtOutput" />
        </label>
    </div>
 
    <!-- script -->
    <script src="jquery-1.11.1.js"></script>
    <script type="text/javascript">
        (function () {
            /* 'format' could be : 
                - 'HH:mm:ss'
                - 't'  
                - 'dd MM, yyyy' 
                and more...
            */
 
            function showTime() {            
                $.ajax({
                    type: "POST",
                    url: "ajaxUsingWebMethod.aspx/GetTime",
                    contentType: "application/json; charset=utf-8",
                    data: "{ format : 'HH:mm:ss:fff' }"
                }).done(function (data) {
                    $('#txtOutput').val(data.d);
                }).fail(function (data) {
                    console.log(' ERROR :: ', data);
                }).always(function (data) {
                    console.log(' COMPLETE :: ', data);
                });
            }
 
 
            $(document).on('ready', function () {
                $('#btnAjax').on('click', showTime);
            });
 
        })();
 
    </script>
</body>
</html>

Saludos!! :)



Comments

Post a Comment

Popular posts from this blog

C# | Extension Methods (Metodos de extension)

Hola.... En el dia de hoy, les hablare sobre los Extension Methods o como se dice en español Metodos de Extension . Esta..."forma" de hacer cosas, se usa especificamente para crear de forma personalizable (por asi decirlo) metodos que necesitamos, y que el propio objeto no las tiene o se realizan de otra manera que no nos convence. Veamos a un simple ejemplo: Clase A // Tenemos estos datos... var  arrayOfNumbers  =   new [] {  25 ,  36 ,  5 ,  66 ,  11 ,  78  }; const   int  myNumber  =   66 ; /*      Queremos saber si 'myNumber' está o existe dentro del array 'arrayOfNumbers'.     O sea, queremos solo la respuesta SI o NO existe. (true or false)     Normalmente esto se podria hacer asi.....
Read more

Javascript : preventDefault & stopPropagation

Hoy en dia, se usa mucho el codigo javacript , y cada vez veo mas el ".on('click', function...." o similares (segun como cada uno lo aplique)..., pero me refiero a la asignacion de accion a un evento a través de codigo. Debido a esto, seguramente muchas veces hemos visto funciones que llevan (o no) el parametro "e" o "evt", indicando que se espera o se quiere trabajar con el evento del objeto actual. Éste parametro tiene varias propiedades, pero hoy solo les hablare del  preventDefault y stopPropagation. stopPropagation |- Detiene la ejecucion en el evento actual, "cortando" el efecto bubbling. Ejemplo: (nuestro html ) <! DOCTYPE   html > < html > < head > < title ></ title > </ head > < body > < div   id = "divTop2" > < div   id = "divTop1" > < a   id = "a"   href = "http://www.google.com" >Google</ a > ...
Read more

HTML5 | Drag & Drop

Image
En este "tutorial" explicare con mis palabras y lo mas claro posible el tema de arrastrar y soltar (mas bien conocido como Drag and Drop) en HTML. En primer lugar esta "propiedad" es un Api de HTML5, y hasta la fecha en el cual se escribio este post, no funciona en todas las versiones de browser. Como siempre IE, da la nota siendo solamente posible hacer funcionar d&d en la version 11. Vamos al codigo!! Antes de iniciar, la salida de esto es, en la parte superior tres recuadros que seran los "destinos" y abajo un rectangulo general, con cajitas que seran los elementos "movibles". 1 - HTML dentro del body <!-- Aqui tenemos el sector superior que tendra los tres recuadros destinos -->      < section   class = "sectionTop" >      < article   class = "sectionTop-article left" ></ article >      < article   cla...
Read more