Questo articolo è stato spostato nel mio nuovo blog:
Creando le nostre pagine ASP.NET non possiamo prescindere dalla presenza d'immagini per rendere il look & feel delle nostre web application più accattivante. Normalmente usiamo immagini statiche presenti in una cartella della nostra applicazione. In alcuni casi però questo non è sufficiente a soddisfare le nostre esigenze e ci troviamo quindi a dover caricare dinamicamente le immagini da altre risorse. Le possibilità sono molte ed in questo breve articolo cercherò di illustrarne una tra le più usate: il caricamento da file tramite una pagina aspx di servizio.
Questa tecnica è certamente una delle più usate. Probabilmente i fattori che la fanno risultare la più scelta dipende dal fatto che era una tecnica già praticabile con le tecnologie precedenti e che permette una rapida implementazione senza dover approfondire funzionalità avanzate quali possono essere quelle usate con altre tecniche (vedi HttpHandler).
Come prima cosa creiamo una web form che chiameremo Default.aspx. Rappresenterà la nostra pagina principale, pagina che utilizzeremo per inserire il controllo immagine che visualizzerà l'output fornito dalla pagina di servizio (web form che fornisce le immagini). La pagina creata è la seguente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>Caricamento da una pagina aspx</title>
<meta content="Microsoft Visual Studio .NET 7.1" name=GENERATOR>
<meta content=C# name=CODE_LANGUAGE>
<meta content=JavaScript name=vs_defaultClientScript>
<meta content=http://schemas.microsoft.com/intellisense/ie5 name=vs_targetSchema>
</head>
<body>
<form id=MainForm method=post runat="server">
<img alt="" src="GetPicture.aspx?Name=MobileAdvice.gif">
</form>
</body>
</html>
Non abbiamo, in questo caso, bisogno di creare alcuna riga di codice nel file di code behind oltre a quanto generato in automatico da Visual Studio. Come potete notare nella pagina Default.aspx è presente un tag html di tipo img. Vediamo in dettaglio come è stato valorizzato l'attributo src per richiamare la nostra pagina di servizio:
<img alt="" src="GetPicture.aspx?Name=MobileAdvice.gif">
Come potete notare la pagina richiamata si chiama GetPicture.aspx e richiede un parametro Name in query string indicante il nome del file che si intende visualizzare.
Ora non ci resta che preparare la nostra pagina di servizio e chiamarla GetPicture.aspx. Questa pagina non avrà alcuna interfaccia grafica e quindi ne analizzeremo esclusivamente il code behind . La prima cosa da fare è creare una funzione in grado di leggere il file richiesto predisposta anche per gestire le eventuali eccezioni che dovessero verificarsi. Il codice del metodo creato a questo scopo è il seguente:
private Bitmap GetImage(string name)
{
try
{
Bitmap img = new Bitmap(Server.MapPath("images/" + name));
return img;
}
catch(Exception ex)
{
return this.GetErrorImage(ex.Message);
}
}
All'interno del blocco try è presente la creazione dell'istanza di un oggetto Bitmap utilizzando il costruttore che prevede l'indicazione del file da aprire. Il nome del file viene determinato utilizzando il parametro name fornito al nostro metodo. Qualora questo caricamento generasse un'eccezione, il codice all'interno del blocco catch si preocuperà di chiamare il metodo GetErrorImage che è in grado di generare un'immagine riportante la descrizione dell'errore verificatosi.
private Bitmap GetErrorImage(string error)
{
Bitmap img = new Bitmap(200, 60);
Graphics g = Graphics.FromImage(img);
g.DrawString(error, new Font("Tahoma", 12, FontStyle.Bold, GraphicsUnit.Pixel),
SystemBrushes.Window, new Point(20,20));
g.Dispose();
return img;
}
Le nostre procedure di creazione dell'immagine iniziano al caricamento della pagina, tramite il metodo Page_Load delegato a gestire tale evento, attivando il processo di creazione dell'immagine richiesta.
private void Page_Load(object sender, System.EventArgs e)
{
if(Request["Name"] != null && Request["Name"] != string.Empty)
this.FlushImage(this.GetImage(Request["Name"]));
else
this.FlushImage(this.GetErrorImage("Nome file non indicato"));
}
La prima verifica effettuata in questa funzione è quella di controllare la presenza della variabile Request["Name"] per capire se saremo in grado di avviare il metodo di caricamento dell'immagine. Qualora questa variabile (passata in query string alla nostra pagina) non fosse presente, viene richiamato il metodo di generazione di un'immagine di errore passando come parametro il testo da inserire nel contenuto da renderizzare. In entrambi i casi, l'immagine risultate da uno dei due metodi viene inviata alla funzione FlushImage incaricata di predisporre l'output all'entità richiedente.
private void FlushImage(Bitmap img)
{
if(img.RawFormat.Equals(ImageFormat.Jpeg))
{
Response.ContentType = "image/jpeg";
img.Save(Response.OutputStream, ImageFormat.Jpeg);
}
else if (img.RawFormat.Equals(ImageFormat.Png))
{
Response.ContentType = "image/png";
img.Save(Response.OutputStream, ImageFormat.Png);
}
else
{
Response.ContentType = "image/gif";
img.Save(Response.OutputStream, ImageFormat.Gif);
}
img.Dispose();
Response.End();
}
Questo metodo, dopo aver verificato il corretto formato dell'immagine, imposta il ContentType e l'OutputStream della Response da inviare in risposta alla Request ricevuta.
Come si può notare, con poche righe di codice, siamo in grado di richiamare un'immagine in modo dinamico. Immagine il cui nome potrebbe essere impostato a runtime in base a criteri specifici della nostra web application.