Chiamare un metodo di una pagina ASP.NET da jQuery

Tramite ASP.NET abbiamo la possibilità di chiamare un metodo statico, passargli dei parametri e farci restituire dei dati come se fosse un servizio web. I web service di ASP.NET sono basati sul protocolo SOAP, ma dalla versione 3.5 il protocollo di default è JSON, che è perfettamente compatibile con javascript. Ora vediamo come creare un metodo ASP.NET e, utilizzando jQuery, richiamarlo dal client senza eseguire alcun PostBack. L'unica limitazione (anche se non è così grave) che si ha è l'utilizzo di metodi statici. Per iniziare vediamo come creare un metodo server che ci permetta di formattare una data utilizzando le potenti funzioni di formattazione del .NET:

[WebMethod]
public static string FormatDateTime(DateTime data, string format) {
   return data.ToString(format);
}

a questo punto il metodo (essendo statico e marcato come WebMethod) è richiamabile attraverso una chiamata POST all'url http://[sito]/[paginaaspx]/FormatDateTime e inviando nello stream della chiamata post, codificata in JSON la sequenza dei parametri da invocare. Infatti se andiamo a leggere lo stream di input della Request ci troveremo:

byte[] s=new byte[HttpContext.Current.Request.InputStream.Length];
HttpContext.Current.Request.InputStream.Seek(0, System.IO.SeekOrigin.Begin);
HttpContext.Current.Request.InputStream.Read(s, 0, (int)HttpContext.Current.Request.InputStream.Length);

Avremo come input stream della richiesta una stringa del genere:
{"data":"2010-08-09T09:44:48.882Z","format":"dd MMMM yyyy"}.
Bene, una volta che abbiamo capito come funziona la 'parte server' vediamo di andare a fare questa chiamata POST utilizzando jQuery come framework client.
JQuery mette a disposizione un comodo metodo per eseguire chiamate AJAX: $.ajax al quale si possono passare dei parametri per controllare la chiamata, quali l'url, il metodo da utilizzare, l'eventuale stream di dati. Vediamo di analizzare quali parametri dobbiamo andare a impostare perché la nostra chiamata abbia successo:

• l'url che deve essere il nome della pagina seguita dal nome del metodo, come abbiamo visto prima.
• la tipologia di invio dati, che nel nostro caso deve essere di tipo POST
• il content-type (inviato come header http) che deve essere 'application/json; charset=utf-8' per consentire ad ASP.NET di utilizzare il giusto formatter.
• i parametri da inviare alla richiesta, sotto forma di stringa JSON (useremo JSON.stringify)

$.ajax({
   url: aspx + "/" + method,
   type: "POST",
   contentType: "application/json; charset=utf-8",
   data: pars == null ? null : JSON.stringify(pars),
   dataType: "json"
});

il parametro dataType indica a jQuery che i dati che verranno restituiti saranno in formato JSON (internamente jQuery andrà ad eseguire un eval sui dati restituiti per poterci fornire un'oggetto già completo di proprietà).
Ora vediamo di creare un bel wrapper alla funzione che ci permetterà di richiamarla in maniera agevole e di fare la nostra chiamata AJAX in tutta semplicità:

function callASPX(aspx, method, asyncMethod, pars, success, errorFunc) {
    $.ajax({
        url: aspx + "/" + method,
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: pars == null ? null : JSON.stringify(pars),
        dataType: "json",
        async: asyncMethod,
        success: function (msg) {
            if (msg != null) {
                if (success != undefined)
                    success(msg.d);
            }
            else
                if (success != undefined)
                    success(null);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            if (errorFunc == undefined)
                alert("Errore: " + XMLHttpRequest.responseText);
            else {
                errorFunc(XMLHttpRequest);
            }
        }
    });
}

In questa funzione abbiamo aggiunto la possibilità di richiamare il metodo in maniera sincrona o asincrona, di controllare eventuali errori e di richiamare una funzione una volta che i dati ritornano al client. La nostra chiamata sarà quindi:

callASPX("/Playsport/Default.aspx", "FormatDateTime", true, {data:new Date(), format:'dd MMMM yyyy'}, function (ret) {
   alert(ret);
});