Un web service REST esposto tramite WCF può essere facilmente invocato da codice Javascript; utilizzando jQuery, in particolare, è possibile ottenere risultati avanzati in maniera molto semplice. Il metodo da utilizzare è $.ajax al quale dobbiamo specificare la modalità della richiesta (POST), l'url del webservice e il nome del metodo (nel formato "urlBase/nomeMetodo"), eventuali parametri di input e una funzione di callback da eseguire al termine dell'operazione.

Un caso in cui questa funzionalità torna utile è quando si vuole caricare dinamicamente il contenuto di una popup: possiamo infatti invocare il metodo del web service tramite jQuery e sfruttare la Dialog di jQuery UI per visualizzarli.

Il primo passo consiste nel creare il codice HTML con il pulsante che mostra il popup ed il div che conterrà il testo che apparira in questo.

<input type="button" value="ShowModal" id="btnShowModal" />
<div id="dialog"></div>

Successivamente, al load della pagina, associamo un evento al click del bottone e configuriamo il div come una popup:

$(function() {
  $("#btnShowModal").click(ShowModal)
  $("#dialog").dialog({ modal: true, autoOpen: false, title: "titolo", width: 400, height:200 });
});

Infine, nel metodo ShowModal scatenato al click del bottone, si mostra la dialog e si effettua la chiamata ajax al successo della quale si popola il popup con i dati del server.

function ShowModal(ev) {
  $("#dialog").dialog('open');
  $.ajax({
    type: "POST",
    url: "http://localhost:3612/test/Service.svc/DoWork",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data) {
      $("#dialog").html(data.d);
    }
  });
}