Il controllo AdRotator risulta utile tutte le volte in cui vogliamo visualizzare una serie banner pubblicitari in pagina, ma ha il problema di aggiornare il proprio contenuto solo in risposta ad un postback; ciò lo rende di fatto poco utilizzabile in scenari basati su AJAX o su applicazioni Silverlight, dato che in questi casi il numero di banner visualizzati diminuirebbe drasticamente a causa dei pochi refresh di pagina.

In contesti simili è possibile implementare una logica analoga sfruttando jQuery per invocare un servizio remoto e aggiornare l'interfaccia della pagina. Supponiamo allora di aver implementato, lato server, un metodo in grado di recuperare il prossimo banner da visualizzare:

[WebMethod]
public static string GetNextAdvertisement()
{
    var rnd = new Random(DateTime.Now.Millisecond);
    int index = rnd.Next(1, 5);

    var serializer = new JavaScriptSerializer();
    return serializer.Serialize(new
        {
            ImageUrl = string.Format("images/Banner{0}.png", index),
            Url = string.Format("advertisement.ashx?idx={0}", index)
        });
}

Nel nostro esempio, la logica utilizzata per determinare il risultato è basata su numeri casuali, ma in uno scenario reale è possibile ovviamente implementare funzionalità più complesse, che accedano ad un database per recuperare un elenco di inserzionisti e memorizzino il numero di visualizzazioni di ogni banner. Il risultato è comunque un oggetto che contiene due proprietà ImageUrl e Url, serializzato in formato JSON utilizzando il JavaScriptSerializer.

Grazie all'attributo WebMethod, questo metodo viene esposto da ASP.NET come un servizio ed è invocabile lato client tramite una chiamata AJAX simile alla seguente:

function askForNewBanner() {
    $.ajax({
        url: "default.aspx/GetNextAdvertisement",
        type: "POST",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data) { updateBanner(data.d); }
    });
}

La funzione askForNewBanner utilizza il metodo jQuery.ajax per effettuare la chiamata remota al servizio. Esso consente di specificare un gran numero di parametri secondo cui deve avvenire la comunicazione; senza entrare troppo nei dettagli, nel nostro esempio l'URL è dato dall'indirizzo della pagina seguito dal nome del metodo. Quando l'invocazione si conclude con successo, il risultato ottenuto viene passato alla funzione updateBanner che deve effettivamente occuparsi di modificare il markup HTML.

In pagina il banner è realizzato con un div che contiene un link e un'immagine:

<div id="adv" style="visibility:hidden">
    <a href="#">
        <img src="" alt="adv" />
    </a>
</div>

La funzione updateBanner è in grado di modificarne il contenuto a partire dalla stringa JSON fornita in input:

function updateBanner(data) {
    var obj = $.parseJSON(data);
    $('#adv a').attr("href", obj.Url);
    $('#adv a img').attr("src", obj.ImageUrl);
    $('#adv').css("visibility", "visible");
}

Tramite il metodo jQuery.parseJSON, infatti, è possibile convertire una stringa JSON valida in un vero e proprio oggetto Javascript, che possiamo poi utilizzare per modificare il contenuto dell'immagine e impostare il relativo link.

Fino ad ora, insomma, siamo riusciti a realizzare un'infrastruttura client che interroga un servizio remoto e visualizza un banner pubblicitario in pagina in base alla risposta ottenuta. A questo punto non resta che temporizzarne l'esecuzione, in modo che gli inserzionisti possano essere effettivamente ruotati anche senza che avvengano refresh di pagina, ad esempio utilizzando il plugin jQuery Timers per mostrarne uno diverso ogni 30 secondi:

$(function() {
    askForNewBanner();
    $(document).everyTime("30s", function() {
        askForNewBanner();
    });
});