• Programmazione » ASP.NET » Tutorial ASP.NET

Come visualizzare immagini in maniera random o casuale con ASP.NET. Codici ed esempi.

L’implementazione di un meccanismo in grado di visualizzare immagini in maniera random o casuale ha varie applicazioni. Può servire per visualizzare dei banner in rotazione, essere messo nella home page come una vetrina dinamica, creare un controllo CAPTCHA, oppure come semplice abbellimento all’interno delle pagine.

In ASP.NET questo meccanismo può essere implementato in diversi modi. In questo articolo realizzeremo tale effetto utilizzando la classe Random e il controllo adRotator.

La classe Random ci permette di caricare un'immagine casuale tra quelle presenti in una determinata cartella. L'unica attenzione è quella di chiamare le immagini con un numero progressivo. L'esempio che andiamo ad analizzare carica in maniera del tutto casuale un’immagine compresa tra 1.jpg e 8.jpg.

<%@ Page Language="VB" ContentType="text/html" %><form runat="server"><asp:Image ID="imgRandom" runat="server" /></form><SCRIPT language="VB" runat="server">Sub Page_Load(Src As Object, E As EventArgs)  Dim RandIMG as New Random()  imgRandom.ImageUrl = RandIMG.Next(1, 9).ToString() & ".jpg"End Sub</SCRIPT>

Nel codice è stato creato un oggetto RandIMG come istanza della classe Random:

Dim RandIMG as New Random()

Ed utilizzando il metodo Next dell’oggetto, scegliamo un numero compreso tra 1 e 9 con 9 escluso ed 1 incluso. Quindi concatenandolo con l’estensione .jpg non facciamo altro che visualizzare l’immagine in maniera del tutto casuale.

imgRandom.ImageUrl = RandIMG.Next(1, 9).ToString() & ".jpg"

L’uso della classe Random ci permette di visualizzare in maniera casuale le immagini. Ma se volessimo creare un applicativo che mostrasse non solo in maniera casuale le immagini ma anche in modo da garantire la visualizzazione di tutte le immagini, ci occorrerebbe un controllo più “intelligente” con la possibilità di dare dei pesi alle immagini stesse. Tale controllo è l’adRotator già presente in ASP ma che in ASP.NET è stato rivoluzionato ed esteso.

Il controllo adRotator consente agli sviluppatori di inserire immagini in un’applicazione Web e consente di dotare lo sviluppo di una logica personalizzata per tenere traccia dei clic sulle immagini, opzione utile per visualizzare banner pubblicitari, e di dare un peso alle immagini in modo da garantire ad ogni immagine la sua visualizzazione con un certo grado di importanza.

Vediamo come utilizzare tale controllo per visualizzare delle immagini casuali. L'implementazione in ASP.NET è molto simile a quella in ASP classico.

Inseriamo il controllo AdRotator nella pagina asp.net

<asp:AdRotator id="AdRotator1" runat="server"></asp:AdRotator> 

L'elenco delle immagini viene creato su un file esterno XML. Mentre i file delle immagini risiedono in una cartella. A differenza della classe Random possiamo usare immagini con differenti estensioni (.jpg, .gif, .png, .bmp) e  non è obbligatorio rinominarle con numeri interi progressivi.

Il file XML ha la seguente struttura:

<Advertisements> <Ad> <ImageUrl>/images/banner/ban1.gif</ImageUrl> <NavigateUrl>http://www.be-st.it</NavigateUrl > <AlternateText>Be.St. Web Consulting </AlternateText> <Impressions>70</Impressions> </Ad> <Ad> <ImageUrl>/images/banner/ban1.gif</ImageUrl> <NavigateUrl>http://www.be-st.it/prodotti</NavigateUrl> <AlternateText>Prodotti e-commerce </AlternateText> <Impressions>30</Impressions> </Ad> </Advertisements> 

<ImageUrl>: il path ovvero il percorso in cui risiede il banner
<NavigateUrl>: eventuale url a cui collegare l’immagine quando ci si clicca su. Se l’immagine non è cliccabile al posto dell’url inserire il simbolo del cancelletto “#”
<AlternateText>: è il testo visualizzato passando sopra l'immagine con il puntatore del mouse o se l'immagine non viene correttamente caricata (Testo alternativo)
<Impressions>: ha un nome un po' fuorviante. In realtà indica semplicemente l'importanza (o priorità) dell’immagine (il peso).

Il file XML creato viene richiamato come parametro nell'attributo AdvertisementFile del tag adRotator  nella pagina ASP.NET

<asp:AdRotator id="AdRotator1" runat="server" AdvertisementFile="banner.xml"></asp:AdRotator> 

In questo modo abbiamo implementato un meccanismo più complesso e più personalizzato per visualizzare le immagini aleatorie, che può essere impiegato in vari campi dalla visualizzazione di banner pubblicitari alle gallerie fotografiche.