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(); }); });
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Ottimizzare il codice JavaScript con i Shorthand Patterns - seconda parte
Tracciare gli eventi tramite i DevTools di Chrome
Iniettare servizi in un hosted service di ASP.NET Core
Un confronto tra React, Angular, Vue.js e Svelte: Form e validazione
Utilizzare le Promise in Javascript - prima parte
Parallelizzare le chiamate HTTP con async/await e le Promise in JavaScript
Usare il throttling per limitare la frequenza degli eventi in Blazor
Ottimizzare il codice JavaScript con i Shorthand Patterns - prima parte
Ottimizzare il codice JavaScript con i Shorthand Patterns - terza parte
Nullish coalescing e decostruzione in JavaScript
Eseguire task temporizzati tramite hosted service in ASP.NET Core
Terraform, Vue.js e Aws CloudFront
I più letti di oggi
- Costruire applicazioni native per ogni dispositivo con .NET e Visual Studio
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Monitorare e prevenire problemi in produzione
- DateOnly e TimeOnly in .NET: e io che ci faccio?
- Le novità di Angular 14
- Impostare un default custom per i metodi LINQ che tornano il valore di default
- Produttività con ASP.NET Core 6